基于云开发的音乐小程序系统(附件)【字数：9411】
摘 要在现在这个人人都在使用微信的互联网时代，微信小程序的生态已经发展的非常丰富且完善了。用户只需要扫描微信小程序码就可以非常快速地进入指定的小程序，或者在已更新的微信版本中，下拉首页就可以看到小程序的入口栏。本文基于云开发的音乐小程序系统使用微信小程序开发工具中的云开发的模式，完成了一个音乐全栈的小程序的开发，开发过程中使用了封装自定义组件的方式构造了小程序的前端，将后端的函数传入了云开发的云函数中，并且还开发了一套后台管理系统，将云开发的数据连接到了后台管理系统里，实现项目数据管理。本文微信小程序采用GitHub中的NeteaseCloudMusicApi部署音乐后端接口，小程序采用云开发的模式，从后端接口获取歌单信息，将数据存储在腾讯云云开发数据库中，可以根据歌单信息从后端接口获取到其他数据。云开发模式下，云数据库和云存储用来存储本小程序其他所需信息。本小程序后台管理系统采用前后端分离架构，vue-admin-templat构建管理系统前端，Koa2构建管理系统后端，并使用HTTP API访问小程序云开发资源，实现歌单的编辑和删除、小程序轮播图的上传和删除，博客的删除这几项功能。
目录
一、引言 1
（一）研究背景 1
（二）研究目的和意义 2
（三）所使用的开发工具 2
二、音乐小程序系统的设计 4
（一）总体设计 4
1.功能结构描述 4
2.功能结构图 4
（二）数据库的设计 5
（三）系统详细设计 7
1.系统前端与后端数据流程图 7
2.微信小程序端的设计 7
3.后台管理系统端的设计 10
三、音乐小程序系统的实现 12
（一）微信小程序端的实现 12
1.轮播图与歌单获取实现 12
2.歌曲列表获取实现 12
3.歌曲封面图片及歌词获取实现 12
4.博客列表实现 13
5.博客详情实现 14
6.博客发布实现 15
7.博客分享实现 15
8.音乐播放记录实现 16
9.博客发布历史实现 16< *好棒文|www.hbsrm.com +Q: ^351916072#
br /> 10.我的小程序码实现 17
（二）后台管理系统端的实现 17
1.歌曲管理实现 17
2.轮播图管理实现 18
3.博客管理实现 19
四、音乐小程序系统的测试 21
五、结论 25
致谢 26
参考文献 27
专科期间竞赛获奖、申获知识产权及获得荣誉 28
附录 29
一、引言
（一）研究背景
自从微信小程序的推出以来，随着小程序的日益流行和功能的完善，用户已经不再需要下载单独的APP就可以体验近乎媲美APP的操作体验，可以节省手机的内存空间，也可以减少用户使用的成本。例如我们已经可以通过小程序进行购物、浏览资讯、餐厅点餐等等[2]。如图11所示，是现在用户常见的获取微信小程序的方式。
/
图11 小程序十大常见流量入口
如微信小程序官方文档所示，小程序的开发简明扼要，用户所使用的界面重点突出，无过多干扰项，如图12左边所示。
/
图12 小程序设计案例
在腾讯云推出的小程序云开发基础上，开发者也可以提高开发小程序的效率，并且减少开发和运维成本，通过后台管理系统，我们通过HTTP API访问云开发的资源，管理员可以近在后台管理系统对小程序的资源进行管理，提高小程序内容的高效率管理[1]。
本文所叙述的从音乐小程序系统的设计开始，接着阐述音乐小程序系统的实现，最后进行音乐小程序系统的测试。
（二）研究目的和意义
目的：通过小程序系统的开发，对于用户来说，可以便捷的获取到开发者提供的小程序，减少学习使用的成本，实现应用“触手可及”的梦想，现在无论是手机端还是电脑端，都能方便的获取到小程序。对于开发者和管理员，开发一款软件的成本高昂，而微信小程序开发可以大大减少成本，提高开发效率，一套系统的开发完成后，后台管理系统即可针对小程序的资源进行管理，方便且快捷[6]。
意义：采用云开发的模式开发的小程序，对于开发人员可以减少相对于一个完整的APP的工作量，小程序的开发便于用户的获取和使用，且用户可以触手可及、用完即走，用户在使用记录中也能够快速重新再次进入小程序。管理员也可以通过后台管理系统更加方便地管理小程序资源，无需开发者手动进入数据库系统进行操作，对于内容管理的自主性更高。
（三）所使用的开发工具
小程序及云开发模式使用微信小程序官方提供的微信开发者工具，后台管理系统前端开发工具使用的是Visual Studio Code，后端开发工具使用的是Visual Studio Code，接口测试工具使用的是Postman。
基于云开发的音乐小程序系统所使用的后端技术栈如表11所示。
表11 后端技术栈
技术
类型
版本
Node.js
基于JavaScript运行环境
v14.15.5linux
基于云开发的音乐小程序系统所使用的前端技术栈如表12所示。
表12 前端技术栈
技术
类型
版本
tcbrouter
云函数轻量级类路由库
1.1.2
request
HTTP库
2.88.2
Requestpromise
HTTP请求客户端“请求”
4.2.6
Koa
Web开发框架
2.13.1
Koabody
正文解析器中间件
4.2.0
Koarouter
Koa的路由器中间件
10.0.0
Koa2cors
中间件
2.0.6
Axios
HTTP库
0.18.0
Element UI
桌面端组件库
2.7.2
jscookie
处理cookies的js API
2.2.0
目录
一、引言 1
（一）研究背景 1
（二）研究目的和意义 2
（三）所使用的开发工具 2
二、音乐小程序系统的设计 4
（一）总体设计 4
1.功能结构描述 4
2.功能结构图 4
（二）数据库的设计 5
（三）系统详细设计 7
1.系统前端与后端数据流程图 7
2.微信小程序端的设计 7
3.后台管理系统端的设计 10
三、音乐小程序系统的实现 12
（一）微信小程序端的实现 12
1.轮播图与歌单获取实现 12
2.歌曲列表获取实现 12
3.歌曲封面图片及歌词获取实现 12
4.博客列表实现 13
5.博客详情实现 14
6.博客发布实现 15
7.博客分享实现 15
8.音乐播放记录实现 16
9.博客发布历史实现 16< *好棒文|www.hbsrm.com +Q: ^351916072#
br /> 10.我的小程序码实现 17
（二）后台管理系统端的实现 17
1.歌曲管理实现 17
2.轮播图管理实现 18
3.博客管理实现 19
四、音乐小程序系统的测试 21
五、结论 25
致谢 26
参考文献 27
专科期间竞赛获奖、申获知识产权及获得荣誉 28
附录 29
一、引言
（一）研究背景
自从微信小程序的推出以来，随着小程序的日益流行和功能的完善，用户已经不再需要下载单独的APP就可以体验近乎媲美APP的操作体验，可以节省手机的内存空间，也可以减少用户使用的成本。例如我们已经可以通过小程序进行购物、浏览资讯、餐厅点餐等等[2]。如图11所示，是现在用户常见的获取微信小程序的方式。
/
图11 小程序十大常见流量入口
如微信小程序官方文档所示，小程序的开发简明扼要，用户所使用的界面重点突出，无过多干扰项，如图12左边所示。
/
图12 小程序设计案例
在腾讯云推出的小程序云开发基础上，开发者也可以提高开发小程序的效率，并且减少开发和运维成本，通过后台管理系统，我们通过HTTP API访问云开发的资源，管理员可以近在后台管理系统对小程序的资源进行管理，提高小程序内容的高效率管理[1]。
本文所叙述的从音乐小程序系统的设计开始，接着阐述音乐小程序系统的实现，最后进行音乐小程序系统的测试。
（二）研究目的和意义
目的：通过小程序系统的开发，对于用户来说，可以便捷的获取到开发者提供的小程序，减少学习使用的成本，实现应用“触手可及”的梦想，现在无论是手机端还是电脑端，都能方便的获取到小程序。对于开发者和管理员，开发一款软件的成本高昂，而微信小程序开发可以大大减少成本，提高开发效率，一套系统的开发完成后，后台管理系统即可针对小程序的资源进行管理，方便且快捷[6]。
意义：采用云开发的模式开发的小程序，对于开发人员可以减少相对于一个完整的APP的工作量，小程序的开发便于用户的获取和使用，且用户可以触手可及、用完即走，用户在使用记录中也能够快速重新再次进入小程序。管理员也可以通过后台管理系统更加方便地管理小程序资源，无需开发者手动进入数据库系统进行操作，对于内容管理的自主性更高。
（三）所使用的开发工具
小程序及云开发模式使用微信小程序官方提供的微信开发者工具，后台管理系统前端开发工具使用的是Visual Studio Code，后端开发工具使用的是Visual Studio Code，接口测试工具使用的是Postman。
基于云开发的音乐小程序系统所使用的后端技术栈如表11所示。
表11 后端技术栈
技术
类型
版本
Node.js
基于JavaScript运行环境
v14.15.5linux
基于云开发的音乐小程序系统所使用的前端技术栈如表12所示。
表12 前端技术栈
技术
类型
版本
tcbrouter
云函数轻量级类路由库
1.1.2
request
HTTP库
2.88.2
Requestpromise
HTTP请求客户端“请求”
4.2.6
Koa
Web开发框架
2.13.1
Koabody
正文解析器中间件
4.2.0
Koarouter
Koa的路由器中间件
10.0.0
Koa2cors
中间件
2.0.6
Axios
HTTP库
0.18.0
Element UI
桌面端组件库
2.7.2
jscookie
处理cookies的js API
2.2.0
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/wlw/13.html
