基于微信小程序的移动学习平台的设计与实现.docx

《基于微信小程序的移动学习平台的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于微信小程序的移动学习平台的设计与实现.docx（40页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、摘要 本项目将要设计及制作一个移动学习平台微信小程序，该小程序的 主要功能是为用户提供一个可在线观看关于数学和英语的视频学习资料 的平台。小程序的设计及实现过程中所使用到的软件工具包括微信开发 者工具（小程序编写及后台云数据库）、思维导图工具（页面交互流程理 解）。 本项目中所涉及到的流程包括有：小程序功能的构想、使用云开发数 据库上传视频和图片、轮播图功能的实现、分区列表的设计、通过点击 事件实现带参数跳转至视频详情页、视频详情页的数据获取与展示、收 藏功能的实现、发表评论功能的、收藏与评论状态的数据库实时更新、 模糊搜索功能的实现、程序测试等。 关键词： 微信小程序 云开发 移动学习平台

2、视频播放 Abstract This project will design and implement a mobile learning platform base on WeChat mini program. The main function of this mini program is to provide a platform for users to watch learning materials about Math and English online. The tools used in the design and implementation of the min

3、i program include WeChat web devtools (Code design and Cloud Database), Mindjet MindManager (page interaction process flow chart). Work process involved in this project are: the idea of mini program functions, Upload videos and images by using Cloud Development Database, the design of Carousel banne

4、r, the design of partition lists, jump to video detail pages with parameters by click events, data acquisition and display of video detail pages, the design of add favorite function, the design of comment function, cloud database real-time update of favorite and comment status, the implementation of

5、 fuzzy search function, program test, etc. Key words:WeChat mini program Cloud development Mobile Learning platform Video playing 目 录 第一章 绪论 .1 1.1开发背景及意义 .1 1.2国内外研究现状 .1 1.3课题研究内容 .2 1.4论文的组织结构 .2 第二章 开发环境 .3 2.1开发工具的介绍 .3 2.2 项目结构介绍 .3 2.3 云数据库介绍 .4 2.3.1“数据库”页面 .4 2.3.2“存储”页面 .5 2.3.3“云函数”页面 .5

6、第三章 小程序需求分析 .6 3.1 程序整体需求分析 .6 3.2 云开发需求分析 .7 3.3 视频详情页的需求分析 .7 第四章 小程序功能实现 .8 4.1 从云数据库获取信息 .8 4.1.1建立视频数据信息存储列表.8 4.1.2小程序页面获取视频列表.9 4.2 首页轮播图 .10 4.2.1轮播图的意义 .10 4.2.2首页轮播图的实现 .10 4.3 分区页面导航栏 .12 4.3.1小程序底部导航栏 .12 4.3.2首页头部导航栏 .13 4.3.3遇到的问题与解决办法 .14 4.4 对应视频的视频详情页数据获取 .15 4.4.1带参数跳转至视频详情页.15 4.4

7、.2视频详情页数据获取 .16 4.4.3遇到的问题与解决办法 .17 4.5 收藏和评论 .18 4.5.1收藏功能的基本实现 .18 4.5.2收藏状态的服务器上传与同步 .18 4.5.3用户信息的获取 .20 4.5.4评论功能的实现 .22 4.5.5遇到的问题与解决办法 .24 4.6 模糊搜索 .25 第五章 小程序调试 .27 5.1 首页功能调试 .27 5.1.1推荐页轮播图 .27 5.1.2数学、英语专区页面 .28 5.2 视频详情页功能调试 .28 5.2.1视频详情页跳转与信息获取.29 5.2.2评论功能 .30 5.2.3收藏功能 .31 5.3 搜索功能调试

8、 .32 第六章 总结与展望 .33 参 考 文 献 .34 致 谢 .35 第一章 绪论 1.1开发背景及意义 随着时代与科技的创新进步，手机已然成为人们生活中不可或缺的一部分。现 在手机上只需要微信这一个软件，便能够在微信上享受到便捷的社交、购物、交 通、吃饭等多种服务1。微信作为一个公众平台，其面对的对象不仅仅是平民百 姓，它也是一个各个媒体、领域集中发布、运维的平台之一。 就目前形势而言，在微信的众多功能中，微信小程序的地位颇高，相较于传统 桌面端app，它具有体积小、运行快的优势，是目前为止应用领域最广泛、场景技 术能力最强，通过自身强大的微信入口，是移动场景下的超级链接工具2。 微

9、信小程序特色的云开发能为开发者提供原生的数据库与微信服务支持，无需 另外搭建服务器，减轻开发成本，吸引了一大批的个人开发者参与其中。 传统教育教学以广播电视和面授为主，随着信息技术的发展，越来越多的学生 在尝试借助诸如微信等移动应用进行移动学习3。 移动学习平台是指利用信息技术搭建的，能够为用户提供移动式学习体验的 软、硬件环境4。基于微信小程序实现的移动学习平台可以为用户提供真正意义上 的随时随地学习的功能。摆脱传统纸质教材的重量以及厚度的束缚，用户的日常出 行能够更加轻便，而采用视频教学的方式也能够为用户营造一种仿佛坐在课室里听 讲的临场感，同时还能够通过收藏夹来复习课程裨补缺漏，这在如今

10、人们快节奏的 生活中，是十分适合和满足大众需求的。 1.2国内外研究现状 微信小程序是近几年非常流行的一种应用，它开发成本以及开发门槛比app 低，它具有体积小、易使用的特点，需要的时候一点即开，不需要的时候也无需卸 载，能为用户的设备腾出更多的空间。各大视频网站诸如腾讯视频、爱奇艺、哔哩 哔哩等都拥有了自己的小程序。 对于轻度用户和潜在用户而言，微信小程序其随用随走的特性，以及在能为用 户提供近似于传统app 的舒适体验之余，免除用户下载软件的步骤，深受潜在用户 的爱戴，也进一步丰富了视频平台的表现形式5。 与此同时，网络授课的形式逐渐成为主流，被广大群众所接受，各类慕课在线 移动学习平台不

11、断涌现。移动学习和MOOC 教学等新兴学习方式为人们提供了随 身学习的可能，支持移动教学模式的学习平台是未来网络教育的发展趋势6。 因此，基于微信小程序开发一个可以在线观看学习视频的移动学习平台将会成 为未来的主流。 1.3课题研究内容 本次毕业设计所需要用到的软件为微信官方推出的“微信开发者工具”，移动 学习平台小程序的设计与实现主要是基于微信公众平台，采用了WXML、 JavaScript 和云开发技术。该小程序应该具备视频播放功能、课程分区、课程收藏 和评论等功能，为用户提供舒适的在外学习的体验。 本项目为开发一个移动学习平台小程序，该小程序主体为一个在线视频播放平 台。本项目将通过代码

12、来实现以下的功能： （1） 从云数据库后台获取视频列表。 （2） 首页轮播图。 （3） 通过点击列表中的视频封面来跳转至视频详情页。 （4） 视频详情页面根据数据id 从云数据库获取视频信息。 （5） 视频详情页的收藏与评论功能。 （6） 视频搜索功能。 1.4论文的组织结构 本论文分为六个章节用于介绍小程序项目的设计与实现过程，章节安排如下： 第一章：绪论。介绍了本课题的选题背景、开发意义、开发内容、国内外研究 现状以及论文的组织结构。 第二章：开发环境。介绍了项目开发所使用的到的工具、项目文件结构以及云 开发中个页面的用途。 第三章：小程序需求分析。介绍了小程序所包含的页面模块及交互流程，

13、以及 所需要用到的云开发的功能操作。 第四章：小程序功能实现。介绍了本项目小程序的主要功能实现过程。 第五章：小程序调试。介绍了小程序完成后的各页面功能的测试结果。 第六章：总结与展期。总结开发过程遇到的困难与收获，以及对未来的期望。 第二章 开发环境 2.1开发工具的介绍 微信开发者工具是由微信团队推出的一款专门用于开发微信公众号、微信小程 序的开发工具，该工具支持wxml、js 脚本等，同时还为开发者提供了云开发选 项，云开发为开发者提供数据库、存储和云函数等方便快捷的云端支持，同时还支 持api 的调用，省去了用户自行搭建数据库服务器的步骤。微信团队还提供了微信 官方文档，开发者能够从中

14、获取到小程序的语法、组件等重要信息指南。 每个开发者账号可以申请注册一个专属的AppID，在创建小程序项目时如果需 要用到云开发作为后端服务，则需要使用到该AppID。 小程序的整体框架分为逻辑层和视图层两大层面，小程序拥有自己的视图层语 言wxml 和wxss，以及基于JavaScript 的逻辑层框架，同时小程序还为视图层和逻 辑层之间提供了数据传输与事件系统7。 前端网站开发常见的HTML5、CSS3 变成了小程序自定义的WXML、WXSS， JavaScript 也相对于传统网站有所增删8。 2.2 项目结构介绍 一个小程序的主体部分主由app.wxss 公共样式表、app.js 小程

15、序逻辑、app.json 小程序公共设置这三个全局文件组成，它们对所有页面都是有效的9。 每一个微信小程序项目在创建后都会拥有多个默认的文件夹，如果启用了云开 发，则会额外多出一个cloudfunctions 文件夹，其中在开发中最常用到的主要是 images（存放图片素材）、pages（存放页面）这2 个默认文件夹，如图2-1所示。 EE doudlindions| hid 16 w = minigrogram J components J images 1 pages J style IS apps 3 app.json vam APD.WKSS ) siternap json 1 REA

16、DME.md project.configjson 图2-1 小程序项目结构 在app.json 文件中，我们可以进行全局配置，如在“pages”中就包含了pages 目录下的所有页面文件夹，我们可以通过新建一行“pages/XXX/XXX”来实现在 pages 目录下新建页面文件夹。除此之外我们还能够在app.json 文件下修改小程序 顶栏显示的文字以及创建底部导航栏tabBar。 而在pages 目录下的每个页面文件夹均包含有js（脚本）、json（页面配置）、 wxml（显示页面）、wxss（页面样式），其中wxml 和wxss 相当于网页开发的html 和css，代码大致通用。 2.

17、3 云数据库介绍 当项目创建时启用了云开发选项，我们便能够在项目开发界面通过点击“云开 发”按钮打开云开发控制台。微信默认为用户免费配给了5GB的服务器容量套餐。 在该控制台中我们能够清晰可视的了解到服务器情况，对于服务器的操作我们主要 用到“数据库”、“存储”、“云函数”。 2.3.1“数据库”页面 在“数据库”界面中会显示集合列表，开发者能够新建集合并添加记录，每一 个记录都有一个系统自动生成的“_id”字段，可在相关页面的js 文件中通过代码 来对云数据库进行“增删查改”等操作，如图2-2所示。 = kt oat A-bec “_id“; “Ee “roveri “cloud: hiba

18、10-45108. nasa” “videoisel”: 加 区 Ei TY = nl | Ld lL - SRR + 4 BA it DE 70 -TEE ao Aad -4bB-0731- 2d. i boafiedb-T3a-am0b-2 13-98. ik Oc 5AfFoc-d ed -ddcb-Ocbb-8d1. 1 = a 国 时 #5 faldwalus BRT AEIDE 一 3NFE “plennTh2-THIa-432- acce-Beduefaafaad ad MT “clase”: It TouShabieBIGD-4 306-001 7-cA_. Gsb- hot

19、10- 45 1ke- 1250521 208/418 fF Fr.” “introtice| TF(keR)=- Fh, FORAEI=F KX),FRe2)=-F(x). DFIR BENHAM Sait it 42heEfT-Efa2-433c-br10-103. ik 3373 Wah choz- 470 -BakN-8C. “pinglun: “contant:*11119, NNR . AALS. . userdcon:httpe. HehEE _KE ITT D344 -9707-00. Me HFRS Sci ASE A122 ETE fd _ikk QeT99T3-TBA T

20、IF- beda-Q2., _ik 20007ed 1- Jacke-4Be0-aui5-ge. “shouceng”: false nitla 154 和 “https 60s -hint16-451ke-1259521208 .tcb,qcloud ,LarEENAT ,. 图2-2 云开发“数据库”选项页面 2.3.2“存储”页面 在“存储”界面中，我们能够将文件上传到服务器中进行保存，每一个上传成 功的文件都拥有“下载地址”和“File ID”属性，比如当我们上传的是图片时，这 两个属性可以帮助我们在wxml 页面中将图片显示出来，如图2-3 所示。 ital open 10 he M

21、ETZ AVEWpIMNILRIL ena RI7 Hdd Chuck 15-45103 GOGH G4506- 125052 T, PUTA Clock Miod 1 been 0 dota Te 85h 16-45kE-1250521268 7 FIR / F有和 心 口 05od740edd7cn3sB547村dd fecu5 1481 frdech HRAZNS = (4372 Byte poi mapereg ERg *2ChB3 1903 195M Tbdde hd 351 Sibe0a- 1 106213 Te Sele TodB0esic. jpg jpg :1 p1481.p

22、g 有95999074TPEZEEe4D7380bcc1913341405057tjpPd chouck/HkA15-4515 DBih-heH16-45R6-1259521268 加met 1387 1.250, mm BeadTIa0b 148305 :1 NIT S4EEb Toc Vb Ve ddd COSTE Teg Cluck 16-4515 BBED-RAN 5-450 1250521266, FTRAMET 20005 1 4b The2 dd ATCOB 2947058 | FHT DecATACad FRE ”1 15-455 BBED A 15-4506 1250521

23、268, hit: 088b-NANg-45 RE 1235521, Lo 134 |， JPG ”1 ELLR213 heeded 7 Maze 14ds 134 COs, clouch/ Mica 16-4505 BEED ANS 45RE- 1250521268, EL AI0 bb 24 2050 C2 DSA TAO Co 32054 TIMOES2 aEfroafs1 45D Jeg Pskan = 74 1436308 bait ld Tea? B70 Vat = 1384433 790 mein CHOU MEAT EASES 6- 4505-12595 21260, IGA

24、TA Dead7 ca Frod408E200kret11481 图2-3 云开发“存储”选项页面 2.3.3“云函数”页面 云函数即在云端运行的函数，开发者可以在 cloudfunctions 文件夹中“新建 Node.js 云函数”，随后便会出现一个新的子文件夹，我们可以将函数编写在该子文 件夹下的index.js 文件中，并右键该文件夹，选择“上传并部署：云端安装依赖” 选项，来将云函数部署到云端服务器中，随后即可在小程序端进行调用，调用云函 数的方法为wx.cloud.callFunction()。 第三章 小程序需求分析 3.1 程序整体需求分析 移动学习平台小程序的系统主要包括以下

25、板块：首页、视频详情页、搜索页、 收藏夹页。 首页将包括有推荐页面以及数学和英语两个分区导航。 视频详情页面将包含视频播放模块、视频标题和视频简介显示、收藏按钮以及 评论区。 搜索页面则包含搜索栏、搜索结果显示模块。 收藏夹则包含收藏列表显示，如图3-1 所示。 | g2nE | | #E5E | EraWOE | 图3-1 移动学习平台小程序整体结构图 3.2 云开发需求分析 在本项目中云开发将用于存储学习资料视频文件、封面文件，以及建立集合用 于存储视频记录以实现页面的视频列表获取、视频信息获取以及收藏夹列表获取， 如图3-2 所示。 上 tile “class”:LE over”; BN

26、I ( “Flle “introduce”: RE Adar dk 图3-2 云开发功能结构 | ID”3 3.3 视频详情页的需求分析 视频详情页用于进行视频的播放、视频标题和简介的显示、视频收藏状态的显 示、评论列表的展示，而每一个视频的信息都是不一样的，所以我们需要在点击视 频列表时，获取对应的视频id，并将其传值到视频详情页，再根据id 从数据库在 查找相应地视频记录，实现对应视频信息的获取和页面展示，如图3-3 所示 SEE nd” | PES dh ale FV Bp ATH EC TR AE fd mA tS nny 图3-3 视频详情页信息获取流程 第四章 小程序功能实现 4.

27、1 从云数据库获取信息 在本项目中，由于视频资料和图片文件都是存放在云数据库中而非存放在本地 的，因此我们需要在前端的js 文件中通过代码来对云数据库中的数据进行调用。我 们以本项目中需要用到的视频列表信息的获取为例。 4.1.1建立视频数据信息存储列表 （1）首先我们在云开发数据库中新建了一个名为“video”的集合用于存放视 频信息，并将该集合的权限设置为“所有用户可读，仅创建者可写”。 （2）随后在该集合中添加新的记录，此时系统会为该记录默认生成一个文档 ID，该文档ID 存储在该记录的字段“_id”中。除此之外，我们为记录添加新的字 段，分别为： （a）“class”（类型为strin

28、g，用于记录课程的类型）； （b）“cover”（类型为string，用于存放图片的路径，该路径通常为云存储中 的文件属性中的“File ID”）； （c）“title”（类型为string，用于记录视频的标题）； （d）“introduce”（类型为string，用于记录视频的简介信息）； （e）“videoUrl”（类型为string，用于存放视频的路径，该路径为云存储中的 文件属性中的“下载地址”）； （f）“shoucang”（类型为boolean，用于判断收藏状态）； （g）“pinglun”（类型为array，用于存放评论数据）。 如图4-1 所示。 =id: 186a7b2-71

29、a-4932-acce-2edBOFA0FEAd class: HIE cover: cloud: /hk416-451k6.6086b-hi16-451k6-1259521268/3 Hf feaaf?. “F(e2)-F(n), Fla2)-F(-x), F(xs2)-F(-x.DBESTERTSINIELER 7 HIRIFRT 还-.” “introduce”: usericon”:htips. “shoucang”: false “title”: “pinglun”: content”:11111, name”:Anf&il. Wily. *, “1cipifHEEIEREIT FI

30、RMS AHA “videoUrl: “https:/686b-hkdl6-451k6-11505212368.tch.qcloud. la/IEERATR. 图4-1 视频数据信息 4.1.2小程序页面获取视频列表 （1）新建一个页面文件夹。 （2）首先打开该文件夹中的js 文件，在data:中添加一个list:用于存储后 面从服务器接收到的数据信息。 （3）接着新建一个函数，命名为getList()，由于一个代码片段中，this 所指 来绑定。接着在其下方写入 的对象不唯一，所以需要添加一条语句let that=this 来绑定。接着在其下方写入 集合名称 集合名称语句，该语句中cloud

31、.database()为获 取数据库引用，而集合名称 取数据库引用，而 集合名称 用于引用指定名称的集合，get()方法则会 触发网络请求，从数据库中获取数据。 具体代码片段如下： getlist() let that = this; .get( success(res) 请求成功 请求成功 that.setData( list: res.data, ) console.log(suijilist) , fail(res) 请求失败 请求失败 ) , 如果需要进行条件筛选搜索则语句格式应为集 合名称 如果需要进行条件筛选搜索则语句格式应为 合名称筛选条件 筛选条件。 （4）当数据获取成功后，可

32、以通过console.log()来将数据信息打印在控制台 中。在控制台的打印结果中，可以逐层点开查看更加全面、详细地信息。为了将获 取到的数据保存下来，需要通过that.setData()将数据赋予list，以方便在wxml 页面 中进行展示，如图4-2 所示。 w fama Arvvap(B), arrMsg: “oollectlon. getisk) B wdate: Array LJ class: “Fe overs clowd: F/RI16-451KEEB6h- halG -351Kk6-1259521268 #1 FcaaFT516ah 24aPa FB I6Be7 FAC 7B2

33、59 2MED EA. PRE” “fixe2)=-r(x) FOed)=r(-x)r Fined)=-11-n) REGREHOMIEIIT Suid? ERD LHET Fd iE Fpbnglun:(5) =,=)p =: (=) 1-3) shoucang: false introduoes title “1s FHEREMATRINHS A wigeolrl: *Nttps: f/8880-hka16-431k0-1239321208, tb. qrloud . 1aSEERATRBIALONA20 7 135 TESTED JEST ka: “E1063702-7113-4832-

34、 acce- Sed 3040 Fld _prata_t Object 图4-2 console.log()控制台输出结果 （5）打开该页面文件夹的wxml 文件，添加一个视图容器组件标签， 和HTML5 中的类似，是布局中最基本的一个组件，任何一个复杂的 布局都可以通过嵌套组件来实现10。为该标签添加一个 标签添加一个 属性，该属性用于绑定数组，从而实现对该数组中的数据进行页面渲染。然后在 标签之下添加等标签，通过item.xxxx来获取想要的数据信息并 显示。 代码片段如下： 4.2 首页轮播图 下文将开始介绍轮播图的意义以及具体的实现步骤。 4.2.1轮播图的意义 纵观国内外网站平台与小

35、程序，基本上都能在其首页发现轮播图的存在，轮播 图就相当于门面，是当用户进入该网站或小程序时，第一眼就能够看到的元素。轮 播图就是一种滚动式的广告，它能够起到装饰页面、提高信息曝光度的作用，让用 户能够直观地了解平台内容。因此，移动学习平台小程序作为一个为用户提供在线 观看学习资料的平台，能够为用户推荐优质学习资料的首页轮播图的存在便十分必 要。 4.2.2首页轮播图的实现 （1）微信开发者工具中为我们提供了内置的滑块视图容器组件以及附 属组件，来实现轮播图的效果。在制作过程中，我们主要用到 组件的几个属性： （a）“indicator-dots:”，该属性用于设置面板指示点的显示与否，在本项

36、目中 我们需要通过指示点了解到目前轮播的图片为第几张，所以我们选择使用 “indicator-dots: true”，即显示指示点。 （b）“autoplay:”，该属性用于设置轮播图的自动播放与否，在本项目中使用 了“autoplay: true”，即启用自动播放。 （c）“interval:”，该属性用于轮播图自动播放的时间间隔，其中的数值标准为 1000=1 秒，在本项目中设置为了“interval: 4000”，即每4 秒自动切换为下一张图 片。 （d）“duration:”，该属性用于设置图片切换时的动画时间，当数值越低时，切 换动画速度越快，项目中设置为了“duration:800

37、”。 （e）“circular:”，该属性用于设置当用户在轮播图第一张图向右滑动（或是在 最后一张图向左滑动时），是否与最后一张图进行衔接（或是与第一张图进行衔 接），从而达到顺畅、无空白间隙的滑动效果，在本项目中使用了“circular: true”， 即启用衔接滑动。 以上的属性我们也可以写进js 文件里的“data:”中，随后在wxml 中所使用 的组件标签内进行调用。 （2）打开首页文件夹的zhuye.wxml，分别逐层添加、和 标签。 （3）可以参考4.1 中所提到的方法，在云数据库中添加一个新集合存放轮播 图的图片列表，通过js 获取并在wxml 页面中展示。 代码片段如下： swiper autoplay=autoplay indicator-dots=indicatorDots swiper autoplay=autoplay indicator-dots=indicatorDots 4.3 分区页面导航栏 下文将介绍小程序底部导航栏和页面头部导航栏的具体实现步骤。 4.3.1小程序底部导航栏 （1）小程序的底部导航栏可以通过app.json 进行配置。 （2）打开app.json