基于微信小程序的《易起学》平台的设计与实现

2021-03-13苏海阔孙强

现代信息科技 2021年15期

苏海阔孙强

摘要：随着5G信息时代的到来，“互联网+教育”也顺势而升，特别是在前疫情时期，在线教育平台如雨后春笋般脱颖而出，这就要求开发者对于移动学习平台的设计要满足用户随时随地的、便捷的学习需求。本研究为基于微信小程序设计的《易起学》平台，主要功能为在线课程学习、音频课程、讨论社区、兴趣课程等。经过系统调试与检测，用户反馈与体验良好，具有一定的社会服务价值，能够达到教育信息化的目标，可以广泛进行推广与使用。

关键词：移动学习平台;微信小程序;教育信息化

中图分类号：TP311 文献标识码：A 文章编号：2096-4706（2021）16-0148-05

Abstract： With the advent of the 5G information age， “Internet + education” has also risen， especially during the pre-epidemic period， online education platforms have sprung up like mushrooms after a rain， which requires developers to design mobile learning platforms to satisfy users convenient learning needs anytime， anywhere. This research is based on the “Yiqixue” platform designed by WeChat applet. The main functions are online course learning， audio courses， discussion communities， interest courses， etc. After system debugging and testing， user feedback and experience are good， it has certain social service value， can achieve the goal of education informatization， and can be widely promoted and used.

Keywords： mobile learning platform; WeChat applet; education informatization

0 引言

近些年，随着微信小程序开发技术的逐步成熟，利用微信开发者工具开发的微信小程序已经应用到社会的各个领域中，以其强大的技术优势，即无须安装下载、以微信为载体易于传播，本着“只需跑一次”的理念即可快速体验。“互联网+教育”时代已经到来，越来越多的在线学习平台也乘势而升，同时也带来了众多问题。如何让教育理念与技术有机融合，是当下教育工作者和技术人员值得思考的问题。而微信小程序的出现为教育领域的研究与应用提供了新思路。从微信的附属功能出发，公众号的内容传播属性较强，对于微信内嵌的小程序而言，它的工具性与交互性则更胜一筹[1]。为此，本文设计并实现基于微信小程序《易起学》平台，它可以满足在线学习的多种需求，例如基础课程、推荐“金课”、音频课程等，达到以学生为主体，提高学生主动学习的能力并激发学习兴趣的目的。

1 微信小程序概述

1.1 微信小程序的优势

微信小程序（WeChatmini-APPs），是腾讯公司于 2017年1月正式推出的一种无须下载安装、随用随走的移动应用，用户可以通过微信提供的“扫一扫”或“搜索小程序”即可查找并体验小程序，具有开发成本较低、社交分享功能强大、体验感强、使用便捷等优势[2]。经过3年多的不断创新与发展，微信小程序已经实现了相对稳定与完整的开发环境。截至目前微信活跃用户数量为6亿～7亿左右，相對于QQ等社交平台，微信以其庞大的用户数据奠定了它在社交领域不可撼动的地位。其次，微信小程序市场规模已经达1.2万亿元，其覆盖的领域也超过200个细分行业[3]。微信小程序采用WXSS+WXML+JavaScript技术开发结合的方式进行客户端的设计与实现，与传统的HTML5 网站设计主要的优点体现在：

（1）可以获得更多的系统权限，例如网络通信状态、数据缓存能力等，小程序可以与系统级别的权限进行无缝连接，具有良好的流畅性。

（2）标记语言较为灵活，除了官方提供的基础标签库外，也可以兼容HTML5的标签，不过需要自行设定display。

（3）支持多种样式技术，WXSS目前即支持CSS2还可以支持CSS3，而且可以设置全局样式和局部样式[3，4]。

（4）运行环境的兼容性，小程序是类似于IOS系统，基于微信生态下的应用环境，具有微信制定的Web标准，运行环境并非是完整的浏览器[3]。

1.2 微信小程序与其他平台应用分析

小程序的开发只需要开发人员掌握JavaScript、CSS以及API接口的调用等技术，就能够完成应用平台的开发。相比较于HTML5网站、APP平台的开发，小程序可以借助开发框架提供的云开发技术或第三方云数据库平台进行开发，开发成本低、难度小[5]。通过研究目前主要的移动端开发技术，对比分析了APP、HTML5和微信小程序的特点。由表1可以看出，微信小程序不论是在应用和性能方面都具有明显的优势。加之微信具有广泛的群众基础，基于微信小程序的《易起学》平台也能够被大众所接受和使用。

2 需求分析

自新冠肺炎疫情暴发以来，在线教育平台的市场迅猛发展，同时，也为响应国家的号召，实现疫情期间“停课不停学”，就导致众多企业和机构都投身于在线教育领域，众多企业和教育机构在资金投入和平台维护等方面都面临着困难，对于在线教育是舍是留也存在争议。通过对市场调研分析发现，在线教育平台多数是以APP的形式存在，使用这种形态无疑给教育机构带来巨大的开发成本以及技术难题[6]。微信小程序的出现可以有效解决此种问题，基于微信小程序的《易起学》平台无须安装，只需扫码和搜索既可以使用，同时这也赋予了小程序持久的生命周期和市场活力[1]。目前，小程序也开通了直播功能，教育者可以通过平台实现直播、录播视频与学生进行互动，为教师教学提供了新的教学平台。本平台鉴于学生自主学习能力不强、学习兴趣不浓、学习资源不足、课余时间难以掌控以及教师教学形式单一等问题，设计本平台旨在有效帮助老师和学生打破传统的学习方式，实现由“面对面”的形式转变为“端对端”的学习形式，激发学生学习兴趣，丰富课堂表现形式以及灵活利用课余时间进行学习。

3 《易起学》平台功能设计

《易起学》平台通过对用户的需求进行分析来实现功能设计，小程序开发设计秉承着三大原则，即功能方面比原生APP更单一;设计方面比原生APP更简洁;场景使用方面比原生APP更明确[5]。在开发过程中尽可能减少不必要的功能设计，基于平台定位设计各模块：

（1）基础课程模块：包括直播课程、基础课程、兴趣课程、更多课程等功能。其中直播课程教师可以在线直播教学;基础课程提供给学生优质的课程资源;兴趣课程可以根据学生的兴趣推荐相关课程;同时还包括众多品类的课程，供用户学习。

（2）推荐课程：主要推荐给用户实时热门课程，让用户体验到与时俱进的课程学习。

（3）音频课程：用户可以利用碎片化时间通过音频的形式学习英语发音、单词等，提高英语水平。

（4）精选课程：提供给学生一线教师的精品“金课”，来提高学生学习质量。

（5）优惠活动：后台管理中可以下发优惠券提供给用户，提升用户的活跃度。

（6）讨论社区：用户可以在讨论区探讨学习，分享自己的学习经验。

（7）个人中心：管理个人账户信息。

（8）资讯管理：管理员可以对客户端请求的资讯信息进行答复、删除等管理。

（9）课程管理：管理员可以对课程进行上架、下架、置顶推荐等管理。

（10）讨论区管理：管理员可以讨论区的圈组话题进行审核、删除、添加、查询等操作。

（11）社区管理：管理员可以对社区信息进行维护，包括审核、查询等操作。易起学平台客户端和后台数据库如图1所示。

4 平台开发框架设计

本平台主要由MAIN框架开发，平台开发框架设计如图2所示。主要分为视图层（View）、逻辑层（AppService）以及系统层（Native）。视图层包括标签语言WXML以及组件样式WXSS组成，当我们对View层进行DOM操作和交互事件的执行操作后，会通过WeixinJSBridge将数据传递到Native系统层。Native系统层（微信能力、网络请求、权限系统以及离线缓存等强大的系统支持能力）决定是否要用Native来进行处理，再由Native把交互事件转发给逻辑层，逻辑层进行用户的逻辑代码处理。逻辑层处理完毕后会将处理数据通过WeixinJSBridge直接返回给View层，最后由View层来渲染和更新视图。其中视图层中的页面标签语言WXML和组件样式WXSS在渲染时会被系统框架解析为不同端的渲染文件，能够保证一套代码能在多个端运行，从而更加接近原生APP[7，8]。

5 《易起学》平台客户端功能模块实现

本平台分为六大功能模块，如图3所示，分别包括搜索课程模块、基础功能模块、推荐课程模块、底部导航、音频课程模块以及精选课程模块。客户端界面设计要求简洁大方、排版有序并且美观实用，后台数据库管理系统也要求字段合理、安全性能较高[9]。其中首页中基础功能模块包括直播课程、基础课程、兴趣课程、更多课程和客服咨询，底部导航包括首页、讨论、优惠和我的功能导航。

5.1 搜索课程模块

用户可以在首页的搜索框中搜索感兴趣的课程，可以针对课程名称、课程价格、课程时间以及分类下的哲学类、学科教育类、信息技术类、思想政治类进行搜索。其中课程价格和时间都是按照升序和降序进行查询的。在WXML中设置search标签，在input标签中传值，利用WXSS对组件样式做适当调整，在Js文件中进行条件判断与查询遍历，最终反馈到View层。用户可以点击所要查询的课程进行浏览学习。

5.2 基础课程模块

点击首页导航栏中的“直播课程”，在直播课程界面可以观看最新直播课程，用户可以在评论区进行探讨。利用微信提供的直播功能插件接口来接入平台，使教师能够与学生开展在线教学活动;进入基础课程界面，在此界面中可以点击轮播页面行咨询浏览，其实现原理是通过swiper滑动视图容器绑定图片并响应事件监听来实现。兴趣课程以及更多课程前端都是在View层进行UI设计，通过后台云数据库来实现课程资源的上传与更新。基础课程模块界面如图4所示。

5.3 推荐课程模块与底部导航

在首页中用户可以学习推荐课程视频，平台会筛选出高质量的课程推送给用户。实现此功能需要在WXML中设置<Video>标签，并适配好尺寸，可以直接在src属性中引入视频连接，也可在后台数据库中直接上传视频。在首页底部的导航栏中点击讨论，进入该界面，其中最新资讯新闻可供浏览，在社区讨论中家长、学生都可以参与话题的讨论，可以选择图文或者文章、链接的方式发布话题讨论。讨论社区界面如图5所示。点击我的，进入个人中心界面，用户可以进行登录注册个人信息进行使用，查看个人信息，包括我的订单、工具等。

5.4 精选课程与音频课程模块

用户可以在首页精选课程模块中选择所要学习的课程，平台会为用户推荐一线教師的精品课程，让学生高质量的学习，满足学生学习需求。实现此功能需要在WXML中设置Scroll-view视图兼容器，并在WXSS中设置height，通过Js文件对触发事件进行转发，最后通过业务逻辑层的处理将数据反馈给View视图层。在首页的音频课程模块中，用户可以点击音频播放课程，点击更多，进入音频课程的主界面，用户可以选择年级和版本点击确定进行英语听力练习。音频课程选择界面如图6所示。在WXML中设置视图层的组件，包括checkbox-group和Button，check-group选中项发生改变时触发change事件，Button属性中form-type表单组件类型，点击分别会触发form组件的submit/reset事件，通过绑定Button将多项选择器的事件传递给系统层，由Native判断是否转发到逻辑层Service进行处理，再由业务逻辑层返回给View层，最终由View进行渲染。

6 《易起学》平台后台数据系统的实现

《易起学》平台后台数据库主要采用云数据库进行开发，在App.js连接运数据库时需要云初始化数据库[10]，利用wx.cloud.init（{}）方法初始化，再给数据库添加信息：loadMore：function（）{const db=wx.cloud.database（）;const cont=db.collection（'yiqixue'）;db.collection（'yiqixue'）.get（{success（res）{console.log（res.data）;}，之后再在WXML文件中设置按钮事件代码。后台管理员可以对前台资讯的数据进行常规维护，更好地服务用户，可以进行编辑、评论、置顶等操作;课程管理模块主要是由管理员通过后台数据库维护，实现课程分类，能够进行添加、修改、删除、查询的操作;社区管理模块主要是由管理员通过后台数据库对社区圈数据组进维护，对圈组话题进行分类管理，管理员也可以对前台用户的讨论进行管治、删除指定用户的发言、是否显示该用户的发言信息等操作。

7 结论

本平台从基础教育以及学生学习的实际需求出发，能够满足学生个性化学习需求。基于微信小程序的《易起学》平台可以实现教师直播、课程资源共享、师生互动讨论、家校合作等共同促进学生学习的平台，本款小程序涵盖课程量多，能够分门别类地进行选择课程学习，方便快捷的获取学习资源，激发学生学习兴趣，打破传统教学模式，让学生体验学习的快乐并提高自主学习能力。基于微信小程序的《易起学》平台已经通过了测试阶段，并在中小学基础教育阶段投入使用，并受到广大师生的好评，现总结本小程序的优点：

（1）轻应用，跨平台性良好。

（2）界面简洁大方，功能齐全，满足用户个性化学习需求。

（3）随用随走，不占内存。

另外，本平台也存在着一些不足，例如视频上传的格式问题，导致客户端接收不到以及播放视频问题。在线直播功能还存在着网络延迟的问题等。在后续研究中，会对平台的版本进一步升级以及功能的迭代测试，尽可能满足用户的使用需求。

参考文献：

[1] 马庆祥.微信小程序在教育领域的应用探析 [J].计算机产品与流通，2019（8）：227.

[2] 尹明章，张莉，周天旻，等.基于微信小程序的高校O2O图书共享平台开发与应用 [J].图书馆理论与实践，2019（3）：94-97.

[3] 陈世宇，邓秋雪，陈正铭，等.试析微信小程序前端界面与网站前端界面实现技术的异同 [J].电脑编程技巧与维护，2017（20）：5-8+13.

[4] 易伟.微信小程序快速开发 [M].北京：人民邮电出版社，2017：28-29.

[5] 栗琳，温薇，孙朝阳.基于微信小程序实验室资源开放平台探索 [J].实验室研究与探索，2021，40（2）：248-251+265.

[6] 阎光才.信息技术革命与教育教学变革：反思与展望 [J].华东师范大学学报（教育科学版），2021，39（7）：1-15.

[7] 徐晓丹，柳卸林.北京市建设国家实验室的基础与对策研究 [J].科技进步与对策，2019，36（19）：41-49.