基于微信小程序的音樂播放平臺應(yīng)用設(shè)計研究

梁曉婭

（武漢軟件工程職業(yè)學(xué)院，湖北 武漢 430000）

1 概述

音樂是伴隨人類社會活動而產(chǎn)生的一種重要的藝術(shù)形式和文化活動，是一種表達(dá)人類思想情感的符號，包含了作者的思想情懷和生活體驗，也是最能即時打動人的藝術(shù)形式之一，在當(dāng)前社會生活中具有重要地位[1]。

目前，隨著信息技術(shù)的高速發(fā)展，在線音樂播放越來越受到年輕人群的重視和喜愛[2]。傳統(tǒng)電腦端音樂播放軟件漸漸不能滿足當(dāng)前移動社交的需要，為彌補傳統(tǒng)音樂播放的不足，本文設(shè)計了基于微信小程序的音樂播放平臺[3]。

2 相關(guān)技術(shù)分析

2.1 微信小程序技術(shù)簡介

微信小程序是一個基于去中心化而存在的平臺，它沒有聚合的入口，有多種進入方式[4]。在微信主界面向下滑動，會看到用過的微信小程序；也可以在微信中的“發(fā)現(xiàn)”界面，找到小程序的入口[5]。

微信小程序開發(fā)目錄結(jié)構(gòu)主要分為3個部分：框架全局文件、工具類文件和框架頁面文件[6]。

其中，項目的根目錄里必須包含一組框架全局文件[7]。一組完整的框架全局文件通常具有四個文件：1）app.js 小程序邏輯文件（定義全局?jǐn)?shù)據(jù)以及定義函數(shù)文件）；2）app.json小程序公共設(shè)置文件；3）app.wxss小程序公共樣式表；4）project.config.json 小程序項目個性化配置文件[8]。它們對項目中的所有頁面都有效，如表1所示。

表1 框架全局文件

文件app.js 中會定義一些全局?jǐn)?shù)據(jù)和全局函數(shù)，對整個項目的生命周期有效[9]。這些在項目程序生命周期都有效的全局函數(shù)是小程序自帶函數(shù)，例如on?Show（監(jiān)聽小程序顯示）、onHide（監(jiān)聽小程序隱藏）等，在小程序的不同運行階段，完成不同的邏輯處理[10]。此外，其他頁面要使用文件app.js 中的全局函數(shù)和數(shù)據(jù)，可直接引用app.js文件[11]。

其中，公共設(shè)置文件app.json 文件負(fù)責(zé)以下功能的設(shè)置：頁面路徑、窗口外觀、菜單導(dǎo)航、網(wǎng)絡(luò)超時和調(diào)試模式。

公共樣式表app.wxss 文件用于擴展CSS 樣式，在兼容大部分CSS 樣式語法的基礎(chǔ)上，形成特有的風(fēng)格，wxss文件中會默認(rèn)定義一些全局樣式。每個小程序頁面，可以通過引入這些全局樣式來渲染頁面效果，這樣提高了程序的復(fù)用性；如果要個性化進行頁面渲染，也非常容易，只需在某個頁面重新定義同名樣式，把全局樣式覆蓋即可。與此同時，用戶也可以自定義全局樣式，這樣保證了方便和靈活。

小程序框架頁面文件由4個文件組成：頁面配置、頁面結(jié)構(gòu)、腳本語言和樣式表。這些文件都位于pag?es文件夾中。每個頁面對應(yīng)一個獨立的文件夾，比如登錄頁面login 文件夾，它的下面放置4個文件：login.js 進行業(yè)務(wù)邏輯處理；login.json 負(fù)責(zé)參數(shù)配置；login.wxml 是頁面顯示的主體結(jié)構(gòu)，負(fù)責(zé)頁面框架內(nèi)容顯示；login.wxss 為login.wxml 頁面提供樣式，結(jié)合login.wxml文件，可以構(gòu)建出頁面外觀效果。

2.2 Node.js技術(shù)簡介

傳統(tǒng)的JavaScript 代碼一般運行在瀏覽器中，此時瀏覽器就是JavaScript 代碼的運行環(huán)境。Node.js也是一個JavaScript 代碼運行環(huán)境，JavaScript 代碼如果在Node.js 環(huán)境中運行，Node.js 就是JavaScript 代碼的運行時平臺，在這個運行環(huán)境中提供了一些功能性API，例如字符串API、網(wǎng)絡(luò)操作API等。

瀏覽器端JavaScript 會操作DOM 和BOM，在客戶端瀏覽器上實現(xiàn)用戶交互、表單驗證、動畫特效等。

Node.js 運行在服務(wù)器上，由基于Chrome V8 引擎的運行環(huán)境提供的JavaScript 解析執(zhí)行，不操作DOM和BOM。常常用來做一些在客戶端做不到的事情，例如處理IO密集型應(yīng)用、訪問數(shù)據(jù)庫等。可用于開發(fā)基于服務(wù)器的Web應(yīng)用程序，實現(xiàn)Web全棧開發(fā)。

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

根據(jù)上述分析，本文提出了針對移動在線音樂播放的一種解決方案，采用Node.js 開發(fā)服務(wù)端，微信小程序作為客戶端，為用戶提供隨時隨地、高效快捷的音樂服務(wù)。

整個音樂播放平臺的架構(gòu)分成三部分：數(shù)據(jù)層，服務(wù)層和用戶層。數(shù)據(jù)層負(fù)責(zé)數(shù)據(jù)存儲、備份、日志記錄和維護等任務(wù)；服務(wù)層負(fù)責(zé)業(yè)務(wù)處理、緩存處理、會話處理、異常處理和權(quán)限控制等；用戶層是用戶登錄使用具體功能的核心。為便于模塊化開發(fā)，本平臺采用了微信小程序+Node.js的前后端分離開發(fā)模式。

3.1 數(shù)據(jù)層

音樂播發(fā)平臺的數(shù)據(jù)源有多種格式，后臺系統(tǒng)能夠利用信息技術(shù)自動獲取數(shù)據(jù)庫中的音樂數(shù)據(jù)，也可以采用人工上傳方式，添加音樂數(shù)據(jù)文件，增加音樂列表信息等，還能夠在移動設(shè)備上，借助手機App、小程序等提供音樂信息。獲取的數(shù)據(jù)經(jīng)過后端的整理、計算、分析，由數(shù)據(jù)層根據(jù)邏輯關(guān)系，將數(shù)據(jù)和文件保存到開源的MySQL數(shù)據(jù)庫中。

3.2 服務(wù)層

服務(wù)層基于Node.js 的Express 框架，根據(jù)功能設(shè)計分為會話層、事務(wù)層和通訊層。各層的作用與關(guān)系如下：

1）會話層通過創(chuàng)建對應(yīng)的音樂數(shù)據(jù)主體，并在會話層保留訪問接口，用于訪問會話內(nèi)部對應(yīng)的內(nèi)容。

2）事務(wù)層利用會話層進行任務(wù)調(diào)度、數(shù)據(jù)流操作、容錯保護和鏈路跟蹤等。通過調(diào)用數(shù)據(jù)層接口，對音樂數(shù)據(jù)整理、計算、分析，保存到后臺數(shù)據(jù)庫中；或根據(jù)服務(wù)請求，讀取數(shù)據(jù)發(fā)送給HTTP接口。

3）通訊層提供標(biāo)準(zhǔn)化的HTTP 接口，接收小程序頁面的請求，完成用戶認(rèn)證、數(shù)據(jù)認(rèn)證和權(quán)限認(rèn)證。本文利用Node.js 中Express 框架實現(xiàn)通訊接口，構(gòu)建Web 運行環(huán)境，通過Web 服務(wù)與小程序進行通訊，使得后端服務(wù)的開發(fā)和部署得到簡化。

3.3 用戶層

本文采用微信小程序作為框架進行界面UI開發(fā)，利用WXML、WXSS和JavaScript 進行功能實習(xí)。系統(tǒng)利用小程序組件進行快速開發(fā)，并將其打包成項目部署文件部署到騰訊服務(wù)器中。系統(tǒng)由用于管理音樂播放和音樂使用等的業(yè)務(wù)模塊和管理用戶、使用權(quán)限等的用戶模塊構(gòu)成。

1）用戶模塊。設(shè)置模塊包括用戶信息、控制信息等功能。由于系統(tǒng)的使用者是不受限制的，不同的用戶類型，具有獨立的訪問權(quán)限，每個用戶登錄時，也需要記錄保存其登錄狀態(tài)。用戶模塊會記錄用戶名、登錄時間等狀態(tài)信息，并負(fù)責(zé)與服務(wù)端通訊，實時更新用戶狀態(tài)信息，并根據(jù)權(quán)限信息控制用戶可操作的模塊。

2）業(yè)務(wù)模塊。業(yè)務(wù)模塊包括管理音樂播放和音樂使用等功能。用于實現(xiàn)用戶對音樂的直接使用，并且根據(jù)用戶的個人喜好情況推薦對應(yīng)類型的音樂，將所有播放音樂的統(tǒng)計結(jié)果進行匯總顯示，方便用戶快速地查找歷史播放記錄。

由于所開發(fā)的音樂平臺部署在騰訊云中，所有聯(lián)網(wǎng)用戶都能隨時隨地使用此系統(tǒng)，非常方便快捷。

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

微信小程序音樂平臺共分為三大部分：音樂推薦、播放器、播放列表。平臺將諸如最新音樂、個人喜好音樂、音樂榜單等各項信息加以整合，利用各種圖表和組件呈現(xiàn)，保證界面設(shè)計的簡潔，實現(xiàn)了音樂數(shù)據(jù)的直觀展示，其優(yōu)點具體表現(xiàn)在：1）實時動態(tài)更新音樂。用戶隨時都能查看了解最新的音樂情況，且不永久占用手機空間。2）界面簡潔，用戶使用體驗良好。借助微信小程序本身具有的組件和控件，在界面設(shè)計上會非常高效，同時能夠大幅提升用戶的使用體驗。

其中，首頁設(shè)計分成導(dǎo)航切換區(qū)tab，內(nèi)容區(qū)con?tent和播放區(qū)player三個部分。如圖1所示。

圖1 首頁設(shè)計結(jié)構(gòu)

在tab 區(qū)，使用標(biāo)簽頁完成導(dǎo)航內(nèi)容的切換，此時，將創(chuàng)建三個wxml 文件，對應(yīng)三項功能，通過左右滑動頁面進行切換，類似于網(wǎng)頁開發(fā)中的焦點圖切換的效果。

推薦頁面則利用微信小程序組件swiper 構(gòu)建多個瀏覽模塊，包含輪播圖片、功能按鈕和熱門音樂三部分。如圖2所示。

圖2 推薦頁面結(jié)構(gòu)圖

播放器頁面包括音樂信息、專輯封面和播放進度三個部分，下面通過圖3說明頁面的嵌套關(guān)系和結(jié)構(gòu)。

圖3 播放器頁面結(jié)構(gòu)設(shè)計

最后，通過Node.js中的Express框架，完成服務(wù)器端程序的實現(xiàn)。本地運行效果如圖4所示。

圖4 服務(wù)端程序運行效果

第一步，創(chuàng)建express服務(wù)器。具體實現(xiàn)如下：

var express=require('express')

var serveIndex=require('serve-index')

var serveStatic=require('serve-static')

var multiparty=require('multiparty')

var util=require('util')

var LOCAL_BIND_PORT=3000

var app=express()

第二步，通過中間件處理HTTP 請求。當(dāng)一個HTTP請求到達(dá)服務(wù)器后，服務(wù)器實例做出響應(yīng)，調(diào)用中間件，并在完成后根據(jù)設(shè)置，決定是否再調(diào)用下一個中間件。use 是express 調(diào)用中間件的方法，它返回一個函數(shù)。具體實現(xiàn)如下：

var serve=serveStatic('./htdocs')

app.use('/',serveIndex('./htdocs',{'icons':true}))

這里指定靜態(tài)網(wǎng)頁目錄，當(dāng)微信小程序發(fā)出非HTML 文件請求時，服務(wù)器端就到htdocs 目錄尋找對應(yīng)的文件。

第三步，完成response處理，當(dāng)小程序發(fā)來訪問請求時，通過post 方法將音樂文件讀入進程，發(fā)送給小程序。具體實現(xiàn)如下：

app.post('/upload',function(req,res){

var form=new multiparty.Form()

form.encoding='utf-8'

form.uploadDir='./htdocs/upfile'

form.maxFilesSize=4*1024*1024

form.parse(req,function(err,fields,files){

if(err){

console.log('parse error:'+err)

}else{

console.log('parse files:'+JSON.stringify(files))

}

res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'})

res.write('received upload')

res.end()

})

})

最后一步，完成服務(wù)器監(jiān)聽，并提示。具體實現(xiàn)如下：

app.get('/*',function(req,res){

serve(req,res)

});

console. log(`Start static file server at :: ${LO?CAL_BIND_PORT},Press^+C to exit`)

app.listen(LOCAL_BIND_PORT)

至此，完整地實現(xiàn)了微信小程序部分和服務(wù)器程序部分，將微信小程序部署在云端，node.js 服務(wù)程序上傳到云服務(wù)器上，并指定微信小程序的訪問地址為服務(wù)程序所在的地址，就完成了全部的部署工作。

通過訪問測試，可以較好地完成在線音樂播放，并且具備隨用隨棄的特點，十分方便。

5 結(jié)束語

本文針對當(dāng)前在線音樂播放中面臨的一些問題，進行了思考和創(chuàng)新，利用移動開發(fā)、云服務(wù)等技術(shù)，充分整合各類信息資源，初步設(shè)計實現(xiàn)了一個能在手機設(shè)備上高效訪問的音樂播放平臺。本系統(tǒng)是基于微信小程序的典型應(yīng)用，能夠有效提供在線音樂服務(wù)，助力文化推廣，具有較好的應(yīng)用價值和意義。