【《基于微信小程序的微教育平台设计与实现》8200字（论文）】

基于微信小程序的微教育平台设计与实现摘要近年来，随着移动互联网的迅猛发展和手机的高度遍及。因而，人们对学习方法有了新的索求、认识和需求。传统的在线学习平台，严重依附于计算机设备，人们往往要被限制地点，限制空间学习。传统的在线学习平台在获取成本、使用难度、方便性和普及性等方面都大大增加了学习成本。如果想便利于学习者就得针对传统在线学习平台使用上的不便利、资源利用率低等问题进行解决，此论文将介绍一款新的在线学习平台以便于学习者进行学习。微教育平台程序主要包括首页、我的课程、个人中心、学习时长、讲师服务、优惠券等多个重要的功能组成的。本程序采用当前主流的前端技术作为微程序技术，后端系统采用php脚本语言，后台管理系统采用vue+elementui技术开发后端。利用mysql数据库来存储微型教育平台程序的数据和信息。还利用腾讯视频sdk完成了课程视频的回放。完成的小程序能初步满足学习者的需要，使学习者能够更有效地学习，降低学习成本。【关键词】微教育，微信小程序，vue技术，PHP目录1绪论 51.1课题背景 51.1.1系统开发背景 51.1.2技术背景 51.3课题的目的和意义 62开发技术和工具 72.1微信小程序平台 73.1可行性分析 93.2用户体验的需求分析 93.3系统性能分析 103.4系统流程分析 104系统的设计 114.1系统开发流程设计 114.2系统结构设计 124.3系统数据库设计 124.3.1数据库表设计 125系统实现 135.1后台管理员的功能模块的实现 135.1.1后台管理员登录界面 135.1.2添加课程界面 155.1.3添加讲师界面 175.1.4添加视频界面 185.1.5评价管理界面 185.2普通用户功能模块的实现 195.2.1微教育平台首页界面 195.2.2课程展示界面 205.2.3订单展示界面 235.2.4个人中心展示界面 246系统测试 256.1测试要求 256.2测试分析 256.3测试过程 266.4测试结果 26参考文献 271绪论1.1课题背景1.1.1系统开发背景传统的在线学习平台将学习者限制于计算机面前，人们无法摆脱物理学习环境的束缚。随着移动互联网技术的飞速发展和人们学习思维方式的变化，以及手机的高度普及，移动学习技术的出现、发展和兴起为社会、技术和硬件提供了基础。学习者无法满足于传统的在线学习平台提供的移动学习服务。用户在使用手机、iPad等移动设备访问在线学习平台的资源时，将耗费很多的精力来解决显示效果不佳的问题。对于学生来说，没有良好的感官体验，不能激发学习兴趣。这无疑增加了学生的学习的本钱。现在市面上的移动学习平台主要是由商业公司开发的，即使是学校提供的平台，也大多是外包公司进行开发，对用户的正确需求不了解，后期出现问题对系统进行修改也有很大的困难。同时，用户在进行移动学习时面临着需要安装很多的学习应用软件并且要进行繁杂琐碎的注册登录等操作问题，这让用户在使用应用软件学习时有着很多的不便。教师在进行教学时也要分出一部分的精力来对软件进行管理。对于老师来说，操作上比较复杂，要花费很多的精力在学习使用在线学习平台，使用成本过高。所以，出于便利与老师的目的来说，在移动学习平台开发课程管理的功能时，要尽量的简洁明了，方便于老师的操作，减少老师的使用成本。所以开发一款购置成本低、使用难度小、便利性高以及普及度高的移动学习平台是很有必要的。1.1.2技术背景 该程序前端开发主要采用微信小程序技术。自2011年腾讯正式推出微信，到目前为止微信在众多的社交软件中已经占据着领先地位，现也拥有着接近10亿的用户基数。2016年时微信团队开发出微信小程序功能，这一功能的推出可以为很多的企业和商家提供客流量以及更多的曝光机会。运营成本也相对较低。因为微信越来越成为众多人日常生活中的一部分，每天都有庞大的用户群在使用微信小程序，再加上人们乐于分享有趣新鲜事物给身边的人，使小程序的用户留存率达到很高。为了使微教育平台能够在短时间内获得大量的用户以及流量，所以本程序也采用微信小程序的形式开发。与其他的应用软件相比较，微信小程序不需要安装应用程序软件，不需要占用很多的内存空间。你不需要用的时候就不用卸载了。这极大地方便了用户的使用。同时，微信小程序的开发难度也低于应用程序的开发，所以在实现几乎相同的功能的情况下，必然会选择性价比更高的微信小程序来进行开发微教育平台。 本小程序的数据和信息是使用MySQL数据库存储的。Mysql是当前主流的关联式资料库管理系统。所有人都可以从官网上下载该软件，是一个真正的多用户多线程SQL数据库服务器，而且MySQL所占用空间较小，更是开放源代码且没有版权的限制，自主性强，并且也容易维护，使用成本大大降低。相比之下，MySQL在oracle数据库中使用起来很是简单。能够快速、有效和安全地处理大量数据。它还支持多种操作系统和开发语言。MySQL数据库是目前运行速度最快的SQL语言数据库。它的历史十分悠久，社区和用户都非常活跃，遇到问题都可以很快得到帮助。本程序使用VUE+ElementUI开发管理系统。Vue是一组用于构建用户界面的渐进框架。Vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和Dom，这样大大加快了访问速度和提升用户使用体验。它还为第三方UI库节省了大量的开发时间。Vue还具有轻量级框架、易学、双向数据绑定、组件化、高速等优点。Vue会自动对页面中某一些数据的变化而做出同步的响应。通过MVVM概念实现双向数据绑定，使开发人员有更多时间考虑业务逻辑。而且Vue.js是一个简单的API，提供了高效的数据绑定和灵活的组件系统，极大地方便了开发人员。1.3课题的目的和意义随着互联网技术的发展和智能手机的普及，极大地改变了人们的生活、学习和工作方式。“网络在线教育”已成为我国教育改革的新潮流。目前互联网及移动互联网已经进入学校、家庭，成为学生学习中重要的教辅工具之一。加上今年年初因为疫情的影响，学生无法上学，只能在家中通过一些网络学习平台上网课的方式来学习。2012年，美国顶尖大学开始建立在线学习平台，数据显示，美国的高效学生2012年在线注册率就已经达到30%左右。与此同时，美国学术界对网络教育的态度也在发生变化。在中国，随着互联网技术的发展和手机的遍及，网络教育越来越被人们所接受。在线教育改变了教育模式，实现了无纸化学习、开放是分享学习、交互是个性学习，加快了信息化教育的步伐。老师上课，学生可以反复观看学习，可以合理安排自己的时间。走出家门学习是可能的，不会因为个人原因而延误学习过程。在线学习，学生可以选择自己喜欢的课程，老师。提高和激发学生的学习兴趣。在线学习，也可以支持异地考试，比如这次疫情期间，大多数学生都是通过在线考试，进行期末检测的。在线教育还可提供用户随时随地充电学习，丰富自己的学识，众生学习，为打造“学习型社会”贡献一份力量。但是，传统的在线学习，无法慢人们随时随地学习的需求，传统在线教育使人们严重依赖计算机设备。并且在购置成本，使用难度，便利性和普及性都大大增加了学习者的学习成本。所以使用移动设备学习可以很大程度上满足用户的需求。而使用微信小程序可以更多地节省用户的使用成本，有利于用户的操作。微信作为移动设备使用频率最多的社交软件之一，拥有大量的用户，截止2019年9月，微信的月活跃账户数高达11亿。2017年，微信推出了一款嵌入在该应用中的应用——微信小程序。现在，在11亿用户中，很大一部分的受众是大学生，这为微信小程序在教育教学中的应用奠定了良好的基础。以在线课堂管理平台“muclassroom”为例，网络版提供在线阅卷、成绩总结分析、在线讨论、课件共享等服务。而移动端可使用的功能就非常少了，我自己使用的功能只有签到这一项功能，并且存在操作不方便的问题。同时，随身带着计算机对教师和学生来讲非常不方便，因此，移动在线学习平台的应用刻不容缓。2开发技术和工具2.1微信小程序平台 微信推出了基于微信APP的轻量级应用程序——微信小程序，开发微信小程序需要使用官方提供的微信开发者工具，具体如图2-1所示。随着微信庞大的用户群，合理的设计，低廉的使用成本以及对开发人员友好的影响，微信小程序迅速获得了广泛的关注。微信小程序开发过程和技术正在变得越来越成熟和稳定，许多大型应用程序也开发了相应的微信小程序版本，从而证明微信小程序的可靠性。微信小程序的使用场景包括在线教育，可用于教育领域，为用户节省了安装大型应用软件的麻烦，并且同时为学习者提供了新的学习途径的选择。图2-1微信开发者工具截图2.2JS技术JavaScript最初是由Netscape的BrendanEich设计的，他最初给自己的脚本语言命名为LiveScript，后来在Netscape和Sun一起工作后把名字改成了JavaScript。JavaScript最初是为java灵感而设计的。其中一个目的就是“看起来像java”所以它的语法类似于java。一些名称和命名约定也借用了java，但JavaScript的主要设计原则源自self和scheme。JavaScript和java名称的相似之处，是Netscape和Sun之间以市场营销为导向的协议的结果。同时，Microsoft还引入了JScript来面对JavaScript的脚本语言。2.3PHP技术 是一个很好的小型网页开发语言。通常，开发一个后台管理系统。人们使用的编程语言主要是c++，java和php。前两者的优势在于开发大型复杂的网站。但是这个项目只需要一个小的购物中心管理系统后端，因此在这里使用PHP更合适。因为PHP比其他PHP更有效，所以它与MYSQL数据库具有更好的兼容性。2.4MYSQL数据库技术数据库是存储数据的仓库。有了数据库，我们可以很容易地管理和存储数据。在数据库的选择上，根据数据库使用成本，数据库类型，数据库兼容性等方面的综合考虑，我们最终采用了MYSQL数据库。由于MYSQL数据库是免费软件，因此任何人都可以在官方网站上下载和使用它，并且可以将其商业使用。同时，MySQL是以C/S结构实现的。它由一个服务器和一些客户端组成。目前的运行速度是最快的数据库之一。MySQL数据库软件体积小，易于安装和使用，因此维护成本低。结合这些优点，MySQL数据库被用于项目的开发。3系统分析3.1可行性分析（1）可靠性可靠性是系统运行的首要要求。稳定可靠的系统是企业发展的基础和保证。如果系统不能保证许多用户在使用过程中功能的可靠使用和操作，则学习者将对平台产生不信任感。平台的不稳定性引起的这种对学习者的不信任将严重影响学习效果。因此，在系统的设计、开发和测试中应遵循统一的原则。在平台设计阶段，应该考虑特殊情况，例如过度访问。在平台开发过程中，应该尽可能避免代码的重复。平台的所有功能应在测试过程中受到影响。必须进行测试，以确保平台的稳定性和可靠性。（2）经济可行性在这个全民学习的时代，教育便成为了民生中的重中之重。据调查显示，中国家庭子女教育的支出比重占家庭总收入的近三分之一。而在校教育平台不会限制年龄、身份、地位、地域、专业。只要想学习就可以获得平等的学习机会。而且，线下教育需要花费大量的金钱去抢名额还需要家长大量的时间去接送孩子。在线教育就可以大大节省这样的成本。因此，在经济可行性上本程序是可以实现的。3.2用户体验的需求分析新的学习概念和学习方法，例如移动学习，非正式学习，终身学习和零散学习已逐渐流行，并被人们普遍认可和接受。根据对大学生移动学习情况的调查，大学生移动学习共有54种。27％的大学生听说过移动学习的概念，但对移动学习概念的总体理解中，有60％的人占了总数的60％。尽管如此，还是有些人不熟悉移动学习。我了解有些学生确实有移动学习经验，但他们不知道这种学习方法是移动学习。大多数大学生认为移动学习是一种新型的学习方式，它对学习效率、学习兴趣、学习动机和自主学习能力都有较大的影响。新学习需要技术进步，硬件普及以及学习概念的更新。催生了新的学习需求。间歇性学习:自发移动学习尚未成为一种习惯性学习行为。在大多数情况下，它会在需要时被激活，并成为一种间歇性的学习行为。非正式学习：教室中很少有移动学习行为，大多数是由学生在课后独立学习时进行的。这种课后的自主学习通常是偶然的和零星的，并且是学习者的主动性。启蒙规范学习是一种典型的非正式学习。移动学习不会持续很长时间，大多数时间都保持在30分钟之内，这与传统的45分钟教室存在一定差距。因此，在设计课程时，有必要在30分钟内细分知识点并控制课程内容。移动学习中更重要的网络技术环境正在成熟。广泛的无线网络覆盖范围及智能流动装置的高渗透率。技术环境的成熟为移动学习的发展提供了物质条件和技术支持。3.3系统性能分析 本系统性能的分析主要包括稳定性、便捷性、兼容性、可拓展性，具体内容如下：（1）系统的稳定性：本微教育平台小程序的数据库逻辑合理清晰，后端数据与前端之间的交互流畅快速，没有程序跳出，程序卡塞或程序产生运行时异常。（2）系统的便捷性：由于这是一个微信小程序，因此在便捷性方面具备天然优势，它可以即用即走，无需注册、无需安装和卸载。与应用软件相比，它更方便。(3)系统兼容性:系统可以同时在android和iOS设备上运行，也可以在不同规格的设备上运行。因此，微型教育平台的小程序具有良好的兼容性，可以应用于不同的移动设备上。3.4系统流程分析系统的流程分为用户操作流程和管理员操作流程两部分。（1）用户操作流程用户在这个小程序中可以使用的操作主要有打开小程序流程、订单流程、订单管理流程等。这里展示用户打开本小程序的流程，具体如图3-1所示。3.4系统流程分析 本系统的流程分为两大部分，用户操作流程部分和管理员操作流程部分。 （1）用户操作流程 用户在本小程序中可以使用的操作主要有打开小程序流程、下单流程、订单管理流程等。这里展示用户打开本小程序的流程，具体如图3-1所示。图3-1 （2）管理员操作流程 管理员的操作主要分为：管理员登陆后台管理系统、管理员处理数据等，这里展示管理员登陆后台管理系统的操作流程。具体流程如图3-2所示图3-24系统的设计4.1系统开发流程设计 需求分析是一个开发系统之前必须要经历的过程，根据分析的结果，拟定系统功能，在基于此，才能开发系统原型，在调查需求的过程中，这也是一个发现隐患和不合理地方的过程，如果直接进行开发，遇到问题则会对整个开发进度造成很大的影响。大致流程如下图4-1所示。图4-14.2系统结构设计 该微教育平台小程序分为前端客户端和后端客户端，客户端主要包括查看课程，观看课程，个人中心等模块，后端管理员模块分为课程管理、讲师管理、评价管理等模块。4.3系统数据库设计 系统最底层的操作仍然对数据的操作，因此数据库的设计结构就显得十分重要，良好的数据结构可以让系统的运行效率更高，同时也可以在辅助开发中起到很好的作用，如此，基于稳定的数据结构进行开发，将会大大降低后续的问题与隐患。4.3.1数据库表设计 该微教育平台项目的数据库主要分为用户信息表、服务信息表、订单信息表、评论信息表等。主要数据库表如下图所示：表4-1学生订单表字段名称字段意义字段类型字段长度是否主键能否为空StuId订单编号int112是是StuName学生姓名varchar255否是StuOrder学生订单varchar255否是StuComments订单内容varchar255否是StuPrice订单价格varchar255否是表4-2讲师信息表字段名称字段意义字段类型字段长度是否主键能否为空TeacherId讲师编号int50是否TeacherName讲师名称varchar255否是TeacherTime添加时间varchar100否是TeacherPrice课程价格boolean1否否TeacherStatus显示状态Boolean1否否表4-3课程信息表字段名称字段意义字段类型字段长度是否主键能否为空ClassId课程编号int50是否ClassName课程名称varchar255否是ClassTime添加时间varchar100否是ClassStatus课程状态boolean1否否表4-4评论信息表字段名称字段意义字段类型字段长度是否主键能否为空CommentsId评论编号int50是否Commenter创建者varchar255否是CommentsAbout评论内容varchar255否是CommentsTime发布时间varchar100否是CommentsStatus评论状态boolean1否否5系统实现5.1后台管理员的功能模块的实现5.1.1后台管理员登录界面登录界面是系统的门户，因此更加需要注意安全性能，通常，一般浏览器都会默认缓存输入框的文本，并在此处设置清除缓存的时间，以免防止密码的意外泄漏，从而保证系统的安全性，同时每次登录操作行为都会保存在后台日志中，可以进行查看，以便回顾异常操作。具体界面如图5-1-1所示。图5-1-1登录核心代码如下：$record=user_single($member); $failed=pdo_get('users_failed_login',array('username'=>trim($_GPC['username']))); if(!empty($_W['setting']['copyright']['oauth_bind'])){ if($record['register_type']==USER_REGISTER_TYPE_QQ||$record['register_type']==USER_REGISTER_TYPE_WECHAT){ if(!$record['is_bind']&&empty($_W['isfounder'])){ message('当前账号错误！',url('user/third-bind/bind_oauth',array('uid'=>$record['uid'],'type'=>$record['type']))); exit; $cookie['uid']=$record['uid']; $cookie['lastvisit']=$record['lastvisit']; $cookie['lastip']=$record['lastip']; $cookie['hash']=md5($record['password'].$record['salt']); $session=authcode(json_encode($cookie),'encode'); isetcookie('__session',$session,!empty($_GPC['rember'])?7*86400:0,true); if(!empty($failed)){ pdo_delete('users_failed_login',array('id'=>$failed['id'])); } cache_build_frame_menu(); itoast("欢迎回来，{$record['username']}",$forward,'success'); }else{ if(empty($failed)){ pdo_insert('users_failed_login',array('ip'=>CLIENT_IP,'username'=>trim($_GPC['username']),'count'=>'1','lastupdate'=>TIMESTAMP)); }else{ pdo_update('users_failed_login',array('count'=>$failed['count']+1,'lastupdate'=>TIMESTAMP),array('id'=>$failed['id'])); } itoast('登录失败，请检查您输入的账号和密码','',''); }});5.1.2添加课程界面 该模块主要功能是管理员新建课程，,管理员可以添加课程的名称，选择分类，新建章节，选择讲师，为课程设置价格，选择对应的视频资源，并设置是否可以试听。具体如图5-1-2所示图5-1-2课程上传时间设置相关代码如下：if(!empty($config['starttime'])&&!empty($config['endtime'])){ if($config['starttime']<$config['endtime']){ //时间跨度为一天 $today=date('Y-m-d'); $starttime=strtotime($today.$config['starttime']); $endtime=strtotime($today.$config['endtime']); if(time()<$starttime||time()>$endtime){ message("上传时间为每天{$config['starttime']}~{$config['endtime']}"); } }else{ //时间跨度为两天 $now=date('H:i'); if($now>$config['starttime']){ $today=date('Y-m-d'); $starttime=strtotime($today.$config['starttime']); $endtime=strtotime($today.$config['endtime'])+86400; }elseif($now<$config['starttime']){ $today=date('Y-m-d'); $starttime=strtotime($today.$config['starttime'])-86400; $endtime=strtotime($today.$config['endtime']); } if(time()<$starttime||time()>$endtime){ message("上传时间为每天{$config['starttime']}~第二天{$config['endtime']}"); } } }5.1.3添加讲师界面 该模块主要功能是添加讲师信息，可以设置讲师的姓名，可以拿到的分成，前台显示的手机号码、QQ等信息。具体内容如图5-1-3所示。图5-1-35.1.4添加视频界面 该功能模块主要是管理员添加视频资源，可以选择多种服务器进行上传，上传成功后，可以在课程设置里为视频资源匹配对应的课程章节。具体的内容如图5-1-4所示。图5-1-45.1.5评价管理界面该模块主要功能是是管理员对用户留言进行处理，可以查看用户发布的留言内容，以及发布留言的用户id、手机号等，同时对留言进行操作，可以选择通过或不通过，选择结果将决定是否展示在用户端，并且管理员可以对留言进行回复操作。具体内容如图5-1-5所示。图5-1-55.2普通用户功能模块的实现5.2.1微教育平台首页界面 首页界面展示本平台的一些基本信息，主要包括了服务项目，公告框、轮播图等信息。具体内容如图5-2-1所示。图5-2-15.2.2课程展示界面本界面主要展示的是平台所有上线的课程，可根据分类来进行筛选，点击可查看具体章节，如果有试听章节，还可以直接观看，否则需要付费进行解锁课程。具体内容如图5-2-2所示。图5-2-2获取分类列表的前端核心代码如下：load_shareinfo:function(){vart=this;a.util.request({url:"entry/wxapp/shareinfo",data:{wxapp_uniacid:a.siteInfo.uniacid,wxapp_version:a.siteInfo.version},success:function(a){if(t.setData({setting:a.data.data.setting,shareinfo:a.data.data.shareinfo,avatar:a.data.data.avatar}),wx.setNavigationBarColor({frontColor:a.data.data.navigationBar.navigationBarTextStyle,backgroundColor:a.data.data.navigationBar.navigationBarBackgroundColor,animation:{duration:400,timingFunc:"easeIn"}}),a.data.data.sharewxapp)wx.redirectTo({url:"../newlesson/index"});else{if(wx.getStorageSync("userInfo"))returnt.setData({show_app:!0}),!1;t.setData({show_btn:!0});}wx.setNavigationBarTitle({title:"微信授权"});}});5.2.3订单展示界面 本界面展示的是订单的详细信息，包括订单号，下单日期，具体的服务项目内容等，还可以进行联系商家，取消订单等操作。具体的内容如下图5-2-3所示。图5-2-35.2.4个人中心展示界面 用户在本界面可以查看更多功能和信息，例如会员积分，优惠券，个人订单信息等。