【《基于微信小程序的云自习平台系统设计与实现》10000字（论文）】

摘要：首先对基于微信小程序的云自习平台的选题背景和选题意义进行了介绍和研究，在此基础上给出论文的主要研究内容，然后，对基于微信小程序的云自习平台的需求进行了分析。最后，对基于微信小程序的云自习平台进行了总体设计，根据其总体设计、软件架构和总体功能模块进行了详细设计，做出了系统流程图以及数据库。总体上把基于微信小程序的云自习平台分为了微信授权登录、浏览优质好文、去学习呀、查看学习排名、社区交流、预期时长统计、学习时长统计、设定目标等。它们分别实现了云自习平台的相关信息的查询与管理，使用了微信开发者工具以及js开发语言配合云开发模式实现了基于微信小程序的云自习平台的信息化管理，并列出核心部分主要页面。还对基于微信小程序的云自习平台的核心功能进行了调试与测试。关键词：微信小程序云自习平台js云开发引言1.1课题研究目的受新冠疫情冲击，全球宏观经济下行压力较大，企业大幅裁员;然而中国应届毕业生数量不断增长，面对更为严峻就业形势和就业压力，考研、考证成为提升自我竞争力的重要方式。数据显示，中国研究生报考人数逐年攀升，2020年共有341万人报考研究生，但我国平均每43.9万人共用一座图书馆，公共自习空间不能满足社会需求，公共资源供给不足催生中国付费自习室发展。基于微信小程序的云自习平台的研究与设计是在线学习的小程序，源于传统的图书馆学习，传统的图书馆学习，在新冠疫情的影响下，由于管控人数，人们不能更好地进入图书馆中学习，在路上也会浪费时间。与之对比，云自习室打破了时间跟位置的限制。所谓“云自习”，就是在线上共同学习，在云端寻找想要一起学习的“同桌”，进而在同伴带动、督促下获得更高的学习效率。“云自习”逐渐升温，与新冠肺炎疫情防控期间线上学习的流行不无关系。社交隔离为效率办公、教育工具、综合电商和社区交友等带来机遇，“云端生活”潮流更为云自习蓬勃发展创造了优质土壤。1.2国内外研究现状1.2.1国内研究现状微信小程序，简称小程序，缩写xcx，英文mini-program。是一种不需要下载安装即可使用的应用，它实现了应用的“触手可及，即用即走”，用户只需通过微信扫一扫或者搜一下就可以打开应用。用户无需关心是否安装太多应用的问题。应用将无处不在，随时可用，但又不需要安装或卸载。2017年1月9日微信小程序正式上线，2018年初跳一跳小游戏刷爆朋友圈，微信小程序生态逐步完善。随后各大巨头竞相布局，支付宝、百度、头条相继推出旗下小程序产品。截止2018年底，微信小程序已经覆盖了超过200个细分行业，服务超过1000亿人次用户：城市服务也覆盖了362个地级市，年交易增长超过百分之600，创造了超过五千亿的商业价值。截止2019年6月，微信月活跃设备数高达11.2亿，搭载在上面的微信小程序也受到众多开发着和用户的欢迎当前APP流量红利时代已经进入了后期，现存用户的争夺激烈，建立生态依然是各互联网大头的奋斗目标，而微信拥有大量的流量优势，且h5和云存储技术的成熟优化了用户体验。微信侧重于社交关系的串联，支付宝侧重tob业务，百度打造月超30亿的开源联盟，360立足的则是PC端，为大屏高沉浸场景建立平台。微信小程序上线至今，流量入口已经超过60个，其主要的引流方式主要有：用户自己搜索机制，扫码获取，好友或者群里分享还有公众号的推送等略带克制的推荐机制。微信的引流风格就像一款不做节日运营、不做初期推广的产品一样，保持了一款好产品的安静气质，给用户保留了足够的选择空间，用优质的功能体验来达到吸引和打动客户的效果。借助着2019年以来逐步完善的各个功能板块，微信小程序已经初步形成了一个闭环的生态结构，实现良性发展，不断地释放对开发者引力的同时不断优化用户的使用体验。从各个功能模块具体来看，在流量入口上，微信开放全量全量搜索，提升小程序直达搜索能力；打造小程序桌面，培养用户形成下拉操作习惯；解除跳转限制，优化公众号和不同小程序之间的导流，既可从小程序推广公众号，又可以从公众号进入小程序；推出一物一码，强化线下商品的小程序直连。在留存提升上，微信推出了“一次性订阅消息”，帮助商家精准唤醒用户：将小程序接入浮窗，打造常驻页面的“第二个入口”，操作更加的便捷快速。在内容优化上，微信持续优化小程序评分与用户满意度调查，激励优质内容。在转化承接上，广告、电商和增值服务三个方面已经基本成型，帮助开发者依靠小程序的清量化优势高效运营私域流量，挖掘用户价值。根据调查数据显示，其中48.7%使用微信小程序的用户每天使用微信小程序的次数为5次以上，每天使用微信小程序15次以上的比例占5.9%。国内微信小程序无论从人口指标还是活跃度上都呈现出国民级的渗透率水平。1.2.2国外研究现状在国内如此流行的微信小程序，在国外也不例外。小程序的影响力不只限于国内，国外的Snapchat也准备上线小游戏平台，东南亚打车巨头Grab也推出了应用开发平台，想成为超级应用。2019年欧洲地区小程序的访问量大幅提高。从新加坡到柏林，小程序生态正在一步一步走得更远。从东南亚到欧洲，小程序成为了出境游必备的“利器”。国外也开发出了不少优秀的小程序，例如曼谷海洋公园的sealife小程序涵盖了在线购票、场馆导览、游戏互动、明信片分享等功能，自上线以来收获了4万客户。1.3研究意义线上自习室为学习者营造了一个共同学习的虚拟空间。在享受网络带来的快乐和便利时，一些未成年人对电子产品和网络的依赖不断加深，甚至成瘾。网络空间作为家庭、学校、社会等现实世界的延伸，已成为未成年人成长中密不可分的一部分。线上自习室不仅是疫情之下的新交往，更是应需而生的新现象，能够折射出许多人的社会行为与内心焦虑。在信息过载的互联网时代，“乱花渐欲迷人眼”的娱乐方式，让专注做同一件事情成为很多人的奢望。指尖点点画画，屏幕放大缩小，一天的时光就在指缝中悄悄溜走。于数据云端“飘飘何所似”的很多人，难以靠自制力高效完成任务。在这样的情形下，云自习的线上群体学习模式，或许是新的契机。2相关技术介绍2.1微信开发者工具微信小程序的技术框架的基础是MINA,全名为ApacheMinaServer，它是一个基于网络通信框架的应用,从网络通信角度来说，它主要是利用TCP/IP、UDP/IP协议栈为基础的通信协议的框架，这些都是我们本科在计算机网络掌握的理论知识。可以帮助快速开发高性能、高扩展性的网络通信应用,Mina提供了事件提供了事件驱动,异步操作的模型，Mina主要有1.x和2.x这两个分支。必须具备JAVAIO、JAVANIO、JAVASocket、JAVA线程和并发库(java.util.concurrent.*)的知识。mina是网络通信的client和server支持端同时提供的包装,而且任何终端通过通信网络的整体结构中,mina的api是真正的从我们的网络通信应用程序分离,发送,接收数据,业务逻辑即可。可以类推的web页的基于ssh技术,主要由用户视图和内部逻辑两个方面构成，将按图1的视图层展示利用组件,通过语言描写和wxml、wxss实现,其中wxml是一种我们的的web的开发语言,组织结构,页用wxss类似css样式表[5]。逻辑层基以JavaScript语言形成了逻辑，负责接者通过JSBridge进行数据传输和事件处理，如图2.1所示。图2.1MINA框架逻辑图微信小程序工具自带了很多标准的View，从而可以大大节省UI的开发消耗，能够使得小程序页面及分层之间风格划一，整洁简练。API主要应用于逻辑层，可以达到传统手机app具有的功能，在信息获取方面以及实现交互交流的多样化。微信小程序开发的语言主要是JavaScript,但其框架与样式设计与web网页框架设计及css美化大致相同，对于掌握web+css+JavaScript知识的开发者更容易上手一些，即使没有一定的开发基础，微信公众平台/wiki提供了下载工具并附有详细的开发文档及使用文档，对于新手来说并没有太多的技术难题，可以完全根据自身需要开发各类应用小程序。2.2技术依赖2.2.1WXMLWXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，是微信独有的标签语言。2.2.3ES6ES6是Javascript的新版本，它有很多很棒的新特性。这些特性复杂程度各不相同，但对于简单的脚本和复杂的应用都很有用，并且当前浏览器已经全面展开对这些ES6新特性的支持。项目中，一些地方使用了let定义变量，const关键字，箭头函数等。2.2.4WXSSWXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。与CSS相比，WXSS扩展的特性有：尺寸单位、样式导入。2.2.5云开发小程序云开发是微信团队联合腾讯云团队推出的一套小程序开发解决方案。小程序云为开发者提供完整的云端流程，弱化后端和运维概念，开发者无需购买和管理底层计算资源，包括服务器、数据库、静态存储，只需使用平台提供的简易API进行核心业务等开发，实现快速上线和迭代，把握业务发展的黄金时期。3系统需求分析3.1系统可行性分析3.1.1技术可行性由于微信小程序是基于微信开发平台提供的微信开发者工具的基础上进行的，在继微信公众号的开发基础上，微信小程序基于MINA框架的开发已经成熟，版本也越来越稳定。对于计算机相关专业的本科生而言，有一定的web开发基础，则开发小程序对于我们而言并不是难题，而且javascript的语法通俗易懂，可以与本科所学的课程融会贯通，有利于项目的实现与运行。微信小程序借鉴了当前非常流行的组件化开发方式。一个页面就是一个组件，所以对于初学者也是非常友好的，只需要学习wxml语法即可，而开发工具大多是给予关键词提供的，不容易出错。wxss的语法也是类似一种函数的调用，和css差别不大。后台的数据接口获取以及数据缓存次用java编写，这部分要求有一定的java语言基础，不过基本就是网络API获取接口的编写以及数据库，可以举一反三，代码重复率很高。小程序的后台采取CGI模式，CGI即通用网关接口（CommonGatewayInterface），它采用Fork-And-Execute模式，每有一个用户请求，都会先要创建CGI的子进程，然后解析配置文件，初始化执行环境，并处理请求，处理完后返回结果同时结束这个子进程。可以把WebServer和具体的程序处理独立开来，结构清晰，可控性强；CGI的跨平台性能极佳，几乎可以在任何操作系统上实现。3.1.2经济可行性本项目的载体并没有严格限定，可以基于Android系统和ios系统的移动智能手机，只要安装微信即可，相比较于PC端，具有携带方便的优势，这也就导致了应用系统本身对运行环境的要求简单，不受地理、时间等客观因素的限制。今天，随着智能手机的快速发展，用户只需携带可上网的智能手机，即可随时随地获取准确的网络API的数据。智能手机的价格可由大多数家庭承担，因此应用系统的经济可行性符合要求。3.2系统需求分析3.2.1功能需求分析本课程是基于微信小程序对云自习平台的研究与设计，对传统的模式下进行改进和革新，基于微信小程序作为第三方为云自习室的实际需求进行开发设计，实现了用户登录，选择自习室，开始学习，后台记录学习时长，进行排名。可以看到自己的每天，每周，每月的学习时长。也可以自己设置要专注学习的时间，严格模式下不能提前结束。在未来目标中添加目标，例如高考，考研，公务员考试等。（1）首先进入首页页面，用户可以浏览系统主页面。可以浏览就业新闻，职业规划，简历攻略等。如果用户想要进行相关操作，需要先登录该系统。已有账号可以直接登录，没有账号需要先注册。（2）选择自习室，点击开始学习后台自动记录学习时长，系统会累计学习时长，形成学习周报。进行排名，同他人相比，提升紧张感。增强学习的动力。（3）回到主界面，主界面会与真实的环境同步，增强时间观念。（4）进入社区界面，点击左上角，发布动态。可以在社区浏览，交流，分享。丰富社区体验感。（5）如果学习期间想要退出，需要填写放弃原因，还会有一个打断原因的统计图。（6）学习计时，设置一个预期，结束一天的学习，记录自己每天学了什么，学习时长。看与自己的预期目标是否有不同。（7）倒计时功能，设置未来预期目标，例如考研，高考，公务员考试等。3.2.2非功能性需求分析非功能需求也称性能需求，是在满足系统主要功能外，令用户在使用本系统时能够感到满意的一种需求，本小节主要分析时间特性、可扩展性以及可兼容性的需求。1.时间特性需求：客户端的请求相应时间基于硬件条件不同，总体不应多于5秒；客户端向数据库增删查改一条记录的时间基于硬件条件及处理的数据量因素，总体不应多于1秒；数据转换和传送的时间根据具体的转换和传送数据不同所需的时间不同，总体不应超过5s；用户身份认证及执行算法的时间均不应超过5s。2.可扩展性需求：本系统目前实现的主要功能仅为市场调研后，根据市场主要需求制定的。在后期成熟后必然是要根据用户反馈来向系统中添加新功能，因此这就要求本系统需要具备良好的可扩展性，为以后的迭代开发做好保障。3.可兼容性的需求：由于当前市面上的浏览器版本参差不齐，不同版本的浏览器所提供的某些接口与制定的某些规则并不一样，因此本系统需要具备良好的可兼容性，否则轻则无法运行，重则会出现严重的系统漏洞3.3系统流程分析该小程序端上用户可以通过自己的微信号进行授权登录，登录后可以浏览优质好文、去学习呀、学习排名、社区交流、预期时长、学习时长、设定目标等。软件主要包括网络API获取以及JSON的解析，界面UI的设计，图片的优化等。微信端流程图如图3.1所示。图3.1微信端流程图4系统设计4.1系统框架设计主要针对本系统的系统架构进行设计。校园教学区物业管理系统小程序从架构上分为三层：表现层（UI）、业务逻辑层（BLL）以及数据层（DL）。图4.1网站架构设计图接下来介绍各层的作用。表现层（UI）：又称UI层，主要完成本系统的UI交互功能，一个良好的UI可以打打提高用户的用户体验，增强用户使用本系统时的舒适度。UI的界面设计也要适应不同版本的系统以及不同尺寸的分辨率，以做到良好的兼容性。UI交互功能要求合理，用户进行交互操作时必须要得到与之相符的交互结果，这几要求表现层要与业务逻辑层进行良好的对接。业务逻辑层（BLL）：主要完成本系统的数据处理功能。用户从表现层传输过来的数据经过业务逻辑层进行处理交付给数据层，系统从数据层读取的数据经过业务逻辑层进行处理交付给表现层。数据层（DL）：由于本系统的数据是放在服务端的mysql数据库中，因此本属于服务层的部分可以直接整合在业务逻辑层中，所以数据层中只有数据库，其主要完成本系统的数据存储和管理功能。4.2系统功能模块设计经过上面章节的需求分析得出了基于微信小程序的云自习平台的功能结构设计如图4-2所示。图4.2系统结构图4.3数据库设计4.3.1数据库实体数据库的构建是系统开发过程中不可获取的一部分，可以对数据进行有效的技术管理。目前信息发展的时代，信息已经逐日成为一项重要的资产甚至核心竞争力。在系统及程序设计过程中，建立数据库非常重要。建立满足各部门信息处理要求的数据库是公司或组织生存和发展的基本要求。该系统一共主要建立了4个数据库表，分别是：用户信息表、学习基本信息表、社区基本信息表、学习退出信息表。4个表中的实体之间的关系由E-R图如下表示。（1）用户信息实体E-R图，如图4.3所示：图4.3用户信息实体图（2）学习基本信息实体E-R图，如图4.4所示：图4.4学习基本信息实体图（3）社区基本信息实体E-R图，如图4.5所示：图4.5社区基本信息实体图（4）学习退出信息实体E-R图，如图4.6所示：图4.6学习退出信息实体图4.3.2数据库表本基于微信小程序采用云数据库，数据库的功能主要是存储网站中所有数据，以便进行操作。关于数据库中的数据表如下：表4-1用户基本表users字段类型是否主键备注idInt（11）是主键自增_openidvarchar(255)否微信用户标识studyTimenumber否学习时长avatarUrlvarchar(255)否用户头像countryvarchar(255)否用户所在城市gendervarchar(255)否用户性别nickNamevarchar(255)否用户昵称表4-2学习基本表study字段类型是否主键备注idInt（11）是主键自增_openidvarchar(255)否微信用户标识contentnumber否学习内容datevarchar(255)否学习时间realTimevarchar(255)否真实学习时间长timevarchar(255)否预估学习时长uservarchar(255)否学习用户表4-3社区基本表shequ字段类型是否主键备注idInt（11）是主键自增_openidvarchar(255)否微信用户标识contentvarchar(255)否动态内容datevarchar(255)否发表时间nickNamevarchar(255)否发布用户昵称avatarUrlvarchar(255)否发布用户头像表4-4学习退出基本表quit_reason字段类型是否主键备注idInt（11）是主键自增_openidvarchar(255)否微信用户标识reasonvarchar(255)否退出原因userIdvarchar(255)否学习用户5系统的实现5.1授权登录点击底部“我的”中的“登录”按钮后将会弹出微信授权登录提示框，提示获取登录人的微信信息，点击允许按钮后将会授权登录成功，用户登录界面如下图5.1所示。图5.1用户登录界面图5.2个人中心授权登录成功后将会获取到微信用户的昵称和头像并显示出来，并且登录按钮变成了“退出”按钮。个人中心界面展示如图5.2所示。图5.2用户登录成功界面图5.3设定目标点击底部的“我的”模块中的“设定目标”按钮后，可以输入上自己的名称+日期来设定目标，其界面展示如图5.3所示。图5.3设定目标界面图5.4首页点击底部的“首页”模块后可以查看到自己设定目标的倒计时，以及轮播图展示还有优质好文、去学习呀、学习排名这3个子模块，首页界面展示如图5-4所示。图5.4首页界面图5.5优质好文点击底部的“首页”模块中的“优质好文”后可以从就业新闻、职业规划、简历攻略三个子栏目来浏览各栏目下的优质好文信息，优质好文界面展示如图5-5所示。图5.5优质好文列表界面图点击任何一篇优质好文后可以进入该文章的详细页面，可以进行浏览和分享操作。图5.6优质好文详细界面图5.6去学习呀点击底部的“首页”模块中的“去学习呀”后可以输入学习内容和预期时长后进行“开始学习”操作，其中预期时长不允许超过90分钟，管理员登录界面如下图5.7所示。图5.7去学习呀界面图当创建完自己的学习预期后会自动进入到未就坐界面，初始状态为“未就坐”并且结束按钮是灰色的，开始按钮是绿色的。图5.8未就坐界面图点击“开始”按钮后状态改成“已就坐”，并且开始按钮变成灰色，结束按钮变成绿色，同时根据预期学习时间进行倒计时分秒的方式来显示。图5.9已就坐界面图点击“结束”按钮后需要输入退出本次学习的退出理由并点击“确定”进行保存。图5.10退出学习界面图5.7学习排名点击底部的“首页”模块中的“拍卖情况”后可以查看到所有用户学习时长的排名情况，学习排名界面展示如图5.11所示。图5.11学习排名界面图5.8社区交流点击底部的“社区”菜单后可以查看到所有人在社区内发布的帖子以及回复的帖子信息，社区界面展示如图5.12所示。图5.12社区界面图点击底部的“+”号按钮后可以进入发帖界面，输入上动态内容后点击“发表”按钮后即可发表成功。图5.14发布动态界面图5.9预期时长点击底部“我的”菜单后中的“预期时长”菜单后根据时间来查询并统计出自己的学习内容的预期时长，预期时长界面展示如图5.15所示。图5.15预期时长文字界面图点击“图表说明”按钮后饼状图的形式统计出各学习内容的预期时长所占比。图5.16预期时长饼状图界面图5.10学习时长点击底部“我的”菜单后中的“预期时长”菜单后根据时间来查询并统计出自己的学习内容的实际学习时长，学习时长界面展示如图5.17所示。图5.17学习时长文字界面图点击“图表说明”按钮后饼状图的形式统计出各学习内容的实际学习时长所占比。图5.18学习时长饼状图界面图6系统测试6.1代码的优化在页面的设计过程中,会有很多相同功能的重复性的代码，开始为了能快速搭建页面,没有考虑将这些公共样式可以封装成组件,没有考虑到代码的复用性,造成代码的冗余。因为这些冗余的代码会影响到我们页面的读取速度，并且一个小程序的上限大小为2.0MB,所以在项目后期，我对css样式及Html5等进行了封装重构页面,大大减少了代码大小,使页面加载更加快捷。在项目中,因为页面数据是通过setData来将数据渲染到前度那页面中,但是频繁的使用会增加脚本的编译执行时间,占用线程,因此我通过改变前端样式结构,减少对setData的调用。其次图片资源主要性能问题在于大图片和列表图片上，目前正常的一张图片往往在几MB之上，对于小程序来说并不是十分友好，因此需要对图片进行压缩，存储在服务器，减少本地图片，减小图标大小等。6.2代码调试相比其他代码调试,微信小程序对于开发者还是相对友好的,在开发者工具中,我们可以直观的在左侧模拟手机显示中查看自己代码的效果,同样也可以扫码在手机端查看,这样极大程度上帮我们对于是否对不同手机的兼容性有了直观的展示,并依此修改Bug,做好兼容处理。后期，我尝试将项目上线这样有更多的用户可以查看，并且反馈页面或者某些功能的不足并且提供良好的建议，很大程度上帮助我完善项目的开发，极大程度上减少了时间，是我的效率大大提高。在完成这个项目的过程中，我通过这些调试方法，来发现代码中存在的错误及不足，也通过这个开发者工具在开发的过程中直观地看到后台返回的数据，方便和帮助了自己的理解。可以说，bug是开发过程中必然存在的一部分，调试也是不可缺少的一个重要环节，这就要求我们自己静下心来，去慢慢通过代码逻辑来实现应有的功能。6.3测试用例授权登录功能测试：表6-1授权登录功能测试表测试名称测试功能操作操作过程预期结果测试结果授权登录模块测试正确使用自己的微信号授权登录使用自己的微信号授权登录点击“我的”中“登录”按钮提示微信授权的登录，点击确认按钮。授权成功正确设定目标功能测试：表6-2设定目标功能测试表测试名称测试功能操作操作过程预期结果测试结果设定目标模块测试正确输入自己的名称+日期，完成设定目标输入自己的名称+日期信息点击底部的“我的”模块中的“设定目标”按钮后，可以输入上自己的名称+日期来设定目标设定目标成功正确社区交流功能测试，如下表所示。表6-3社区交流功能测试用例表用例名称测试功能操作操作过程预期结果测试结果社区交流模块测试正确输入自己的动态内容，完成发布动态。输入自己的动态内容学生点击底部的“社区”菜单中点击“+”按钮后根据提示输入完整的动态信息，然后点击“发表”按钮。发布成功。正确去学习呀功能测试，如下表所示。表6-4去学习呀功能测试用例表用例名称测试功能操作操作过程预期结果测试结果去学习呀功能模块测试去学习的正常情况开始学习当创建完自己的学习预期后会自动进入到未就坐界面，初始状态为“未就坐”并且结束按钮是灰色的，开始按钮是绿色的。开始学习成功正确去学习呀功能模块测试退出学习的正常情况退出学习点击“结束”按钮后需要输入退出本次学习的退出理由并点击“确定”进行保存。退出学习成功正确6.4测试结果经过对基