基于微信小程序的在线编程学习平台的设计研究

陈华凯，徐永瑞，周星宇

(南京邮电大学通达学院，江苏 南京 225100)

0 引言

隨着移动互联网的不断发展，以智能手机为代表的便携式移动终端设备因其具有普及率高、易携带、功能完善、便于交流等特点而成为人们获取生活资讯、查找学习资源、与人交流的重要工具，移动学习也应运而生，并进行得如火如荼。移动学习是一种在移动设备帮助下的能够在任何时间、任何地点发生的学习，移动学习所使用的移动计算设备必须能够有效地呈现学习内容并且提供教师与学习者之间的双向交流。移动学习能够突破传统学习时间和空间的限制，在当今及未来的学习方式中占据着重要的地位。同时，移动学习需要强大的网络资源作为支撑，因此设计和开发承载网络资源的在线编程学习平台具有重要的意义。

1 搭建在线编程学习平台是高校教育信息化发展的必然趋势

1.1 弥补传统网络学习平台的不足

大多数的高校都有自己的网络学习平台，但这些网络学习平台主要依托 PC端搭建，而用户不可能随时随地的携带 PC进行学习，严重影响了平台上资源的使用率。而在很多高校中，一大部分学生并不拥有个人电脑，学校也无法给学生提供充足的计算机进行学习，这对他们的自主学习造成了极大的不便。另一方面，由于互联网过于庞大，传统的网络课程设计相对独立，一般采用不同的通讯协议和数据传输格式，给国家“十三五”教育信息化计划中大力提倡的实现对知识资源的快速发现、合理整合和简单共享造成了困难。而在线编程学习平台主要基于手机进行使用，经调查，几乎所有的高校学生人手一部智能手机，在线编程学习平台的搭建，为学生的学习提供了便利性。同时，在线编程学习平台对上传的学习资源要求更加的规范，便于资源的整合和获取。

1.2 为多元化学习方式、教学模式提供支持

随着移动网络的覆盖和智能手机的普及，不受时空限制的移动学习和碎片化学习等方式正逐步引领着大学生的学习生活。高校学生利用在线编程学习平台开展学习活动越来越普及，比如下载课程资源、观看网络视频、进行在线答疑等。另一方面，随着教育信息化的发展，教学模式也越来越多元化，比如目前比较火热的微课教学、翻转课程教学等，这些教学模式的有效实施需要移动互联网和数字化技术的支持，而在线编程学习平台的搭建，让教师可以便捷地上传课程资源，而学生利用智能手机便可简便、快速地获取学习资源进行自主学习，为下一步的教与学打好基础。因此，在线编程学习平台的搭建，是移动学习、碎片化学习发展的基石，也为当前新型的教学模式提供了强有力的平台支持。

1.3 实现资源整合共享和即时互动

在线编程学习平台的搭建，不仅仅能让学习者更加便捷地开展移动学习、碎片化学习，更在于能够实现资源整合共享和创造一个移动式的学习社区。传统的网络学习平台课程资源庞大繁杂，且设计相对比较独立，不利于资源的整合和传播，而在线编程学习平台对上传的资源要求比较规范，且要求轻巧精致。其借助通讯软件的便捷性和易传播性，可以方便地对教学资源进行关注、分享等操作，能最大限度地实现教育资源的有机整合和共享。另一方面，移动社区中的交流远比单向的在线学习课件更加有吸引力，也让学习者的交流和答疑变得更加的即时和方便，这些都能让学习者的学习变得更加的有意义。

2 微信小程序的内涵及其应用优势

微信小程序于 2017年 1月 9日凌晨正式上线，简称小程序，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。开展小程序开发大赛等多方面将小程序开发融入高校教学。由此可见，将微信小程序与教育教学相结合将成为一种潮流。本论文提出基于微信小程序开发高职在线编程学习平台具有以下重要优势。

2.1 开发门槛低，降低建设维护成本

微信小程序其底层技术支持和HTML技术有很多相似之处，用户随时打开就是新版本。小程序基于跨平台的属性，无疑大大地降低了建设维护的成本、提高更新版本的效率。

2.2 基于微信入口，易于传播推广

微信基于微信平台，在微信中有专门的接入口。而在互联网的用户中，微信小程序制作的在线编程学习平台在广大师生中无疑极易于传播和推广使用。

2.3 即用即走，使用更加便捷

微信小程序是内置于微信的云端的应用程序，其突出特点便是无须下载资源的搜查、在线交流，也可方便在小程序随时切换回聊天，灵活快捷。极大地方便了学习者充分利用碎片时间，有效的随时随地的实现移动学习。

2.4 功能突出，更好的用户体验感

相对于 HTML5网站，小程序可以获得较多的系统权限，在安卓手机上还可以直接添加到手机桌面，看上去跟原生APP一样，用户的体验感自然更胜一筹。

综上所述，利用微信小程序能快速有效的搭建在线编程学习平台，并且具有使用便捷、易于推广普及、用户体验好等突出优势，能有效地解决当前传统网络学习平台依赖 PC存在的不足，促进教育资源的共享，顺应知识碎片化传播的趋势，同时为多元化的教学模式提供平台和支持。

3 设计开发高校在线编程学习平台

本系统主要基于学习者、课程老师和系统管理员三种角色的功能模块进行设计。

3.1 学习者角色功能模块分析

在线留言：包含主题讨论、在线咨询两个模块。学习者可以该模块留言交流、也可以在线向教师咨询。

在线测试：包含在线测试、查看结果两个模块。方便学习者自我检测。

3.2 课程教师角色功能模块分析

进入课程：该模块通过系统管理员分配对应的课程权限，一位老师可以同时管理多门课程。

个人空间：包含个人信息、我的收藏、我的提问、我的评论和我的笔记五个小功能模块。

课程学习：在该模块教师可以发布课程公告、对课程课件、课程微课、拓展资源分别进行上传、编辑和管理。同时对学习者的评论进行管理。

3.3 系统管理员角色功能模块分析

权限管理：通过该模块，可以给课程老师分配管理课程的权限，一门课程可以由多名老师进行管理，一位老师也可以同时管理多门课程。

课程资源管理：包括课程公告管理、课程课件管理、课程微课管理、拓展资源管理模块，管理员可以对全部课程的课程资源进行管理，同时对学习者的评论进行管理。

4 基于微信小程序开发在线编程学习平台的步骤与关键技术

微信小程序的开发框架基于 MINA 框架，开发人员可以从手机客户端app开发快速切换到小程序开发，下面简单扼要的阐述基于微信小程序开发在线编程学习平台的顺序和关键技术。

4.1 搭建微信小程序开发环境

微信小程序开发不能直接使用服务号或订阅号的 AppID，需要登录微信已经提供的小程序开发账号。因此，我们需要先要在微信公众平台官网注册账号，获取唯一标的微信小程序AppID，然后在官网下载专用的微信开发者工具，并进行安装。安装完成后，第一次启动时会出现一个二维码，需要使用微信扫描该二维码才可登录开发者工具。

4.2 创建微信小程序项目

我们通过登录微信开发者工具，来实现在线编程学习平台小程序项目的创建和代码编写，具体步骤如下。

4.2.1登录微信开发者工具，选择创建项目，输入获取的 AppID，选择文件代码的存储目录，然后进入开发者工具界面。

4.2.2进入开发者工具界面后，默认是选中“调试”面板，在该面板中，左边是页面效果的预览窗口，右边是类似于 Chrome的开发者的工具。点击最左侧的导航，在“编辑”里可以查看和编辑我们的代码，在“项目”里可以发送到手机里预览实际效果。

4.3 创建微信小程序页面

4.3.1 微信小程序总体结构。

微信小程序启动时会生成一个APP应用实例，这个APP实例会运行多个page，每个page之间又会有一些关联。多个page都需要用到的一些功能则封装到公共方法中，例如util.js，calc.js等等。

4.3.2微信小程序中每增加/减少页面，其对应的“路径+页面名”信息都需要写在app.json的pages数组中，数组的第一项代表小程序的初始页。每一个小程序页面是由同路径下同名的四个不同后缀文件的组成AngularJS的模型绑定将具体的数据绑定到具体的位置。wxss则和 app.wxss一样，都是css样式表，在 logs 的页面结构中，logs页面使用控制标签来组织代码，在上使用wx：for-items绑定logs 数据，并将 logs 数据循环展开节点。

5 结论与展望

以智能手机为代表的便携式移动终端设计的普及使用，基于在线编程学习平台的移动学习必将成为今后重要的学习方式。用户体验好等出图优势，易于推广普及。而微信小程序拥有比原生APP 成本更低、速度更快的开发优势，符合下一代移动互联网产业发展的“微、小、轻”趋势，将会拥有更为广泛的市场前景。