《基于微信小程序的语言学习平台的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于微信小程序的语言学习平台的设计与实现.doc（43页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、摘要 随着互联网科技的迅速发展及智能手机的广泛使用，移动学习成为现代教育的新潮流。传统学习模式中，学习主要依赖书本习题册等资料，厚重且不方便携带。智能手机普及后，更多人选择使用APP手机软件作为工具辅助学习，如有道翻译官、不背单词、万题库等。但是这些APP占用内存，需要另外下载软件，功能单一，互通性弱，不能再一个软件上满足用户学习、练习、工具辅助等需求。而近年兴起的新潮流微信小程序，既可以与微信账号进行信息互通，又无需下载独立软件。以微信小程序作为实现平台，开发一款轻便、实用的学习平台。基于微信小程序的语言学习平台，秉承便利、简洁、实用为原则，以及尽可能满足用户学习的需求，通过使用微信小程序特
2、有的wxml和wxss技术开发视图层，运用JavaScript技术设计并实现逻辑层，使用微信小程序自带的云开发后台系统管理数据，以及调用微信平台提供的API接口设计并实现。本项目根据分析用户需求，主要实现“翻译工具”、“课程学习”、“习题训练”、“生词记录”等功能，集学习与练习于一体，一改传统模式中书本套题册等纸质书本带来的不便，让用户轻松学习，满足学习需求，提高学习效率。关键词：微信小程序 云开发 学习平台 单词管理 试题练习 Abstract With the rapid development of Internet technology and the wide use of smar
3、t phones, mobile learning has become a new trend of modern education. In the traditional learning mode, learning mainly depends on books, exercise books and other materials, which is thick and inconvenient to carry. After the popularity of smart phones, more and more people choose to use app mobile
4、software as a tool to assist learning, such as a translator, not memorizing words, ten thousand question bank, etc. However, these apps occupy memory and need to download additional software, which is single in function and weak in interoperability, and cannot meet the needs of user learning, practi
5、ce, tool assistance, etc. in another software. In recent years, the new trend of wechat small programs can communicate with wechat accounts without downloading independent software. Take wechat small program as the realization platform, develop a light and practical learning platform.The language le
6、arning platform based on wechat applets adheres to the principle of convenience, simplicity and practicality, and meets the needs of users learning as much as possible. By using the unique wxml and wxss technology of wechat applets to develop the view layer, using JavaScript technology to design and
7、 implement the logic layer, using the cloud with wechat applets to develop the background system management data, and calling wechat platform to provide Design and implementation of API interface.According to the analysis of users needs, this project mainly realizes the functions of translation tool
8、, course learning, exercise training, new word record, etc., which integrates learning and practice. First, it changes the inconvenience brought by paper books such as book set book in the traditional mode, so that users can easily learn, meet the learning needs and improve the learning efficiency.K
9、ey words： Wechat applet Cloud development Learning platform Word management Test exercise目录1. 绪论11.1背景介绍11.2开发目的21.3项目意义22. 需求分析及设计42.1用户需求分析42.2市场需求分析42.3模块功能设计52.3.1首页翻译52.3.2课程学习52.3.3习题练习62.3.4资讯功能62.3.5个人中心功能62.4开发平台72.5数据库设计73. 详细设计93.1首页翻译功能实现93.2课程学习页113.2.1点赞收藏功能的实现123.2.2评论功能的实现133.3资讯功能页1
10、43.3.1资讯列表143.3.2资讯详情153.4个人页153.4.1打卡功能163.4.2生词本173.4.3收藏183.5习题练习页193.5.1单词193.5.2听力题223.5.3阅读题233.5.4翻译写作题263.5.5计时类题目273.5.6套题练习274. 项目测试294.1 兼容性测试294.2 真机测试294.3 功能测试304.3.1课程学习发表评论功能测试304.3.2习题判断功能测试314.3.3计时器功能测试324.3.4生词本功能测试345. 总结与展望365.1总结365.2展望36参考文献37致谢381. 绪论1.1背景介绍随着全球化和科技的发展，人们不断提
11、升自我价值，只学习母语并不能满足人们的需求。相比以往，学习外语不再是奢侈的进修学习课程，当代的学生甚至要求至少学习一门外语。习近平总书记曾多次强调：“把学习作为一种追求、一种爱好、一种健康的生活方式。”中国亦有一句俗语：“活到老，学到老”。由此可见，学习是十分重要的一件事。当前，外语复合型人才的分布呈现分布不均的现象。外语复合型人才的知识结构主要来自外语类课程与经济、贸易、金融、新闻等与文、法、经济类学科。而外语和理工科的复合结构长期不受重视，导致当前经贸和商法的文科复合型人才泛滥，工程机械等电子工程类专业复合型人才缺乏。1此外，当代学生很多存在学习不积极的情况。一方面，学生学习积极性低下。据
12、调查，学生平均每天拿出来学习英语的时间只有半个小时左右。大学生对外语的重要性认识比较充分, 但实际精力的投入不足, 只有42.5%的学生能有每周46小时的学习时间, 能做到有7小时以上学习的不到15%。2。另一方面是由于各大出版社印刷的种类繁多的辅导书籍和各式各样的练习题册让人眼花缭乱，有些书籍还十分厚重，不方便携带，导致学生学习需求受到约束。在经济全球化竞争的进程中,中国相关政府部门和各大企业需要大量符合国际标准的人才,因此需要加强外语培训,引入国际化的考核标准,衡量在职员工在非母语语境下的交际能力和沟通能力。3综上所述，如何能够调动学生积极性、提供方便的学习资源成为首要目标。“微课”是指以
13、新课程的标准及教学实践要求, 主要通过教学视频的形式, 反映教师在课堂教学过程中针对某个知识点或教学环节而开展教与学活动的各种教学资源有机组合。4“微课”是针对资源类型传统单一的局限性而发展起来的一种新的教学资源和应用模式。这种模式的学习能够让教学模式从以往在课堂上受空间、时间的限制而变得更加自由。用户既可以在线观看教学视频、查看课件，也可以下载保存到各种多媒体数码终端，实现移动远程听课和个性化学习。基于轻服务类型的微信小程序则能带给用户更轻便的服务，微信用户只需要通过搜索或扫描小程序二维码即可使用，其具备“即取即用、轻巧便利、随时可关、无需装卸”四大特性，这使得小程序成为一种去客户端化的轻量
14、级应用。 将学习外语与小程序的结合是符合时代需求和移动学习潮流的尝试，本设计的开发同时具有以下意义：从微观层面来说，本设计能够帮助随时随地进行语言学习；提供用户相关课程，使用户能提升自我价值。从宏观层面来看，本设计响应小程序开发潮流，使用轻便技术，改善现代人生活。1.2开发目的语言，作为人们生活沟通交流的重要工具，在全球化的世界中有着必不可少的作用。传统英语教学，以教材为主，并结合英文词典和英文报刊杂志，通过收听英文广播来巩固英语的听说读写能力。在智能技术的成熟发展下，如今的英语学习方式更加多元化，从网站、微博、微信及APP等都能获取大量的英语学习知识，并成为英语学习不可或缺的一种辅助方式。5
15、随着移动互联网的迅速发展和智能手机的普及，移动学习成为现代教育方式的新潮流，通过连接互联网和使用智能手机等数字媒体，获取教学资源和信息。相较于其他的学习形式，移动学习更加便捷、个性化和多样化。6因此，开发一项基于微信小程序的语言学习平台的项目是必不可少且极其重要的。1.3项目意义社会存在不少因文化差异引起的误会，当两个语言不同又相互不熟悉的人在一起聊天，多多少少都会产生一些笑话。人们总是会下意识地以自我为标准，用自己的价值观与文化准则来衡量他人的言行和思想，一旦与他人的言行和思想不和甚至产生歧义，就会引发各种交际困难、误解，甚至仇恨。这种现象，称之为文化迁移。7通过学习一门外语，可以减少因文化
16、差异带来的文化迁移所带来的不必要的误解或仇恨。基于互联网+的开发能大大改变学习上的拘束。传统模式下，老师与学生的关系束缚在讲台与教室里，学生需要按照时间到指定的地点听课学习，不懂就只能在特定的时间进行提问解答。而如今，在互联网的支持下，师生之间打破了时间空间的局限，真正实现了时空自由、学习自由。学习成为随时随地的事情，只需连接互联网就可以随心学习，不需要再依赖课堂和书本，不需要再束缚在小小的教室里，老师与学生的距离也通过网络的连接变得更加亲近。8语言学习平台是一款自主学习的系统，系统包括词句翻译、课程理论学习、套题练习、新闻资讯等功能，软件中各模块的操作界面设计简单，但具有实用性，用户可在短时
17、间内掌握使用方法。系统中的功能多样，简简单单一台手机就可进行学习、练习等。基于微信小程序平台的开发，大大节省空间和金钱，一改以往书本套题等纸质书籍造成的浪费和不便。只要安装微信客户端，只要有网络，无论何时何地，都可以使用该学习平台，无需再购买多本书籍或下载多个APP。2. 需求分析及设计2.1用户需求分析近年来，世界全球化的发展拉近了地球各国之间的距离，每一个国家之间的来往更加的亲密。中国凭借世贸、奥运会、世博会等盛会，一次又一次地走进全世界的视野中，越来越多的人走进来，也越来越多的人走出去。国内掀起一波又一波的外语狂潮，人们前仆后继地希望实现自我价值的提升，外语人才再一次受到全社会的关注。但
18、是各大出版社印刷的种类繁多的辅导书籍和各式各样的练习题册让人眼花缭乱，有些书籍还十分厚重，不方便携带。随着互联网的兴起，互联网+的技术越来越先进，尤其是基于轻服务的小程序技术，已经相当成熟，无需耗费时间人力去开发完整的移动端应用。用户不需要在应用商店里下载应用，在微信里打开即可使用，对用户来说非常方便。微信运用于移动学习领域, 具有良好的使用体验、庞大的用户群体和方便的传播平台, 为移动学习者提供了更多的学习选择和更加丰富的交流方法。9因此，基于微信小程序设计一款方便又实用的语言学习系统，提供词句翻译、课程学习、套题练习、新闻资讯等多方面功能，可以使用户只需手机和网络就能随时随地的学习，改变辅
19、导书和习题册带来的不便和限制。2.2市场需求分析微信是中国网民用户人数最多、最经常使用的“连接型”APP, 除了即时通信外, 其衍生出来的社交服务朋友圈、信息阅读、服务订阅号以及微信支付等已经高频度、深层次地渗透进了网民日常生活。10在这个信息爆炸的时代，手机应用软件下载次数最多的软件，微信独占鳌头，拥有庞大的活跃用户群体。Talking Data移动数据研究中心数据显示, 小程序自上线以来, 用户数量始终呈现增长态势, 用户增长率在4月份就已经达到峰值, 虽然从5月起，小程序用户增长速度有所下降，逐渐平稳趋于理性，但每个月仍有约40%的用户增长，7个月的时间，小程序用户共增长了13倍。112
20、016年一季度, 微信每月活跃的账户达8.06亿，几年来, 微信的功能不断得到改善和发展，相继推出订阅号、服务号、微信支付等功能。不断强大的微信已经成为手机上必不可少的应用软件。12大学生是微信用户群体中最重要的一部分，他们是年青一代的代表，容易接受新事物，敢于尝新。正因为拥有庞大的年青一代的用户群体， 微信也成为移动互联网环境下一个新的学习平台。13相较目前开发软件使用较多的APP与小程序, 也有很大的区别。APP在用户体验上有明显的的优势，他能带给用户更好的使用感，但要想使用APP，需要事先安装应用程式，耗费流量，同时还会占用手机有限的内存空间。这种约束大大影响了APP的发展，其产生的麻烦
21、甚至超出APP原有的优势条件，人们更是少的安装APP应用程式。而微信小程序有着节省空间，无需浪费流量，即用即走的特点。对于小程序开发者而言，开发简单，开发成本低，节省人力、物力、财力；对于推广者而言，小程序拥有庞大的微信用户群体，更易推广、方式更简单、更节省成本；对于用户而言，省流量、省空间、省内存无疑是最大的优点，这也不难理解为什么小程序的发展能够如此迅速。142.3模块功能设计根据分析用户需求和系统需求，小程序共具备翻译、课程学习、习题练习、资讯平台、个人中心等五个模块,系统功能图如图2-1所示。图 2-1 系统功能结构图2.3.1首页翻译首页主要给用户提供词句翻译功能，用户通过使用页面的
22、文本输入框传输文本，翻译结果在下方文本框中显示。为了满足用户的翻译需求，在输入框的上面设置有切换语言的页面，用户可以选择需要翻译的目标语言。同时加入历史记忆功能，对用户进行过翻译的词句进行记录，方便用户使用。2.3.2课程学习课程学习分为文章学习模块和视频学习模块，用户可通过文章或视频学习相关知识。文章视频详情页中有点赞收藏功能，用户可以对感兴趣的文章或视频进行收藏，方便查看。同时详情页面还有评论功能，用户可以自由发表对文章或视频的想法看法。2.3.3习题练习习题练习分为套题练习和专题训练模块，页面用过使用类似九宫格样式进行布局，每一个区域入口都十分清楚，方便用户选择。在套题练习模块，用户可自
23、由选择模拟套题进行测试训练。在专题训练模块中，用户可自由选择练习题目，如背单词，听力训练，阅读题训练，翻译训练或写作题训练等，部分题目还设置有计时功能，用户可以选择进行日常训练或是计时加强训练。背单词页面分为列表页和详情页，用户通过点击不同的单词列表进行针对性的练习。详情页面加载只显示单词及音标部分，同时有两个按钮“查看解析”和“下一个”。当用户点击“查看解析”按钮时，隐藏的单词解析会显示，“查看解析”按钮也会转换成“加入生词本”，当点击“加入生词本”按钮时，当前页面加载的单词信息就会添加到“个人中心”-“生词本”页面中。当用户点击“下一个”按钮时，页面会重新加载新的单词。听力训练通过音频播放
24、器及页面滑块组成。滑块中主要存放问题及选项，同时还设置有“提交”按钮，当用户答题完毕后点击“提交”时，系统会自动识别用户的答题结果并进行反馈，此时“提交”按钮会转换为“下一题”，当点击“下一题”按钮时，页面会重新进行加载。阅读训练主要通过可滚动视图块及滑块组成，可滚动视图块用于加载题目的文章部分，用户答题时可上下滑动进行看题，占用页面少，同时方便用户查看。滑块的组成与听力训练部分相同，用于存放题目及选项。翻译训练及写作训练页面组成与单词页面相似，页面加载时只显示题目部分，同时设置“参考译文”按钮，当点击“参考译文”按钮时，隐藏的译文部分会显示，此时“参考译文”按钮会变成“下一题”按钮，再次点击
25、“下一题”按钮，页面会重新加载新的题目。2.3.4资讯功能资讯给用户推送旅游类、新闻类等资讯，页面样式使用瀑布流进行布局。资讯详情页同样有点赞、收藏、评论等功能操作，用户可对自己感兴趣的文章进行收藏、点赞，同时发表对文章的观点看法。2.3.5个人中心功能个人中心首页有设置用户的头像及用户名，用户在此页面可进行签到打卡、管理生词本、查看收藏等操作。签到打卡主要用于用户对登录次数的管理，方便用户查看当月登录的次数。页面由记录文本、日历，以及一个签到按钮组成，当用户点击签到后，记录文本会同步统计打卡天数并显示到页面上。生词本用于记录用户在背单词时遇到的生词，以折叠列表的形式分类展示。每一个单词都会显
26、示单词及其注释，且设置有删除键，当用户熟记时可点击删除键删除该单词。收藏列表主要记录用户在阅读文章或观看视频进行学习时收藏记录的页面。置顶设置有“文章”和“视频”切换器，方便用户切换页面。收藏列表中的文章或者视频均可通过点击进入详情页面。2.4开发平台本小程序使用微信小程序开发者工具进行项目的开发与设计。微信小程序是发是一种新的开发技术，相比起原生APP开发，开发者能大大缩减开发时间完成一个小程序。根据微信小程序的官方文档，小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。15开发者在使用微信开发者工具前需要在微信公众平台注册小程
27、序账号，一般选择使用个人主体，无需缴纳任何费用，唯一要求是年满18岁的中国公民。注册完成才能进行后续的代码开发及提交工作。微信开发者工具中每一个页面基本上由wxml、wxss、js和json构成。Wxml文件与HTML页面相似，用于构建当前页面结构；wxss是在CSS语言的基础上衍生而成，用于设置当前页面的样式效果。逻辑代码与普通web网页相同，都是使用JavaScript语言。开发者需要通过使用微信开发者工具进行微信小程序的代码编写、编译、运行、界面和逻辑的调试。2.5数据库设计云开发后台为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API
28、 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。16自带JOSN数据库的功能给很多不熟悉MySQL语言的开发者提供便利，数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合，集合可看做一个 JSON 数组，数组中的每个对象就是一条记录，记录的格式是 JSON 对象。根据需求，该项目需建九张数据表：文章课程列表、视频课程列表、资讯文章表、签到打卡表、错词表、听力题表、信息匹配题表、选词填空表、仔细阅读表。在微信小程序自带的云开发后台中创建以上各表，通过前端微信小程序链接到后台并进行操作。3. 详细设计3.1首页翻译功能实
29、现首页翻译功能主要由翻译主页，语言转换页及历史记录页组成。翻译主页由两个文本框组成，用户在输入文本框中输入的数据，通过API接口上传后返回的翻译结果会在译文文本框中显示。页面设置如图3-1所示。语言转换页以列表形式，用户在页面中选择的语言会同步显示在主页中。页面设置如图3-2所示。查看历史页由列表组成，用于存放用户曾翻译过的词句记录。页面设置有“清空历史”按钮，点击时会将页面所有的历史数据清空，当用户再次使用翻译时，文本及生产的译文会再次显示在历史页面中。页面设置如图3-3所示。 图 3-1翻译主页面 图 3-2语言转换页面 图3-3历史记录页面首页翻译功能主要通过连接百度翻译提供的API接口
30、进行，上传文本并生成获取译文。调用百度的配置信息存储在api .js中，appId是注册的百度的唯一标识，key是与百度调用接口所需要产生的验签key,此处还应用了md5.min.js，该文件主要是用来做加密和解密的，双方将特定数据，比如appId和key等信息，做一个加密处理传给对方，对方通过特定方式解密验签，从而方式被抓包篡改信息，也提高了安全性。实现代码如图3-4所示。图 3-4 api.js部分代码翻译语言的转换方法存放在change.js中，当点击选择翻译的目标语言，代码会将数据同步修改到小程序的缓存以及传输给首页值，缓存后的语言用于在请求百度接口时，直接告诉百度需要翻译的目标语言，
31、并携带参数跳转到首页。实现代码如图3-5所示。图 3-5 change.js 部分代码index首页是对整个翻译流程进行操作，当用户在文本框中输入内容，小程序会通过一个数值记录用户输入的value内容。当文本框失去焦点时，小程序会将获取到的文本内容自动调用百度翻译的方法传递参数，翻译失败则显示消息提示框，提示用户翻译失败；成功则直接将得到相应的结果后将结果展示到译文的视图区域，并且将结果进行本地缓存。实现代码如图3-6所示。图 3-6 文本进行翻译并本地缓存部分代码在首页翻译的结果都会通过本地缓存显示在历史记录页面中。若用户需要清空历史记录时，小程序会直接赋一个空的数组给本地缓存的数组中，同时
32、将本地缓存的记录清空。实现代码如图3-7所示图 3-7 显示本地缓存及清空本地缓存代码3.2课程学习页课程学习页由文章课程和视频课程组成，两个页面通过swiper滑块视图容器进行横向切换。每个页面下还有一个纵向的swiper滑块视图容器用于不同类型课程课程的展示。页面设置如图3-8、图3-9所示。 图 3-8文章列表页面 图3-9视频列表页面文章课程和视频课程的获取方法主要通过cloud.database获取云开发数据库中文章课程集合中的数据，以列表的形式显示在页面上。当用户点击查看详情时，后台会获取到点击视图中对应的详情信息，并连接到云开发后台数据库的课程集合中，以详情数据对应的id作为查询
33、数据库的依据。查询成功后将返回的数据显示在详情页面上。云后台数据如图3-10、图3-11所示。图 3-10 文章云开发后台数据图 3-11 视频云开发后台数据 3.2.1点赞收藏功能的实现3.2.1.1点赞功能当用户认为文章或视频的内容感兴趣，可点击点赞图标进行点赞。图标会通过三元判断符判断当前文章的点赞为true或false，并进行反值赋值和动态改变图标。三元运算符实现代码如图3-12所示。图 3-12 通过三元运算符动态修改数据但由于云开发中的限制，用户只可读写数据，不可改写，因此还需要插入云函数代码对数据库进行修改。通过js获取到操作的行为和文章或视频的id，上传到云函数中进行异步连接数
34、据库和更新数据库的操作，同时将结果返回给js文件中，如此便可修改到数据库中点赞的状态，实现点赞功能。实现代码如图3-13所示。图 3-13 点赞云函数部分代码3.2.1.2收藏功能收藏功能的逻辑与点赞功能相同，通过改变数据库中的值进行功能的实现。在js文件中获取操作的行为和文章或视频的id，上传到云函数中进行异步连接数据库和更新数据库的操作，同时将结果返回给js文件中，如此便可修改到数据库中收藏的状态，实现收藏功能。实现代码如图3-14、图3-15所示。 图 3-14 收藏js代码 图 3-15 收藏云函数部分代码3.2.2评论功能的实现用户输入的评论内容主要通过界面中的文本框获取，将内容存放
35、在一个空数据中。如果用户输入的内容为空，系统会判断内容的长度为0，此时会显示一个消息提醒框，要求用户输入评论内容。实现代码如图3-16所示。图 3-16 获取评论内容及判断长度重新定义一个评论内容的数组，用于存储用户名及评论的内容，通过push操作将内容添加到评论的数组中，但此时评论并不会同步更新到数据库中。这是因为用户并非集合的创建者，只可读取，不可改写。因此同样需要加入云函数进行数据的修改与更新。操作成功后，新的评论数组会重新赋值到界面显示的评论数组中，用于获取用户输入内容的数据会重新赋一个空值，相当于清空文本框的内容。实现代码如图3-17、图3-18所示。 图 3-17 添加新的评论到数
36、组中 图 3-18 调用云函数更新数据3.3资讯功能页资讯主要用于用户日常消遣阅读用，包含各类新闻、文化、旅游的文章。页面样式采用瀑布流样式布局。3.3.1资讯列表资讯页的文章列表主要通过连接到云开发后台中的资讯文章表获取数据。将获取到的数据中的标题与图片动态显示在页面上。为了保持页面的美观，列表中的图片都使用宽度不变，高度自动变化，保持原图宽高比例不变的缩放模式。页面设置如图3-19所示。图 3-19资讯列表页面3.3.2资讯详情资讯页面的详情与文章课程页面详情获取方式相同，当用户点击查看详情时，后台会获取到点击视图中对应的文章信息，并连接到云开发后台数据库的资讯文章的集合中，以文章数据对应
37、的id作为查询数据库的依据。查询成功后将返回的数据显示在详情页面上。资讯详情页面同样有点赞、收藏和评论的功能。页面设置如图3-20所示。图 3-20资讯详情页面 3.4个人页个人页由个人信息卡、签到打卡、生词本、收藏记录以及意见反馈组成。信息卡中的昵称通过在获取在app.js页面的全局变量globalData中的用户信息userInfo，并将userInfo中的昵称和头像显示在主页面上。个人主页页面设置如图3-21所示。图 3-21个人主页页面设置3.4.1打卡功能签到打卡页面可用于用户记录当月使用该小程序的次数，通过获取当前系统的日期时间建立一个日历视图。根据数据库中打卡签到的数据表获取当月
38、用户签到的天数数组，已签到的日期标注为红色，错过未签到的日期标注为灰色。页面设置如图3-22所示。图 3-22打卡页面设置当用户点击签到，系统会判断当日是否已经存在数组中，如存在则提示用户已签到，不存在则将当前日期添加到数组中。最后通过获取日期数组的长度，显示在页面上，则为本月已签到的天数记录。实现代码如图3-23所示。 图 3-23 添加打卡日期部分代码3.4.2生词本生词本用于记录显示用户在背单词练习中遇到的易遗忘、不熟悉的单词，按照分类以折叠列表的形式。每个单词都有一个删除视图，当用户觉得该单词已经熟记，不需要放在生词本中时，点击删除，小程序会弹出对话框询问用户是否删除该单词。页面设置代
39、码如图3-24所示。图 3-24生词本页面设置当用户点击“是”后，系统会获取到当前单词的id，根据此id对数据库中错词表对应的id进行删除。操作完成后重新加载页面，相当于重新刷新一次页面，让列表中的单词更新。实现删除单词代码如图3-25所示。 图 3-25 删除单词部分代码3.4.3收藏收藏页同样由文章视图块和视频视图块组成，两个页面通过使用顶部swiper滑块视图容器进行横向切换，方便用户查看。页面设置如图3-26、图3-27所示。 图 1-26文章收藏列表 图3-27视频收藏列表文章和视频的收藏列表主要用于方便用户查看自己已收藏的文章。根据文章课程列表中收藏为“true”进行集合的查询，将
40、查询到的数据存放在一个数组中，并将该数组中的数据加载到页面中。当用户点击查看详情时，后台会获取到点击视图中对应的文章数据信息，并连接到云开发后台数据库的文章课程集合中，以文章数据对应的id作为查询数据库的依据。查询成功后将返回的数据显示在详情页面上。实现代码如图3-28所示。图 3-28 携带id作为参数跳转到详情页面3.5习题练习页习题练习页是作为习题练习的入口，顶部有可以存放广告或活动消息的轮播图，由swiper滑块视图容器装载。各项专题练习入口以视图容器view装载，父容器通过设置样式justify-content属性，使子容器两端对齐，子容器长度设置为50%，各占父容器的一半。页面设置
41、如图3-29所示。图 3-29习题页面设置3.5.1单词根据需求，单词数据一般都是固定的，因此可以选择直接编写js文件，用一个数组列表将所有的单词、音标、解析存储在一起。用户从单词入口中进入，首先跳转到单词分类的列表中，每一个按钮都携带一个title数据，通过传递title数据链接到对应的js单词数组表中。实现代码如3-30所示。图 3-30 按钮携带参数进行跳转代码背单词页面分为列表页和详情页，用户通过点击不同的单词列表进行针对性的练习。详情页面加载只显示单词及音标部分，同时有两个按钮“查看解析”和“下一个”。页面设置如图3-31所示。当用户点击“查看解析”按钮时，隐藏的单词解析会显示，“查
42、看解析”按钮也会转换成“加入生词本”，当点击“加入生词本”按钮时，当前页面加载的单词信息就会添加到“个人中心”-“生词本”页面中。当用户点击“下一个”按钮时，页面会重新加载新的单词。图 3-31 单词页面背单词的详情页面中，通过获取data目录下与title携带的参数命名相同的js文件，将获得的数据中list保存。单词的主页面只显示单词与单词的读音。为了使用户更好地记忆单词，系统会通过使用Math.random()方法随机出现列表中的任一单词。实现代码如图3-32所示。图 3-32 获取单词列表并随机出现单词 部分代码如果用户对页面中的单词不熟悉或想查看正确解析，通过点击“查看解析”按钮显示注
43、解，此时原为false的注解视图会转换为true，页面中就可以出现单词的注解。当用户点击“下一个”按钮时，title中的值会重新再赋值给一个新的title参数，并在重新加载页面时使用新的title参数进行链接，生成单词。实现代码如图3-33所示。 图 3-33 显示注解及进入下一题部分代码如用户在点击“查看解析”后，仍认为该单词陌生或不熟悉，可以点击“加入生词本”按钮。点击按钮后，后台先会获取到当前出现在页面中单词信息，并连接到云开发后台数据库的生词集合中，以单词作为查询数据库的依据。如果查询后返回的数据为空，则说明生词本中不存在该单词，数据库将进行添加数据操作，将获取到的单词信息存储在集合中
44、，操作成功后会显示消息提醒框，提醒用户单词添加成功；如果查询后返回的数据不为空，则说明生词本中该单词已存在，数据库将进行更新操作，将获取到的单词信息覆盖已经存在集合中的单词信息，操作成功后会显示消息提醒框，提示用户该单词已存在单词本中。所有用户添加的生词都会按照分类显示在“个人主页”-“生词本”中。实现代码如图3-34所示。 图 3-34 添加生词本部分代码3.5.2听力题英语四六级听力题共有25道题目，题型分为短篇新闻、长对话以及听力篇章三部分。界面设计上，听力音源使用音频组件audio播放，题目及选项使用swiper滑块视图容器装载，每一个选项都是用radio单选框进行选择，用户在听听力习
45、题时，可通过滑块视图容器查看对应的题目进行答题。页面设置如图3-35所示。图 3-35 听力页面设置用户从听力入口进来后，首先选择四级听力题或六级听力题，小程序会根据用户的选择，携带指定的参数跳转到题目页面，然后根据参数进行后台听力题表的数据查找。查找完成后，将返回的数据存放在一个数组中，并取该返回值的长度，使用Math.random()方法获取随机数，详细的题目就根据随机生成的数值获取。实现代码如图3-36所示。图 3-36 随机获取题库题目部分代码3.5.3阅读题英语四六级选词填空题共有10道题目，通过阅读文章，填补文章中对应位置上缺失的单词完成题目。界面设计上，原文通过scroll-vi
46、ew可滚动视图区域进行封装，题目及选项使用swiper滑块视图容器装载，每一个选项都是用radio单选框进行选择，用户在作答选词填空题时，可通过滑块视图容器查看对应的单词选项进行答题。页面设置如图3-37所示。图 3-37 选词填空页面设置用户从阅读题区进入列表后，首先选择四级题目或六级题目，再根据需求选择是否进行计时训练答题，本节为选择不计时训练答题。小程序会根据用户的选择，携带指定的参数跳转到题目页面，然后根据参数进行后台选词填空题表的数据查找。查找完成后，将返回的数据存放在一个数组中，并取该返回值的长度，使用Math.random()方法获取随机数，详细的题目就根据随机生成的数值获取。实
47、现代码如图3-38所示。图 3-38 随机生成题目部分代码选词填空题的题目在原文中，因此在显示题目选项的swiper滑块视图容器只需要使用radio单选框循环输出所有的选项即可，每一个swiper滑块视图容器中输出一次，一共10次。实现代码如图3-39所示。图 3-39 选项布局代码在设置swiper滑块视图容器时，通过获取容器的index下标值生成对应页面的id值，id值加一后会显示在页面上，方便用户知道当前页面的选项对应的是哪一个空格中的题目。每一个选项均设置value值，对应问题选项中的A、B、C、D等选项 。在js文件数据前设置一个空数组，当用户点击radio单选框组件时，小程序会获取到当前选项的value值与当前题目所在的swiper滑块试图容器的index下标值，通过使用push添加到空数组中下标与index下标相对应的数据中。实现代码如图3-40所示。图 3-40 获取下标值及选择答案保存为数组部分代码当用户点击提交时，小程序会判断用户提交答案的数组长度是否与正确答案的数组长度相同