陆向艳 苗洁

（广西大学计算机与电子信息学院 广西壮族自治区南宁市 530004）

1 引言

微信小程序自2016年问世以来得到飞速发展，受到了很多程序员的青睐。微信小程序的特点是无需下载安装就能实现满足用户需求的应用，它与占用几十M甚至几百M内存的手机APP应用相反，占用内存空间相当少。2019年相关数据显示，微信小程序应用数量超过了一百万，覆盖200多个细分行业，日活跃用户达到两个亿，微信小程序还在许多城市实现了支持地铁、公交等公共服务，给人们的生活带来了极大的便利。

2019年，腾讯又推出微信小程序新的开发方式——云开发，小程序云开发模式进一步进化，使得开发者获得更多的便利。传统微信小程序的开发跟其他开发模式相似，也是前后端的模式，采用MVC框架，前端采用用wxmI和wxss语言进行编写，后端使用JAVA、PHP和node.js等进行编码，前后端需要根据应用需求对相应的接口进行编码。开发传统微信小程序完成后在部署上线的时，开发者要自行购买服务器和域名并且需要一段相当长时间的备案过程。上线之后，在网络防护、维护负载均衡和监控警告等运营方面也需开发者自己进行管理。总而言之，传统微信小程序在前后的接口编程和上线服务管理维护上需要投入较大的精力。在传统微信小程序基础上进化后的微信小程序云开发模式在很大程度上解决了以上问题，它提供的云端开发模式，弱化了后端的概念，开发者借助于微信平台不再需要搭建自己的服务器，也不需要搭建自己的后台数据库，只需要通过云函数调用相应的API接口即可完成对云数据库和云存储的操作。小程序云开发模式使开发者的无需考虑服务器和上线运维等问题，只需要专注于应用的业务逻辑实现。这种开发模式使小程序开发者很容易实现应用的快速上线和迭代。微信小程序的云开发模式实际上是一种无服务器的开发模式，从应用前端的视角看，小程序的后端简化为一个函数，开发者只需要调用微信云开发平台提供相关功能函数的即可实现相应的后端服务，服务的具体实现细节由平台实现，无需开发者去处理。这样简化之后，基于云开发的微信小程序开发也在这几年逐渐火热，受到很多互联网创业者的欢迎。

当前，微信已成为人们日常生活中必不可少的社交软件，基于微信小程序的应用受到了开发者和使用者的认可，点餐、购物、订票、在线教育、娱乐和游戏等微信小程序应用不断推陈出新，微信小程序的使用已经遍及人们生活的各个方面并带来了极大的便利。2019年腾讯云所推出的“小程序云开发”模式使开发者无需考虑服务器如何实现，比传统微信小程序更加便捷。本文基于微信小程序云开发的背景，设计开发一款娱乐性质的音乐播放小程序系统，无需下载安装音乐软件，只要装有微信就能使用，使得播放网络音乐更加简便。下面将介绍基于微信小程序云开发的音乐播放系统的分析、设计和实现。

2 系统分析

2.1 用户角色分析

根据微信小程序云开发模式的设置，基于微信云开发的音乐播放系统有三种用户角色，在小程序代码上传后设置成体验版时，用户角色可分为管理员、项目成员和体验成员三种。体验版审核通过成为正式版上线时，用户角色变更为管理员、项目成员和普通用户。正式版的用户与体验版的体验成员都只具有小程序的使用功能。管理员是小程序注册者，具有自己的APPID作为凭证对小程序进行开发。管理员具有对小程序的一切操作设置权限。体验版的项目成员和体验成员都需要管理员在微信公众平台手动搜索微信号添加。项目成员最多可以添加15个，由管理员在开通其身份时赋予相应的权限。体验成员最多也是15个，也是通过管理员或项目成员手动添加的方式添加，对小程序只能测试和使用，不具有任何开发权限。

2.2 用例分析

如图1所示，基于微信小程序云开发的音乐播放系统有登录、音乐管理、博客管理、个人信息和轮播图管理五个用例，各用例功能为：

图1：系统用例图

（1）登录用例：对于用户主要是实现微信小程序授权登录功能，对于管理员主要是实现后台登录。

（2）音乐管理用例：对于管理员主要是是实现从网易云音乐下载、编辑和删除歌单功能，对于用户主要是实现歌单推送和歌单播放功能。

（3）博客管理用例：对于管理员主要是实现博客的删除，对于用户主要是实现博客的搜索、发布、分享和评论功能。

（4）个人信息用例：主要是实现用户个人信息管理和对音乐播放及博客发布历史的查询。

（5）轮播图用例，主要是实现管理员上传和更新轮播图。

3 系统设计

3.1 系统软件结构

基于微信小程序云开发的音乐播放系统软件结构如图2所示，用户端为微信小程序端，开发者通过微信云开发平台实现服务端功能，无需自己搭建及维护服务器。开发者通过微信云开发平台提供的云函数、云数据库和云存储实现业务逻辑。云函数是在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码。云数据库是一个既可以在微信小程序前端操作，也能在云函数中读写的JSON数据库。云存储提供在微信小程序前端直接上传/下载云端文件、在云开发控制台可视化管理的功能。

图2：微信小程序云开发框架

3.2 系统功能结构

基于微信小程序云开发的音乐播放系统功能主要分为微信小程序和后台管理系统两部分，系统模块结构如图3所示。微信小程序包括用户登录、音乐播放、博客管理和个人信息四个模块，用户登录模块为用户实现微信授权登录，音乐播放模块为用户实现音乐播放功能，分为歌曲播放、歌词显示和播放进度条三个子模块。用户任意选择歌单进入详情后可以进行歌曲播放，歌曲播放时同步显示歌词和歌曲播放进度条。用户可以进行上一曲和下一曲的任意切换，一首歌曲播放结束之后自动播放歌单的下一曲。博客管理模块为用户实现博客管理，分为搜索、发布、评论和分享博客四个子模块。用户自由发表博客，博客的功能类似微信朋友圈，博客可以直接写文案，照片不是必须的内容，可以有也可以没有。博客发布之前需先进行微信授权登录，只有授权登录的用户才可以发布博客，否则无权进行发布。用户可以对博客进行评论，可以在自己博客下评论，也可以评论其他用户的博客。所有用户的博客在博客界面都会显示，发布后的博客对小程序的任意使用者都可见。发布评论时必须先对微信进行授权登录的操作，否则无权发布评论。此外有订阅消息提示，用户同意即可发布，发布之后会有微信消息进行提示。用户可以对博客进行转发的功能，转发至任意微信好友，可以转发某一篇博客，也可以对整个博客界面进行转发分享。收到转发消息的好友可以通过分享卡片直接进入小程序对应分享界面，也可以点击跳转小程序首页。个人信息模块为用户实现个人信息查询（用户微信头像和昵称及历史信息查询），分为音乐播放历史和博客发布历史两个子模块。后台管理系统包括管理员登录、歌单管理、博客管理和轮播图管理四个子模块。管理员登录模块为管理员实现微信授权登录，博客管理模块主要实现博客信息、评论和分享的删除，歌单管理主要实现从网易云音乐下载和删除歌曲，分为歌曲下载和歌曲删除两个子模块，轮播图管理模块主要实现轮播图的上传和更新。

图3：系统模块结构

3.3 数据库表结构设计

基于微信小程序云开发的音乐播放系统数据库设计了管理员表、用户表、播放列表、博客表、博客评论表和轮播图表一共6张表，各表结构如图表1-表6所示。

表1：管理员表

表2：微信用户表

表3：播放列表表

表4：博客表结构

表5：博客评论表结构

表6：轮播图表结构

3.4 系统模块设计

系统模块采用组件化设计，系统功能通过设计九个组件实现，这些组件分别为：歌单组件、歌曲组件、进度条组件、歌词组件、博客卡片组件、博客控制组件、搜索组件、底部弹窗组件和登录组件。

3.4.1 音乐播放模块设计

音乐播放模块主要是实现歌单推送和音乐播放的功能。功能实现通过封装歌单、歌曲、歌词和进度条四个组件实现，歌单组件包括歌单名称，歌单图片和歌单播放量属性。歌曲组件包括歌名、歌手名字和专辑名称属性。歌词组件用来显示歌词，歌词可以滚动，对应歌曲的歌词高亮显示。进度条组件用来显示当前歌曲播放的进度，包括已经播放的时长和歌曲总时长。进度条有对应的上一曲、下一曲、播放和暂停功能。

3.4.2 博客模块设计

博客模块主要完成博客发布、评论和搜索的功能。功能通过设计三个组件实现，分别是：

（1）博客卡片组件，设计成点击该可以进入博客详情，展示博客和对于该博客的相关评论，同时可以选择进行评论或者转发。

（2）博客控制组件，该组件用于对博客卡片的操作，可以对任意博客进行评论或者分享。

（3）搜索组件。用于关键字搜索符合要求的博客内容。

3.4.3 个人中心模块设计

个人中心模块设计成用户微信头像和昵称的显示、查询音乐播放历史和博客播放历史、小程序码的生成和保存。

4 系统实现

基于微信小程序云开发的音乐播放系统的前端微信小程序主要是使用微信开发者工具进行开发，按照需求引入第三方组件库的样式实现。后台管理系统使用前后端分离架构设计，前端基于vue框架进行开发，使用Element网页样式模板进行设计。后端使用koa框架，使用接口调用凭证，采用HTTPS API的方式请求调用数据库数据，并将其传递给前端从而展示在界面上。前后端呈现的业务逻辑均通过微信云开发控制台协调调用相关接口函数实现。

5 结束语

2019年腾讯云推出“小程序云开发”模式，该模式使开发者无需考虑服务器如何实现，比传统微信小程序开发更加简单和便捷。本文基于微信小程序云开发的背景，设计开发一款娱乐性质的音乐小程序系统。本文分析了基于微信云开发的音乐播放系统的角色和用例，设计了系统软件结构、模块结构和数据表结构。系统采用前后端设计，使用小程序云开发实现前端部分，同时，开发一个的后台管理系统对接云开发后端。可以通过后台管理系统直接对云数据库中的数据进行操作，打造一个全栈式云音乐平台。.