【《基于微信小程序的小学生学英语软件的设计与实现》7200字（论文）】

基于微信小程序的小学生学英语软件的设计与实现摘要在信息技术高速发展的当代，信息的获取与保存的方式随着智能手机的普遍使用产生了极为显著的转变。得益于智能手机的发明和使用，数据使用在管理、应用及服务等各个领域变得更加简洁，更加方便，使工作效率得到了极大的提高。在这样的时代背景下，选择设计一款基于微信平台的小学生学英语小程序作为课题的研究目标。首要步骤是对小程序进行需求分析，其次，系统的总体设计主要包括系统开发环境、系统目标、设计流程、功能设计等几个方面，使用微信开发者工具，完成了具有了视频播放、发布视频等功能的小学生学英语小程序。最后，对系统进行了功能测试，测试结果表明该系统界面友好、功能完善，使用价值较高，具有良好的的应用前景，并可能存在大量的潜在用户群体。关键词：智能手机微信小学生学英语小程序目录摘要 IABSTRACT II目录 III第1章绪论 11.1选题背景及意义 11.2课题研究现状 11.3研究内容 2第2章开发环境介绍 32.1MVC模式 32.2B/S结构 32.3JavaScript简介 42.4HTML5技术 52.5微信简介 5第3章系统分析 73.1系统可行性分析 73.1.1技术可行性 73.1.2操作可行性 73.1.3经济可行性 73.2功能需求分析 73.3用例需求 83.4开发运行环境需求 103.5性能需求 10第4章系统设计与实现 124.1系统架构设计 124.2系统架构类图 134.3系统交互图 144.4系统的实现 154.4.1首页模块实现 154.4.2分类模块实现 164.4.3论坛模块实现 174.4.4个人中心模块实现 18第5章系统的测试 205.1系统测试目的与意义 205.2测试过程 205.3测试结果分析 22总结 23参考文献 25第1章绪论1.1选题背景及意义而维护和应用程序的开发需要功能完备，容易使用，简洁友好的程序界面，并且要迎合人们的操作习惯。在信息爆炸的时代，为了处理庞大的信息量，并满足更多用户的需求，因此开发基于微信小程序的小学生学英语软件是有必要的。用户使用小程序，可以完成对信息的查询、统计和管理。本次设计是，基于微信的“小学生学英语小程序”软件的设计与实现。与传统应用程序相比，微信小程序可以安装在用户的移动设备上进行使用，通过添加一些辅助功能，用户就可以更加方便快捷地实现观看视频、查看排行榜和试卷信息，进行在线考试等功能。因此，推进设计开发出一款基于微信平台的小程序，可以为用户带来极大的便利。1.2课题研究现状自微信问世以来，数年时间，微信在全世界已经拥有了数亿的活跃用户和注册账号。庞大的用户基数和简单方便的功能，使微信小程序的开发与使用越来越普遍，这给信息工作者们带来了更多的机遇和挑战，也让身处信息化时代的人们生活更加便捷，交流更加密切。微信小程序使用热潮兴起的原因，在于同传统的应用程序相比，微信小程序拥有独特且明显的优势1、体积小，小程序的占用内存不足1MB，较小的体积使得访问速度更快。2、使用方便，小程序通过搜索活聊天栏中的推送直接点开就可以使用，并且小程序可以在不同的环境下使用，十分方便快捷。3、推广简单，小程序的推广只需要点击分享就可以在聊天中分享给好友，并且无需下载点开即可享受功能，因此十分受到用户和开发者的青睐。所以，从以上可以看出，微信小程序拥有发展潜力和发展空间。第2章开发环境介绍2.1MVC模式MVC全称是ModelViewController，意思就是模型视图控制器[3]：视图模型和逻辑模型的对应关系可以是一对一或一对多，因此，我们需要使用MVC模式，来把视图模型和逻辑模型的代码分离开，这样就能使一个代码体现出多种不同的形态。同时，由于MVC模式可以分离逻辑层，使得界面和应用程序互相不会干扰，大大方便了页面设计者和程序设计者的工作，从而有效地提高了工作效率。2.2B/S结构B/S结构是基于WEB的网络结构模式，它能够将浏览器和服务器结合。其前身是C/S结构[4]。自B/S结构问世以来，对比传统的面向对象程序设计语言，其易于掌握且高速高效的优势体现的十分明显。其中，B/S结构最大的优势就是：客户不需要通过Internet就可以浏览文档、声音、图片、动画、视频等信息，因为数据储存在服务器中，而数据服务器通过多种方式与WEB端建立连接，从而实现信息的交换，因此WEB端是客户所浏览的信息产生的基础。用户不需要通过其他的用户程序，就可以将所需要的程序，从WEB端上下载到本地进行安装使用，在WEB服务器下载的同时，数据库服务器会执行数据信息的处理，处理完以后就会把数据信息返回给WEB端。这种三次体系结构如图2-1所示。图2-1B/S三层体系结构2.3JavaScript简介JavaScript相比其他用户端脚本语言，危险性相对较低且需要根据对象和情况进行使用。向对象的功能是JavaScript的核心作用之一，在对象的基础上进行程序开发，可以使设计程序的方法更直接、系统化，并且做到能够反复利用。由HTML程序可以得出，在设计交互式Web网页可以采用JavaScript。在JavaScript的应用的影响下，网页和客户之间的关系变得动态化，同时具有交互性。这样可以使得网页展现出的内容更加丰富精彩。2.4HTML5技术HTML语言是互联网构成的基础。Internet应用程序是HTML改进的基础。。对用户而言，HTML技术优化了用户的使用体验和视觉体验。在移动端中，HTML5技术能够扩展web页面的功能，并且使用户能够在应用程序和web页面之间随意切换。用户无需下载额外的程序或插件，就可以直接观看视频和玩游戏。操作十分简单，同时也极大地提升了用户的体验。对开发者而言，开发传统的App，需要对于不同的操作系统进行独立对应的研发工作，操作繁琐而且成本较高。传统的应用程序还需要额外的管理成本、存储成本等等。但是如果应用程序是使用HTML这种可以适应多种终端的语言开发的，就可以同一次开发任务中完成所有的操作。相比之下，就能大大降低时间和经费的成本。2.5微信技术简介微信技术是一种基于即时通讯技术的通信技术[12]。其技术原理如下图2-2所示：图2-2微信技术原理图第3章系统分析3.1系统可行性分析3.1.1技术可行性开发软件所需要使用的微信技术现在已经十分成熟可靠。因此系统开发具有技术可行性。3.1.2操作可行性软件是微信小程序，因此只需要手机上有微信就可以访问并体验。软件的界面简单容易上手，门槛很低，只要用户有智能手机的使用经验并使用过微信，就能很容易地使用小程序。因此系统的操作十分简单，具有操作可行性。3.1.3经济可行性软件使用的开发工具是免费的微信开发者工具，使用到的语言和技术也都是免费的，因此，不会给开发者带来任何经济负担，具有经济可行性。3.2功能需求分析需求分析可以通过了解需求，确定系统的必要工作和功能，因此是十分重要的步骤，在进行需求分析是，我们需要提出清楚且完整的要求系统主要包括首页、试卷中心、排行榜、个人中心等功能模块。系统模块图如图3-1所示。图3-1功能模块图3.3用例需求用户需求用例如图3-2所示。图3-2用户需求用例图（1）视频管理表3-1视频管理分析用例名称用例简介前置条件视频管理对视频信息进行添加、删除等管理。系统登录正常，网络连接正常。主要操作（1）管理员打开系统。（2）进入系统登录界面，输入设定好的登录账号及密码。（3）登录系统，进入系统主界面。（4）点击视频管理模块，进入视频管理界面。（5）点击视频管理界面的查询按钮，显示视频信息列表。（6）按提示，添加、删除或修改视频信息。（7）更新视频信息列表。（2）公告管理表3-2公告管理用例分析用例名称用例简介前置条件公告管理对公告信息进行添加、删除等管理。系统登录正常，网络连接正常。主要操作添加公告明细（1）管理员打开系统。（2）进入系统登录界面，输入设定好的登录账号及密码。（3）登录系统，进入系统主界面。（4）点击公告管理功能，进入公告管理界面。（5）点击公告管理界面的添加公告信息按钮，进入添加公告信息操作界面。（6）按提示，选择或录入标题、内容等信息。（7）确认信息正确后，点击确定按钮，确认添加，公告信息添加入数据库中。删除公告信息明细（1）处于公告管理界面。（2）点击想要删除的公告信息条目后的删除按钮，弹出公告信息删除确认界面。（3）点击确认按钮，实现公告信息的删除，相应公告信息从数据库中删除。3.4开发运行环境需求开发环境需求如下：1）硬件要求CPU：intelI33.0GHZ及以上内存：4GB及以上硬盘：500G及以上2）软件要求操作系统：win7、win10等操作系统开发环境：微信开发者工具3.5性能需求软件的性能体现在很多方面，并不只是仅仅需要满足客户的与其要求。如表3-1：表3-1软件性能需求分析质量属性详细要求正确性切实履行好职责需要，相应的完成每个模块的要求。健壮性具有高容错性和恢复能力。可靠性每1000个小时的时间超过3次的失败率。性能，效率软件更新周期的输出应该是相同的系统信息更新周期。在网络状况良好，在三秒钟内响应消费者的需求。易用性很容易理解：建立一个统一软件开发过程简单的语言文件，之前和之后的语句是清晰和易于理解。安全性从意外或故意接入阻止软件，使用，修改，破坏或披露该软件将能够专注于存储在数据库服务器的总部数据的特性，客户端不保存任何业务数据和数据库连接信息，或什么样的数据同步。可扩展性二次开发能满足或改善的功能扩展，并增加适当的安全控制。兼容性简单的冲突与其他软件。可移植性该系统可以很容易地转移到其他运行环境。第4章系统设计与实现4.1系统架构设计在进行软件的开发前，我们需要先对系统进行架构设计，为系统建立整体的框架与对象。首先，如下图4-1所示，我们将系统中对象分为用户界面层、业务层、数据访问层：然后，再把各层中的权限管理、异常处理作为公共部分提取出来，这样就可以得到包图如图4-2所示。图4-1系统体系架构图图4-2系统功能模块包图4.2系统架构类图展开系统包图，可以得到类图，类图是静态结构图的架构。系统类图如下图4-3所示。图4-3系统类图4.3系统交互图系统架构类的交互图如图4-4所示：图4-4系统架构类的交互图4.4系统的实现4.4.1首页模块实现用户可以在首页搜索学习资料，查看公告，观看视频，学习词汇，并且可以进行分享和评论评价。首页模块实现界面如图4-5所示。图4-5首页模块实现界面<!/adminss/address/add/index.wxml--><viewclass='menulist'><text>教学视频封面</text></view><viewclass='live_photo'><imagesrc="{{images_url}}"bindtap='addPhoto'></image></view><viewclass='menulist'><text>教学视频内容</text></view><viewclass='live_photo'wx:if="{{video=='/images/addlivephoto.png'}}"><imagesrc="{{video}}"bindtap='chooseVideo'></image></view><viewclass='live_photo'wx:else><videosrc="{{video}}"></video><viewclass="firseup"bindtap="firstUp">重新上传</view></view><viewclass='menulist'><text>名称</text><inputplaceholder="请输入名称"bindinput='ChangeName'value='{{name}}'/></view><viewclass='menulist'><text>教学资料</text></view><textareaclass='textarea_view'placeholder="请输入教学资料"maxlength='-1'value="{{content}}"auto-height='false'bindinput='ChangeContent'></textarea><viewclass="buttons"><buttonwx:if="{{isEdit}}"class="delete"bindtap="delete">删除</button><buttonform-type="submit"type='primary'class="confirm"bindtap='add'>{{isEdit?'修改':'添加'}}</button></view>4.4.2考试中心模块实现用户在考试中心页面，可以查看考试试卷并进行模拟考试的测验。考试中心模块实现界面如图4-6所示。图4-6试卷中心模块实现界面varapp=getApp();varutil=require('../../../../utils/util');varBmob=require('../../../../utils/bmob.js')vardate=newDate();varthat;varq_item={ name:'', options:'', answer:'', score:10,}Page({ /** *页面的初始数据 */ data:{ name:'', q_list:[{ name:'', options:'', answer:'', score:10, }], image_list:[], paper_id:0, }, /** *生命周期函数--监听页面加载 */ onLoad:function(options){ varthat=this; console.log(); if(options.id){ that.setData({ isEdit:true, paper_id:options.id }); wx.setNavigationBarTitle({ title:'编辑试卷' }) that.loadPaper(); }else{ wx.setNavigationBarTitle({ title:'添加试卷' }) } }, pushQuestion(){ varthat=this; varq_item={ name:'', options:'', answer:'', score:10, } varq_list=that.data.q_list; q_list.push(q_item); that.setData({ q_list:q_list, }) }, delQuestion(e){ varthat=this; varq_list=that.data.q_list; varindex=e.currentTarget.dataset.index; q_list.splice(index,1); that.setData({ q_list:q_list, }) }, changeQuestion(e){ varthat=this; console.log(e) varq_list=that.data.q_list; varindex=e.currentTarget.dataset.index; varval=e.detail.value; q_list[index].name=val; that.setData({ q_list:q_list, }) }, changeOptions(e){ varthat=this; console.log(e) varq_list=that.data.q_list; varindex=e.currentTarget.dataset.index; varval=e.detail.value; q_list[index].options=val; that.setData({ q_list:q_list, }) }, changeScore(e){ varthat=this; console.log(e) varq_list=that.data.q_list; varindex=e.currentTarget.dataset.index; varval=e.detail.value; q_list[index].score=parseInt(val); that.setData({ q_list:q_list, }) }, changeAnswer(e){ varthat=this; console.log(e) varq_list=that.data.q_list; varindex=e.currentTarget.dataset.index; varval=e.detail.value; q_list[index].answer=val; that.setData({ q_list:q_list, }) }, loadPaper:function(){ varthat=this; util.showLoading(); varquery=Bmob.Query('paper'); query.get(that.data.paper_id).then(function(res){ that.setData({ court:res, q_list:res.q_list, name:, }); util.hideLoading(); }); }, //编辑名称 changeName:function(e){ varthat=this; that.setData({ name:e.detail.value, }); }, delete:function(){ varthat=this; //确认删除对话框 wx.showModal({ title:'温馨提示', content:'确认删除该考试吗?', confirmColor:"#59A5F0", success:function(res){ if(res.confirm){ constquery=Bmob.Query('paper'); query.destroy(that.data.paper_id).then(res=>{ wx.showModal({ title:'温馨提示', content:'删除成功', confirmColor:"#59A5F0", showCancel:false, success:function(){ wx.navigateBack(); } }); }).catch(err=>{ console.log(err) }) } } }); }, add:function(e){ varthat=this; varform=e.detail.value; //表单验证 console.log() if(==undefined||==''){ util.message('请填写名称'); return; } if(that.data.q_list.length<1){ util.message('请至少输入一个题目哦'); return; } vartotal=0; for(vari=0;i<that.data.q_list.length;i++){ varthe_item=that.data.q_list[i]; console.log(the_item) varindex=parseInt(i)+parseInt(1) if(the_==''){ util.message('请填写第'+parseInt(index)+'题的题目'); return; } if(the_item.options==''){ util.message('请填写第'+parseInt(index)+'题的选项'); return; } if(the_item.answer==''){ util.message('请填写第'+parseInt(index)+'题的答案'); return; } if(the_item.score==''){ util.message('请填写第'+parseInt(index)+'题的分数'); return; } total=parseInt(total)+parseInt(the_item.score) } varinsert={}; varinsert=Bmob.Query('paper'); insert.set('name',); insert.set('total',total); insert.set('q_list',that.data.q_list); //是否处在编辑状态 if(that.data.isEdit){ insert.set('id',that.data.court.objectId)//需要修改的objectId } console.log(insert); insert.save().then(function(res){ //console.log(res) wx.showModal({ title:'温馨提示', content:'保存成功', confirmColor:"#59A5F0", showCancel:false, success:function(){ wx.navigateBack(); } }); },function(res){ //console.log(res) wx.showModal({ title:'温馨提示', content:'保存失败', confirmColor:"#59A5F0", showCancel:false }); }); }, /** *生命周期函数--监听页面初次渲染完成 */ onReady:function(){ }, /** *生命周期函数--监听页面显示 */ onShow:function(){ }, /** *生命周期函数--监听页面隐藏 */ onHide:function(){ }, /** *生命周期函数--监听页面卸载 */ onUnload:function(){ }, /** *页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh:function(){ }, /** *页面上拉触底事件的处理函数 */ onReachBottom:function(){ }, /** *用户点击右上角分享 */ onShareAppMessage:function(){ }})4.4.3排行榜模块实现在排行榜模块，用户可以查看视频观看量的排行。排行榜模块实现界面如图4-7所示。图4-7排行榜模块实现界面<viewclass='list_view'><blockwx:if="{{songs_list.length>0}}"><viewclass='fruitsCenterpadding'><viewclass='frutisdetils_smallfrutisdetils'bindtap='makeNavigate'wx:for='{{songs_list}}'wx:key=''data-url="/page/info/index?objectId={{item.objectId}}"><imagesrc='{{item.image}}'class='frutisshopImg'mode='aspectFit'></image><viewclass='frutismose'><view><textclass='work_break'>{{}}</text><text>观看量：{{item.read_num}}</text></view></view></view></view></block><blockwx:else><viewclass='notdata_view'><imagesrc="/images/notdata.png"mode="widthFix"></image><view>暂无符合条件的数据</view></view></block></view>4.4.4个人中心模块实现用户可以可以在个人中心查看自己的个人信息并可以作出修改，也可以查看用户收藏的学习资料和考试试卷。个人中心模块实现界面如图4-8所示。图4-8个人中心模块实现界面<viewclass='user_view'> <viewclass='user_info'> <imagesrc="{{userInfo.userPic}}"mode="aspectFill"class='avatar_img'></image> <view> 欢迎使用后台管理系统 </view> </view></view><navigatorurl="/page/adminss/banner/index/index"> <viewclass='menulist'> <viewclass='menu_item_img'> <imagesrc="/images/usercenter/shezhi.png"mode="widthFix"></image> </view> <viewclass='myplan'>BANNER管理</view> <imagesrc="/images/more.png"mode="widthFix"></image> </view></navigator><navigatorurl="/page/adminss/notice/index/index"> <viewclass='menulist'> <viewclass='menu_item_img'> <imagesrc="/images/usercenter/shezhi.png"mode="widthFix"></image> </view> <viewclass='myplan'>公告管理</view> <imagesrc="/images/more.png"mode="widthFix"></image> </view></navigator><navigatorurl="/page/adminss/songs/index/index"> <viewclass='menulist'> <viewclass='menu_item_img'> <imagesrc="/images/usercenter/shezhi.png"mode="widthFix"></image> </view> <viewclass='myplan'>学习教学管理</view> <imagesrc="/images/more.png"mode="widthFix"></image> </view></navigator><navigatorurl="/page/adminss/paper/index"> <viewclass='menulist'> <viewclass='menu_item_img'> <imagesrc="/images/usercenter/shezhi.png"mode="widthFix"></image> </view> <viewclass='myplan'>试卷管理</view> <imagesrc="/images/more.png"mode="widthFix"></image> </view></navigator><navigatorurl="/page/adminss/member/index"> <viewclass='menulist'> <viewclass='menu_item_img'> <imagesrc="/images/usercenter/shezhi.png"mode="widthFix"></image> </view> <viewclass='myplan'>用户管理</view> <imagesrc="/images/more.png"mode="widthFix"></image> </view></navigator>第5章系统的测试5.1系统测试目的与意义在系统的程序代码基本编写完成，系统的功能逐步得到实现之后，我们需要对系统进行测试。通过系统测试，我们可以检查程序的稳定性，发现漏洞，降低系统出现风险的可能性。因为，系统测试能够让操作与功能更加可靠，提升用户的使用体验，因此，我是非常重要的程序开发的步骤之一。5.2测试过程系统测试采用的是常用的功能测试和结构测试。功能测试，用于检查系统的功能是否完善与正常，能否达到用户的与其要求。结构测试，通过检查软件内部的逻辑结构，确认实际的运行状态是否能达到预期的运行状态。表5-1用户登录测试表功能名称用户登录测试序号01测试时间2021年04月07日测试人员开发者测试目的测试系统登录功能是否正常、稳定测试步骤（1）用户要登录本系统并在登录界面输入用户名“1234”，密码“1234”点击登录按钮（2）用户要登录本系统并在登录界面输入用户名“1234”，密码“123”点击登录按钮预测结果（1）通过后台服务器与数据库的信息匹配正确后，提示“登录成功”，并进入主界面，用户1234可以正常登录系统。（2）经过客户端代码对输入的数据进行格式规范校验后，提示“用户名或密码不对，请重新输入”。实际结果（1）通过后台服务器与数据库信息匹配正确后，提示“登录成功”，并进入主界面，用户1234可以正常登录系统。（2）经过客户端代码对输入的数据进行格式规范校验后，提示“用户名或密码不对，请重新输入”表5-2用户注册测试表功能名称用户注册测试序号02测试时间2021年04月07日测试人员开发者测试目的测试系统用户注册功能是否正常、稳定测试步骤（1）输入“用户名”、“密码”，“手机号”、“邮箱”等信息，并点击注册按钮。（2）直接点击注册按钮。预测结果（1）系统将注册信息验证后录入数据库，并提示“注册成功”，跳转到登录界面。（2）注册失败，提示“请输入用户名”实际结果（1）系统将注册信息验证后录入数据库，并提示“注册成功”，跳转到登录界面。（2）注册失败，提示“请输入用户名”。表5-3试卷中心功能测试表功能名称试卷中心测试序号03测试时间2021年04月07日测试人员开发者测试目的测试试卷中心功能是否正常、稳定测试步骤在试卷中心界面，选择试卷，进行在线考试等操作。预测结果操作成功。实际结果操作成功。表5-4个人中心模块测试表功能名称个人中心模块测试序号03测试时间2021年04月07日测试人员开发者测试目的测试个人中心功能是否正常、稳定测试步骤在个人中心模块界面，点击个人信息，进行个人信息修改、密码修改等操作。预测结果操作成功。实际结果操作成功。5.3测试结果分析在测试系统的过程中，不难发现，代码所能实现的功能，并不一定能达到所有的预期效果，因此，在系统功能最终完成前，代码需要进行不断地改动与调试，这样才能使系统趋近于理想化的预期。从整体的测试结果来看，小程序地用户体验良好，功能实现较为完整，基本达到了预期的目标。

总结本次毕业设计报告的主要内容，是介绍研究开发一款基于微信小程序的小学生学英语软件的全过程。小程序使用微信开发者工具进行开发制作，小程序的主要功能模块有：包括了可搜索的视频和词库的教学内容与公告栏相结合的首页，可以查看的考试系统，观看排行榜和处理改动各项功能的个人中心。首先，根据已经决定好的功能构建系统程序的整体框架，其次。寻找合适的技术和语言并作出简单的介绍，然后对系统进行可