陈宏扬 龙雨妃

摘要：基于微信小程序的轻应用开发正在成为新的互联网风口，特别是类似“跳一跳”这类的闯关轻游戏得到了广大网民的喜爱。如果融入游戏化学习思维，把学习平台打造成一个闯关类的微信小程序游戏，使学习者的学习过程变成通关打游戏，一方面能够提升在线学习的乐趣，激发学生学习动机，增强在线学习平台的黏性，另一方面利用微信的流量优势，能够帮助学习平台裂变更多的学习者。文章提出了基于微信小程序的“闯关游戏式”学习平台的研究与设计，并探讨其总体设计以及平台子模块设计。

关键词：微信教学；微信小程序；游戏化学习；在线学习平台；教育游戏

根据《2017微信用户&生态研究报告》显示，微信用户的活躍用户已经达到8.89亿，2016年日均使用微信时长在4小时以上的用户较2015年增加了一倍，微信已经成为人们重要的社交活动之一，而基于微信小程序的轻应用开发正在成为新的互联网风口。2017年12月28日，小程序游戏“跳一跳”上线，不到1个月累计用户数量已经达到3.1亿，究其原因主要是微信庞大的用户群加上人们习惯利用碎片化的时间进行放松，减轻压力的行为。随着互联网教育的快速发展，教育游戏越来越热，游戏化学习思维也越来越得到社会认可，如果能够利用人们爱玩游戏的心理，融入游戏化学习思维，基于微信小程序开发把类似MOOC的学习平台打造成一个闯关类轻游戏小程序，把平台内的课程学习过程设计成一个个好玩的角色扮演（Role-Playing Game，RPG）通关游戏任务，让用户在学习的过程中得到积分、徽章奖励，并利用排行榜等元素来激发学生的挑战心，一方面能够迎合学习者的喜好，提升学习者的学习乐趣，激发学生的学习动机，增强学习平台的用户粘性，另一方面微信自带流量属性，能够让学习平台更快地在用户间传播，快速裂变新的学习者。综上所述，本文提出了基于微信小程序的“闯关游戏式”学习平台的开发。

1 基于微信小程序的游戏化学习平台的优势及意义

2017年1月9日，微信小程序正式上线，它基于微信开发，不需要安装，用户扫描二维码或者直接搜索到便可使用。微信小程序采用DCloud流应用模式进行开发，并使用JS实现业务逻辑，WXML和WXSS来共同实现表现层功能，WXML是一种微信定义的模板语言，WXSS类似CSS，属于国内首创[1]，该技术的开发属于国内领先水平，使用该技术来开发游戏化学习平台，既有利于推广轻应用开发新技术，而且可以创新国内教育软件及游戏化学习平台，推动游戏化学习平台的发展。其中基于微信小程序来开发游戏化学习平台的优势及意义主要体现在以下6个方面。

1.1 即用即走

现在市面上很多的移动学习平台，比如超星学习通，都是需要用户安装APP，用户不使用的时候也会占用手机的存储空间，而微信小程序不需要安装到手机上，它是微信内的云端应用，像微信公众号一样活在你的微信里，要用的时候打开，不用就关掉，方便了用户。

1.2 用户红利

微信拥有8亿多的用户，而且黏性很高，让各大学习平台费尽心思的流量问题轻松解决。微信小程序依附于微信，继承了微信的用户群，在微信里开发产品更容易触达用户，而且如何扫码、分享、参与活动不需要再教育，其优势是其他学习平台无法比拟的。

1.3 多终端适配

支持多种智能手机和平板，支持Android，iOS，Windows，Symbian等智能系统，腾讯公司对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能，增强了平台的稳定性，只要能安装微信的终端，都能享受到基于小程序的游戏化学习平台的优势。

1.4 免注册，易推广

微信小程序依附于微信这个航母应用，在微信中的“发现”菜单有单独的入口，还可以通过搜索、扫一扫等方式直达学习内容，同时学习者不需要再注册新的学习账号，只需给微信账号授权即可登录。微信在2017年6月上线了小程序的关键词推广，增强了小程序的曝光率；通过附近的小程序等流量入口，对于挖掘学习平台的新用户有举足轻重的作用；结合微信公众号的软文推广以及搭建小程序和公众号之间的联系，加大学习平台的宣传；分享到群，分享到好友的亲民功能加强了学习平台的传播。

1.5 前景明朗

微信的主要思想是去中心化，未来的主推产品可能就是小程序，而小程序最有前景的应用笔者认为是轻游戏，基于微信小程序的游戏化学习平台的开发正是以此为契机，一方面迎合市场的需求，另一方面加强游戏化学习思维的推广。

1.6 教育资源共享

高校的精品资源对于围墙外的人来说是可望而不可即的，微信小程序可以帮助高校把现有的优质微课、课件和题库等教学资源传播出去，让高校有更多的受众[2]。

2 游戏化学习平台的开发与设计

2.1 平台总体架构设计

平台的总体架构和学习流程引入游戏化的学习思维，并结合“碎片化资源，结构化课程”的指导思想，在微信小程序开发平台上进行开发。把学习平台内的每一门课程的学习过程打造成一个个好玩的RPG闯关游戏任务。用微信登录学习平台后，学习者可以作为骑士进行学习闯关或者成为守关BOSS角色接收学习者挑战[3]，并获得对应的积分，最终刷新排名榜。

系统采用MINA技术框架进行开发，整个框架分为3层：视图层、逻辑层和系统层，如图1所示。该框架可以对微信提供的文件系统、网络通信、任务管理、数据安全等基础功能进行封装，对上层提供一整套JavaScript API，调用微信提供的各种基础功能与能力，能够帮助我们快速地搭建游戏化学习平台。

2.1.1 页面视图层（View）

WXML是MINA提供的一套类似HTML标签的语言以及一系列基础组件，结合开发WXSS文件来控制页面的展现样式，平台中所有的学习交互流程和功能模块均可在该层次上面实现，如RPG角色界面、游戏学习任务闯关界面、学习排行榜等。

2.1.2 逻辑层（App Service）

逻辑层为MINA框架提供服务，使用JavaScript编写，采用基于微信的异步线程单独加载运行，处理学习平台的页面渲染、页面交互，例如学习平台的学习笔记数据、学习者闯关数据、学习者交流等数据。它区别于HTML5，不能使用JavaScript中的DOM操作。

2.1.3 系统层（Navtive）

系统层包括微信能力、文件存储、网络请求等，其中微信能力包括微信用户信息、微信公眾号、二维码、扫一扫、微信支付等基础功能，开发学习平台时可以通过逻辑层进行调用，文件存储包括学习平台的页面临时数据、本地缓存、网络存储或调用等数据，学习平台开发时，需要开通腾讯云，并与学习平台小程序关联，用于存储用户的学习数据、排名数据以及课程等数据。

2.2 平台子模块设计

依照“闯关游戏式”的学习模式，教师在平台上建设课程的时候，对课程资源进行组织，在每个学习任务的知识点导入微课、教学课件、闯关秘籍（课程导学、重点难点指导）、习题库等教学资源，并对学习任务进行相关的属性设置，如完成时间、生命值加权计算（分数加权计算）等。平台课程学习主要有两个阶段，分别是自主学习阶段和闯关测验阶段，每个学习阶段设计对应的功能子模块，子模块功能通过接口相互调用，既可以独立使用，也可以结合其他模块使用。

2.2.1 自主学习阶段

设计自主学习系统，该系统主要由有选课模块、角色扮演RPG系统模块、生命值模块、学习任务模块、教学互动模块、在线笔记模块所组成。学习时，学习者用微信登录学习平台后，RPG系统会自动把第一次登录的学习者识别为骑士角色，并让学习者选择自己的形象照。学生通过在当前知识点观看授课视频、参与学习讨论、回答教师问题、完成作业、记录课堂笔记等学习活动并结合完成时间来获得骑士的生命值，学习者必须完成当前知识点任务的学习后，才能进入到后一个知识点的学习。生命值系统由教师管理，在后台可以进行生命值加权计算设置，生命值占比案例设置如图2所示。学习者自主学习阶段的生命值由每个知识点获得的生命值累计得出，当学习者完成整个课程知识任务的学习，并获得60分以上的生命值时，即可获得进行闯关测验阶段的资格，当学习者确认进行闯关测验挑战时，系统将自动将学习者当前的生命值提交到学习排行榜。

2.2.2 闯关测验阶段

设计闯关测验系统，主要包括闯关测验模块、RPG角色模块、计时模块、闯关经验值等子模块，由老师在课程建设试题库，试题类型主要包括客观题和主观题，分难、中、易3种维度将题目导入平台，利用测验系统的组卷功能，可以随机组成不同的测试卷，形成课程闯关测验任务，闯关测验任务有30道选择题，共计60经验值；10道判断题，共计20经验值，以及l道问答题，共计20经验值，累计100经验值。主观题经验值由系统打分直接得出，主观题经验值由老师后台评出。闯关测验系统针对难、中、易关卡设计3个守关BOSS角色进行守关，每一个关卡通关成功并且获得最高经验值的学习者自动被系统识别为关卡守关BOSS，时刻迎接学习者挑战。闯关前，学习者甲先阅读闯关秘籍，并选择测验难度关卡以及预估完成时间，闯关任务右侧会出现该关卡经验值最高的学习乙进行守关，并显示学生乙的闯关时间和闯关经验值，如图3所示。闯关时，学习者甲如果在自己设定的时间内完成测验，并获得60以上经验值，则闯关成功，经验值将和前阶段的生命值累加，提交到学习排名榜。如果学习者在相同难度的测验上，所花的时间更点，经验值更高，那么学生甲的骑士就会走下来，把学习乙的守关BOSS杀掉，并获得该关卡的附加经验值，击杀过程设计一些场景动画提升娱乐性，如BOSS躺倒、求饶等效果让学生者获得游戏快感，增强娱乐性[3]。

3 结语

微信小程序作为轻型应用很有可能会是未来移动互联网应用的主要形式，其良好的用户体验以及基于微信强大的传播能力必然能为MOOC等学习平台的建设带来更为广阔的前景。同时，游戏化学习思维也越来越得到认可，笔者将二者结合，希望能为同行开发在线学习平台提供借鉴。

[参考文献]

[1]刘琦，丁萍莉.基于微信小程序的互联网+教育学习平台的研究与设计[J].内江科技，2016 （12）：45-46

[2]王娟.微信小程序在高校教学中的应用与推广[J]电脑知识与技术，2017（ 27）：147-148

[3]陈宏扬.基于HTML5的“闯关游戏式”移动学习平台的开发和设计[J]广东轻工职业技术学院学报，2017 （3）：8-12.