基于微信小程序的移动学习平台的设计与开发

袁芳 许文

摘要：随着高校学生智能手机的普及，为移动学习的产生与发展提供了硬件基础，同时移动学习也改变了传统的教学模式，该文以动态网站设计课程为例，该课程为计算机应用专业的核心课程，知识点多，实践性强，通过设计与开发一个基于微信小程序的动态网站设计移动学习平台，可以实现学生随时随地自主化学习，以便学生牢固在掌握该课程知识点，提高学习积极性。

关键词：微信小程序;动态网站设计;移动学习;学习平台

中图分类号：TP311;G642      文献标识码：A

文章編号：1009-3044（2021）26-0086-02

开放科学（资源服务）标识码（OSID）：

1 背景

随着计算机与网络信息技术的飞速发展，互联网上各种在线学习平台如雨后春笋一样涌现，移动互联网学习平台目前有三种形式，一是在线教育学习网站平台，二是自主开发的App教育学习平台，三是小程序学习平台。最近几年智能手机由于普及率高，功能完善、易携带、便于交流等特点已成为我们日常与人交流、查看资讯和学习资料的重要工具，移动学习也正进行得如火如荼。在教育领域，越来越多的学生利用碎片化时间在任何地点进行学习，高校学生的移动学习正逐步成为未来发展的趋势。本文以我院动态网站设计课程为例，设计并开发微信小程序移动学习平台，方便学生利用碎片化时间复习和巩固该课程的内容，从而提高动态网站开发能力。

2 微信小程序的优势

微信小程序于2017年1月上线，它是不需要下载安装就可以使用的应用，用户只需扫一扫或搜一下就可以打开应用，实现了触手可及的梦想，并在使用完小程序后，可以达到用完即走的理念。利用微信小程序开发应用其开发门槛低，从而降低了建设维护成本，这是因为微信小程序其底层技术与HTML有很多相似的地方，前端技术比其他技术的学习门槛低。在同时满足功能和性能需求的前提下，与WEB或App相比，小程序只需依托微信的开发标准开发，便可在不同操作系统中使用，如果小程序发布了新版本，用户是不需要花时间去更新，随时就可以打开新的版本使用。所以微信小程序基于跨平台的特点，大大降低了建设维护成本，提高了更新小程序版本的效率[1]。

2021微信之夜上张小龙表示目前每天有10.9亿人打开微信，3.3亿用户进行了视频通话，有3.6亿用户读公众号文章，4亿用户使用小程序[2]。可见微信用户数量之大，微信小程序基于微信平台，在微信上有专门的接口，用户只需有微信账号后，即可通过扫描二维码、搜索、好友分享等方式打开微信小程序。凭借微信的影响力、平台的稳定性、庞大用户基数和便捷式接入方式，就可以实现一种易获取易使用易推广的轻量化在线学习平台。

3 微信小程序移动学习平台功能模块设计

结合动态网站设计课程的特点和高职学生自学情况，设计微信小程序移动学习平台，该学习平台为我院学生和教师提供服务，包括前端和后端的设计。前端是基于微信小程序开发，有课程知识点、项目、测试和个人中心四个大模块如图1所示。知识点模块内容是按照动态网站设计课程章节内容进一步进行知识点碎片化分割而成，其中的理论知识和实训操作，大都制作出相应的图文文档资料，对于其中比较难的知识点和操作制作相应的视频学习资料，从而使学生能够随时随地反复查阅知识点和观看视频，让学生进一步对知识点和实操加以巩固。项目模块是对动态网站设计课程知识点的综合运用，也是课程难度最大的一块。在搭建动态网站项目过程中是讲究开发的先后顺序，在以往的传统课堂教学中，学生往往感觉整个学期学了许多内容，但到学期末还是不能独自完成完整项目的开发。即使跟着教师一步步建立动态网站项目，但由于课时有限，没有一一解决每一位同学出现的问题，会导致有部分同学出现问题没及时解决，导致后续开发无法开展，从而出现厌学和弃学问题。针对该问题，在项目模块中的每个项目列表按项目开发的先后顺序从上往下罗列，并在每个项目列表名称前加上数字序号表示开发的先后顺序，这样方便学生依着步骤开发，容易发现自己开发项目中出现的问题。测试模块是针对动态网站设计课程每一章节相关的知识点而出的相应的测试题，方便学生可以反复测试每一章节的知识内容，进一步巩固每个章节的知识点。个人中心模块包括学生信息绑定、个人信息设置、留言反馈等功能。

依据前端实现的功能需求，后端的功能模块分别是：课程内容管理、视频管理、试卷管理、成绩管理和留言管理。

4 学习平台开发框架与功能实现

4.1 微信小程序的开发框架

微信小程序开发框架可以让开发者们能够通过简便、高效的方式开发具有原生App体验的服务。一个微信小程序结构主要由主体文件和页面文件两部分组成，主体文件部分主要由app.json、app.wxss和app.js三个文件构成。app.json文件用来对微信小程序进行全局配置，它决定了页面文件的路径、设置网络超时时间、窗口表现，http请求跳转、设置多个tab等，注意在app.json是不可以添加注释的。app.wxss文件是小程序的全局样式文件，作用于每一个页面，用于描述WXML的组件样式。app.js文件使用系统的方法处理全局文件，在整个小程序中，每一个框架页面和文件都可以使用this获取app.js文件中规定的数据和函数，每一个小程序都会有一个app.js文件，有且只有一个，位于项目的根目录中[3]。小程序的页面部分由4个文件组成，如表1所示。

微信小程序开发主要基于MVC框架，即模型、视图和控制器。模型层不是很明显，一般存在于控制器中，大部分时候以页面局部变量或全局变量的形式存在。视图是wxml文件表示，它把控制器得到的数据通过该文件进行组合和渲染，视图与控制器的交互通过绑定事件的形式来触发控制器中各个函数的执行，其中大部分时间会传递目标节点对象作为它的参数。