基于微信小程序的移动学习平台的设计与实现.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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 基于 微信小 程序 移动 学习 平台 设计 实现

限制150内