程序16210320233-谭云龙-基于微信小程序的移动学习平台的设计与实现

本科毕业设计论文

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

Design and ImplementationofMobileLearningPlatformBased on WeChat Mini Program院系 计算机学院

专业 数字媒体技术

班级 数字媒体技术2班

学号 16210320233

学生姓名 谭云龙

指导教师 李梁奇

提交日期 2020年4月22 日

中文摘要

本项目将要设计及制作一个移动学习平台微信小程序该小程序的主要功能是为用户提供一个可在线观看关于数学和英语的视频学习资料的平台。小程序的设计及实现过程中所使用到的软件工具包括微信开发者工具小程序编写及后台云数据库、思维导图工具页面交互流程理解。

本项目中所涉及到的流程包括有小程序功能的构想、使用云开发数据库上传视频和图片、轮播图功能的实现、分区列表的设计、通过点击事件实现带参数跳转至视频详情页、视频详情页的数据获取与展示、收藏功能的实现、发表评论功能的、收藏与评论状态的数据库实时更新、模糊搜索功能的实现、程序测试等。

关键词微信小程序云开发移动学习平台视频播放

Abstract

This project will design and implement a mobile learning platform baseon WeChat mini program.The main function of this mini program is toprovide a platformforusers to watch learning materials about Math andEnglish online.The tools used in the design and implementation of the miniprogram inc lude WeChatwebdevtools(Code design and Cloud Database),

Mindjet MindManager(page interaction process flow chart).

Work process involved in this project are: the idea of mini programfunctions,Upload videos and images by using Cloud Development Database,the design of Carousel banner, the design of partition lists, jump to videodetail pages with parameters by click events,data acquisition and display ofvideo detail pages, the design of add favorite function, the design ofcomment function, cloud database real-time updateoffavoriteand commentstatus, the implementation of fuzzy search function,program test,etc.Key words:WeChat mini program Cloud developmentMobile Learningplatform 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

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.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搜索功能调试. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

第六章总结与展望. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33

参考文献. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34

致谢. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35

广东东软学院本科毕业设计论文

第一章绪论

1 . 1开发背景及意义

随着时代与科技的创新进步手机已然成为人们生活中不可或缺的一部分。现在手机上只需要微信这一个软件便能够在微信上享受到便捷的社交、购物、交通、吃饭等多种服务[1] 。微信作为一个公众平台其面对的对象不仅仅是平民百姓它也是一个各个媒体、领域集中发布、运维的平台之一。

就目前形势而言在微信的众多功能中微信小程序的地位颇高相较于传统桌面端app它具有体积小、运行快的优势是目前为止应用领域最广泛、场景技术能力最强通过自身强大的微信入口是移动场景下的超级链接工具[2] 。

微信小程序特色的云开发能为开发者提供原生的数据库与微信服务支持无需另外搭建服务器减轻开发成本吸引了一大批的个人开发者参与其中。

传统教育教学以广播电视和面授为主随着信息技术的发展越来越多的学生在尝试借助诸如微信等移动应用进行移动学习[3] 。

移动学习平台是指利用信息技术搭建的能够为用户提供移动式学习体验的软、硬件环境[4] 。基于微信小程序实现的移动学习平台可以为用户提供真正意义上的随时随地学习的功能。摆脱传统纸质教材的重量以及厚度的束缚用户的日常出行能够更加轻便而采用视频教学的方式也能够为用户营造一种仿佛坐在课室里听讲的临场感同时还能够通过收藏夹来复习课程裨补缺漏这在如今人们快节奏的生活中是十分适合和满足大众需求的。

1 .2国内外研究现状

微信小程序是近几年非常流行的一种应用它开发成本以及开发门槛比app低它具有体积小、易使用的特点需要的时候一点即开不需要的时候也无需卸载能为用户的设备腾出更多的空间。各大视频网站诸如腾讯视频、爱奇艺、哔哩哔哩等都拥有了自己的小程序。

对于轻度用户和潜在用户而言微信小程序其随用随走的特性 以及在能为用户提供近似于传统app的舒适体验之余免除用户下载软件的步骤深受潜在用户的爱戴也进一步丰富了视频平台的表现形式[5] 。

与此同时 网络授课的形式逐渐成为主流被广大群众所接受各类慕课在线移动学习平台不断涌现。移动学习和MOOC教学等新兴学习方式为人们提供了随身学习的可能支持移动教学模式的学习平台是未来网络教育的发展趋势[6] 。

1

广东东软学院本科毕业设计论文

因此基于微信小程序开发一个可以在线观看学习视频的移动学习平台将会成为未来的主流。

1 .3课题研究内容

本次毕业设计所需要用到的软件为微信官方推出的“微信开发者工具”移动学习平台小程序的设计与实现主要是基于微信公众平台采用了WXML、 JavaScript和云开发技术。该小程序应该具备视频播放功能、课程分区、课程收藏和评论等功能为用户提供舒适的在外学习的体验。

本项目为开发一个移动学习平台小程序该小程序主体为一个在线视频播放平台。本项目将通过代码来实现以下的功能

1 从云数据库后台获取视频列表。

2 首页轮播图。

3 通过点击列表中的视频封面来跳转至视频详情页。

4 视频详情页面根据数据id从云数据库获取视频信息。

5 视频详情页的收藏与评论功能。

6 视频搜索功能。

1 .4论文的组织结构

本论文分为六个章节用于介绍小程序项目的设计与实现过程章节安排如下

第一章绪论。介绍了本课题的选题背景、开发意义、开发内容、 国内外研究现状以及论文的组织结构。

第二章开发环境。介绍了项目开发所使用的到的工具、项目文件结构以及云开发中个页面的用途。

第三章小程序需求分析。介绍了小程序所包含的页面模块及交互流程 以及所需要用到的云开发的功能操作。

第四章小程序功能实现。介绍了本项目小程序的主要功能实现过程。

第五章小程序调试。介绍了小程序完成后的各页面功能的测试结果。

第六章总结与展期。总结开发过程遇到的困难与收获 以及对未来的期望。

2

广东东软学院本科毕业设计论文

第二章开发环境

2. 1开发工具的介绍

微信开发者工具是由微信团队推出的一款专门用于开发微信公众号、微信小程序的开发工具该工具支持w xml、 j s脚本等 同时还为开发者提供了云开发选项云开发为开发者提供数据库、存储和云函数等方便快捷的云端支持同时还支持api的调用省去了用户自行搭建数据库服务器的步骤。微信团队还提供了微信官方文档开发者能够从中获取到小程序的语法、组件等重要信息指南。

每个开发者账号可以申请注册一个专属的AppID在创建小程序项目时如果需要用到云开发作为后端服务则需要使用到该AppID。

小程序的整体框架分为逻辑层和视图层两大层面小程序拥有自己的视图层语言wxml和wxs s以及基于JavaScript的逻辑层框架同时小程序还为视图层和逻辑层之间提供了数据传输与事件系统[7] 。

前端网站开发常见的HTML5、 C S S 3变成了小程序自定义的WXML、WXS SJavaScript也相对于传统网站有所增删[8] 。

2.2项目结构介绍

一个小程序的主体部分主由app.wxss公共样式表、 app.js小程序逻辑、 app.json小程序公共设置这三个全局文件组成它们对所有页面都是有效的[9] 。

每一个微信小程序项目在创建后都会拥有多个默认的文件夹如果启用了云开发则会额外多出一个c loud functio ns文件夹其中在开发中最常用到的主要是image s

存放图片素材、所示。

图2-1小程序项目结构

3

广东东软学院本科毕业设计论文

在app.json文件中我们可以进行全局配置如在“pages”中就包含了pages目录下的所有页面文件夹我们可以通过新建一行“pages/XXX/XXX”来实现在pages目录下新建页面文件夹。除此之外我们还能够在app.json文件下修改小程序顶栏显示的文字以及创建底部导航栏tab B a r。

而在pages目录下的每个页面文件夹均包含有js脚本、j son页面配置、wxml

显示页面、wxss 页面样式其中wxml和wxs s相当于网页开发的html和cs s代码大致通用。

2.3云数据库介绍

当项目创建时启用了云开发选项我们便能够在项目开发界面通过点击“云开发”按钮打开云开发控制台。微信默认为用户免费配给了5GB的服务器容量套餐。在该控制台中我们能够清晰可视的了解到服务器情况对于服务器的操作我们主要用到“数据库”、 “存储”、 “云函数”。

2.3. 1 “数据库”页面

在“数据库”界面中会显示集合列表开发者能够新建集合并添加记录每一个记录都有一个系统自动生成的“_id”字段可在相关页面的js文件中通过代码来对云数据库进行“增删查改”等操作如图2-2所示。

图2-2云开发“数据库”选项页面

4