陸向艷 苗潔

（廣西大學(xué)計(jì)算機(jī)與電子信息學(xué)院 廣西壯族自治區(qū)南寧市 530004）

1 引言

微信小程序自2016年問(wèn)世以來(lái)得到飛速發(fā)展，受到了很多程序員的青睞。微信小程序的特點(diǎn)是無(wú)需下載安裝就能實(shí)現(xiàn)滿足用戶需求的應(yīng)用，它與占用幾十M甚至幾百M(fèi)內(nèi)存的手機(jī)APP應(yīng)用相反，占用內(nèi)存空間相當(dāng)少。2019年相關(guān)數(shù)據(jù)顯示，微信小程序應(yīng)用數(shù)量超過(guò)了一百萬(wàn)，覆蓋200多個(gè)細(xì)分行業(yè)，日活躍用戶達(dá)到兩個(gè)億，微信小程序還在許多城市實(shí)現(xiàn)了支持地鐵、公交等公共服務(wù)，給人們的生活帶來(lái)了極大的便利。

2019年，騰訊又推出微信小程序新的開發(fā)方式——云開發(fā)，小程序云開發(fā)模式進(jìn)一步進(jìn)化，使得開發(fā)者獲得更多的便利。傳統(tǒng)微信小程序的開發(fā)跟其他開發(fā)模式相似，也是前后端的模式，采用MVC框架，前端采用用wxmI和wxss語(yǔ)言進(jìn)行編寫，后端使用JAVA、PHP和node.js等進(jìn)行編碼，前后端需要根據(jù)應(yīng)用需求對(duì)相應(yīng)的接口進(jìn)行編碼。開發(fā)傳統(tǒng)微信小程序完成后在部署上線的時(shí)，開發(fā)者要自行購(gòu)買服務(wù)器和域名并且需要一段相當(dāng)長(zhǎng)時(shí)間的備案過(guò)程。上線之后，在網(wǎng)絡(luò)防護(hù)、維護(hù)負(fù)載均衡和監(jiān)控警告等運(yùn)營(yíng)方面也需開發(fā)者自己進(jìn)行管理?？偠灾?，傳統(tǒng)微信小程序在前后的接口編程和上線服務(wù)管理維護(hù)上需要投入較大的精力。在傳統(tǒng)微信小程序基礎(chǔ)上進(jìn)化后的微信小程序云開發(fā)模式在很大程度上解決了以上問(wèn)題，它提供的云端開發(fā)模式，弱化了后端的概念，開發(fā)者借助于微信平臺(tái)不再需要搭建自己的服務(wù)器，也不需要搭建自己的后臺(tái)數(shù)據(jù)庫(kù)，只需要通過(guò)云函數(shù)調(diào)用相應(yīng)的API接口即可完成對(duì)云數(shù)據(jù)庫(kù)和云存儲(chǔ)的操作。小程序云開發(fā)模式使開發(fā)者的無(wú)需考慮服務(wù)器和上線運(yùn)維等問(wèn)題，只需要專注于應(yīng)用的業(yè)務(wù)邏輯實(shí)現(xiàn)。這種開發(fā)模式使小程序開發(fā)者很容易實(shí)現(xiàn)應(yīng)用的快速上線和迭代。微信小程序的云開發(fā)模式實(shí)際上是一種無(wú)服務(wù)器的開發(fā)模式，從應(yīng)用前端的視角看，小程序的后端簡(jiǎn)化為一個(gè)函數(shù)，開發(fā)者只需要調(diào)用微信云開發(fā)平臺(tái)提供相關(guān)功能函數(shù)的即可實(shí)現(xiàn)相應(yīng)的后端服務(wù)，服務(wù)的具體實(shí)現(xiàn)細(xì)節(jié)由平臺(tái)實(shí)現(xiàn)，無(wú)需開發(fā)者去處理。這樣簡(jiǎn)化之后，基于云開發(fā)的微信小程序開發(fā)也在這幾年逐漸火熱，受到很多互聯(lián)網(wǎng)創(chuàng)業(yè)者的歡迎。

當(dāng)前，微信已成為人們?nèi)粘Ｉ钪斜夭豢缮俚纳缃卉浖?，基于微信小程序的?yīng)用受到了開發(fā)者和使用者的認(rèn)可，點(diǎn)餐、購(gòu)物、訂票、在線教育、娛樂(lè)和游戲等微信小程序應(yīng)用不斷推陳出新，微信小程序的使用已經(jīng)遍及人們生活的各個(gè)方面并帶來(lái)了極大的便利。2019年騰訊云所推出的“小程序云開發(fā)”模式使開發(fā)者無(wú)需考慮服務(wù)器如何實(shí)現(xiàn)，比傳統(tǒng)微信小程序更加便捷。本文基于微信小程序云開發(fā)的背景，設(shè)計(jì)開發(fā)一款?yuàn)蕵?lè)性質(zhì)的音樂(lè)播放小程序系統(tǒng)，無(wú)需下載安裝音樂(lè)軟件，只要裝有微信就能使用，使得播放網(wǎng)絡(luò)音樂(lè)更加簡(jiǎn)便。下面將介紹基于微信小程序云開發(fā)的音樂(lè)播放系統(tǒng)的分析、設(shè)計(jì)和實(shí)現(xiàn)。

2 系統(tǒng)分析

2.1 用戶角色分析

根據(jù)微信小程序云開發(fā)模式的設(shè)置，基于微信云開發(fā)的音樂(lè)播放系統(tǒng)有三種用戶角色，在小程序代碼上傳后設(shè)置成體驗(yàn)版時(shí)，用戶角色可分為管理員、項(xiàng)目成員和體驗(yàn)成員三種。體驗(yàn)版審核通過(guò)成為正式版上線時(shí)，用戶角色變更為管理員、項(xiàng)目成員和普通用戶。正式版的用戶與體驗(yàn)版的體驗(yàn)成員都只具有小程序的使用功能。管理員是小程序注冊(cè)者，具有自己的APPID作為憑證對(duì)小程序進(jìn)行開發(fā)。管理員具有對(duì)小程序的一切操作設(shè)置權(quán)限。體驗(yàn)版的項(xiàng)目成員和體驗(yàn)成員都需要管理員在微信公眾平臺(tái)手動(dòng)搜索微信號(hào)添加。項(xiàng)目成員最多可以添加15個(gè)，由管理員在開通其身份時(shí)賦予相應(yīng)的權(quán)限。體驗(yàn)成員最多也是15個(gè)，也是通過(guò)管理員或項(xiàng)目成員手動(dòng)添加的方式添加，對(duì)小程序只能測(cè)試和使用，不具有任何開發(fā)權(quán)限。

2.2 用例分析

如圖1所示，基于微信小程序云開發(fā)的音樂(lè)播放系統(tǒng)有登錄、音樂(lè)管理、博客管理、個(gè)人信息和輪播圖管理五個(gè)用例，各用例功能為：

圖1：系統(tǒng)用例圖

（1）登錄用例：對(duì)于用戶主要是實(shí)現(xiàn)微信小程序授權(quán)登錄功能，對(duì)于管理員主要是實(shí)現(xiàn)后臺(tái)登錄。

（2）音樂(lè)管理用例：對(duì)于管理員主要是是實(shí)現(xiàn)從網(wǎng)易云音樂(lè)下載、編輯和刪除歌單功能，對(duì)于用戶主要是實(shí)現(xiàn)歌單推送和歌單播放功能。

（3）博客管理用例：對(duì)于管理員主要是實(shí)現(xiàn)博客的刪除，對(duì)于用戶主要是實(shí)現(xiàn)博客的搜索、發(fā)布、分享和評(píng)論功能。

（4）個(gè)人信息用例：主要是實(shí)現(xiàn)用戶個(gè)人信息管理和對(duì)音樂(lè)播放及博客發(fā)布?xì)v史的查詢。

（5）輪播圖用例，主要是實(shí)現(xiàn)管理員上傳和更新輪播圖。

3 系統(tǒng)設(shè)計(jì)

3.1 系統(tǒng)軟件結(jié)構(gòu)

基于微信小程序云開發(fā)的音樂(lè)播放系統(tǒng)軟件結(jié)構(gòu)如圖2所示，用戶端為微信小程序端，開發(fā)者通過(guò)微信云開發(fā)平臺(tái)實(shí)現(xiàn)服務(wù)端功能，無(wú)需自己搭建及維護(hù)服務(wù)器。開發(fā)者通過(guò)微信云開發(fā)平臺(tái)提供的云函數(shù)、云數(shù)據(jù)庫(kù)和云存儲(chǔ)實(shí)現(xiàn)業(yè)務(wù)邏輯。云函數(shù)是在云端運(yùn)行的代碼，微信私有協(xié)議天然鑒權(quán)，開發(fā)者只需編寫自身業(yè)務(wù)邏輯代碼。云數(shù)據(jù)庫(kù)是一個(gè)既可以在微信小程序前端操作，也能在云函數(shù)中讀寫的JSON數(shù)據(jù)庫(kù)。云存儲(chǔ)提供在微信小程序前端直接上傳/下載云端文件、在云開發(fā)控制臺(tái)可視化管理的功能。

圖2：微信小程序云開發(fā)框架

3.2 系統(tǒng)功能結(jié)構(gòu)

基于微信小程序云開發(fā)的音樂(lè)播放系統(tǒng)功能主要分為微信小程序和后臺(tái)管理系統(tǒng)兩部分，系統(tǒng)模塊結(jié)構(gòu)如圖3所示。微信小程序包括用戶登錄、音樂(lè)播放、博客管理和個(gè)人信息四個(gè)模塊，用戶登錄模塊為用戶實(shí)現(xiàn)微信授權(quán)登錄，音樂(lè)播放模塊為用戶實(shí)現(xiàn)音樂(lè)播放功能，分為歌曲播放、歌詞顯示和播放進(jìn)度條三個(gè)子模塊。用戶任意選擇歌單進(jìn)入詳情后可以進(jìn)行歌曲播放，歌曲播放時(shí)同步顯示歌詞和歌曲播放進(jìn)度條。用戶可以進(jìn)行上一曲和下一曲的任意切換，一首歌曲播放結(jié)束之后自動(dòng)播放歌單的下一曲。博客管理模塊為用戶實(shí)現(xiàn)博客管理，分為搜索、發(fā)布、評(píng)論和分享博客四個(gè)子模塊。用戶自由發(fā)表博客，博客的功能類似微信朋友圈，博客可以直接寫文案，照片不是必須的內(nèi)容，可以有也可以沒(méi)有。博客發(fā)布之前需先進(jìn)行微信授權(quán)登錄，只有授權(quán)登錄的用戶才可以發(fā)布博客，否則無(wú)權(quán)進(jìn)行發(fā)布。用戶可以對(duì)博客進(jìn)行評(píng)論，可以在自己博客下評(píng)論，也可以評(píng)論其他用戶的博客。所有用戶的博客在博客界面都會(huì)顯示，發(fā)布后的博客對(duì)小程序的任意使用者都可見。發(fā)布評(píng)論時(shí)必須先對(duì)微信進(jìn)行授權(quán)登錄的操作，否則無(wú)權(quán)發(fā)布評(píng)論。此外有訂閱消息提示，用戶同意即可發(fā)布，發(fā)布之后會(huì)有微信消息進(jìn)行提示。用戶可以對(duì)博客進(jìn)行轉(zhuǎn)發(fā)的功能，轉(zhuǎn)發(fā)至任意微信好友，可以轉(zhuǎn)發(fā)某一篇博客，也可以對(duì)整個(gè)博客界面進(jìn)行轉(zhuǎn)發(fā)分享。收到轉(zhuǎn)發(fā)消息的好友可以通過(guò)分享卡片直接進(jìn)入小程序?qū)?yīng)分享界面，也可以點(diǎn)擊跳轉(zhuǎn)小程序首頁(yè)。個(gè)人信息模塊為用戶實(shí)現(xiàn)個(gè)人信息查詢（用戶微信頭像和昵稱及歷史信息查詢），分為音樂(lè)播放歷史和博客發(fā)布?xì)v史兩個(gè)子模塊。后臺(tái)管理系統(tǒng)包括管理員登錄、歌單管理、博客管理和輪播圖管理四個(gè)子模塊。管理員登錄模塊為管理員實(shí)現(xiàn)微信授權(quán)登錄，博客管理模塊主要實(shí)現(xiàn)博客信息、評(píng)論和分享的刪除，歌單管理主要實(shí)現(xiàn)從網(wǎng)易云音樂(lè)下載和刪除歌曲，分為歌曲下載和歌曲刪除兩個(gè)子模塊，輪播圖管理模塊主要實(shí)現(xiàn)輪播圖的上傳和更新。

圖3：系統(tǒng)模塊結(jié)構(gòu)

3.3 數(shù)據(jù)庫(kù)表結(jié)構(gòu)設(shè)計(jì)

基于微信小程序云開發(fā)的音樂(lè)播放系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)了管理員表、用戶表、播放列表、博客表、博客評(píng)論表和輪播圖表一共6張表，各表結(jié)構(gòu)如圖表1-表6所示。

表1：管理員表

表2：微信用戶表

表3：播放列表表

表4：博客表結(jié)構(gòu)

表5：博客評(píng)論表結(jié)構(gòu)

表6：輪播圖表結(jié)構(gòu)

3.4 系統(tǒng)模塊設(shè)計(jì)

系統(tǒng)模塊采用組件化設(shè)計(jì)，系統(tǒng)功能通過(guò)設(shè)計(jì)九個(gè)組件實(shí)現(xiàn)，這些組件分別為：歌單組件、歌曲組件、進(jìn)度條組件、歌詞組件、博客卡片組件、博客控制組件、搜索組件、底部彈窗組件和登錄組件。

3.4.1 音樂(lè)播放模塊設(shè)計(jì)

音樂(lè)播放模塊主要是實(shí)現(xiàn)歌單推送和音樂(lè)播放的功能。功能實(shí)現(xiàn)通過(guò)封裝歌單、歌曲、歌詞和進(jìn)度條四個(gè)組件實(shí)現(xiàn)，歌單組件包括歌單名稱，歌單圖片和歌單播放量屬性。歌曲組件包括歌名、歌手名字和專輯名稱屬性。歌詞組件用來(lái)顯示歌詞，歌詞可以滾動(dòng)，對(duì)應(yīng)歌曲的歌詞高亮顯示。進(jìn)度條組件用來(lái)顯示當(dāng)前歌曲播放的進(jìn)度，包括已經(jīng)播放的時(shí)長(zhǎng)和歌曲總時(shí)長(zhǎng)。進(jìn)度條有對(duì)應(yīng)的上一曲、下一曲、播放和暫停功能。

3.4.2 博客模塊設(shè)計(jì)

博客模塊主要完成博客發(fā)布、評(píng)論和搜索的功能。功能通過(guò)設(shè)計(jì)三個(gè)組件實(shí)現(xiàn)，分別是：

（1）博客卡片組件，設(shè)計(jì)成點(diǎn)擊該可以進(jìn)入博客詳情，展示博客和對(duì)于該博客的相關(guān)評(píng)論，同時(shí)可以選擇進(jìn)行評(píng)論或者轉(zhuǎn)發(fā)。

（2）博客控制組件，該組件用于對(duì)博客卡片的操作，可以對(duì)任意博客進(jìn)行評(píng)論或者分享。

（3）搜索組件。用于關(guān)鍵字搜索符合要求的博客內(nèi)容。

3.4.3 個(gè)人中心模塊設(shè)計(jì)

個(gè)人中心模塊設(shè)計(jì)成用戶微信頭像和昵稱的顯示、查詢音樂(lè)播放歷史和博客播放歷史、小程序碼的生成和保存。

4 系統(tǒng)實(shí)現(xiàn)

基于微信小程序云開發(fā)的音樂(lè)播放系統(tǒng)的前端微信小程序主要是使用微信開發(fā)者工具進(jìn)行開發(fā)，按照需求引入第三方組件庫(kù)的樣式實(shí)現(xiàn)。后臺(tái)管理系統(tǒng)使用前后端分離架構(gòu)設(shè)計(jì)，前端基于vue框架進(jìn)行開發(fā)，使用Element網(wǎng)頁(yè)樣式模板進(jìn)行設(shè)計(jì)。后端使用koa框架，使用接口調(diào)用憑證，采用HTTPS API的方式請(qǐng)求調(diào)用數(shù)據(jù)庫(kù)數(shù)據(jù)，并將其傳遞給前端從而展示在界面上。前后端呈現(xiàn)的業(yè)務(wù)邏輯均通過(guò)微信云開發(fā)控制臺(tái)協(xié)調(diào)調(diào)用相關(guān)接口函數(shù)實(shí)現(xiàn)。

5 結(jié)束語(yǔ)

2019年騰訊云推出“小程序云開發(fā)”模式，該模式使開發(fā)者無(wú)需考慮服務(wù)器如何實(shí)現(xiàn)，比傳統(tǒng)微信小程序開發(fā)更加簡(jiǎn)單和便捷。本文基于微信小程序云開發(fā)的背景，設(shè)計(jì)開發(fā)一款?yuàn)蕵?lè)性質(zhì)的音樂(lè)小程序系統(tǒng)。本文分析了基于微信云開發(fā)的音樂(lè)播放系統(tǒng)的角色和用例，設(shè)計(jì)了系統(tǒng)軟件結(jié)構(gòu)、模塊結(jié)構(gòu)和數(shù)據(jù)表結(jié)構(gòu)。系統(tǒng)采用前后端設(shè)計(jì)，使用小程序云開發(fā)實(shí)現(xiàn)前端部分，同時(shí)，開發(fā)一個(gè)的后臺(tái)管理系統(tǒng)對(duì)接云開發(fā)后端?？梢酝ㄟ^(guò)后臺(tái)管理系統(tǒng)直接對(duì)云數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行操作，打造一個(gè)全棧式云音樂(lè)平臺(tái)。.