基于微信小程序的音樂播放平臺應用設計研究

梁曉婭

（武漢軟件工程職業學院，湖北 武漢 430000）

1 概述

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

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

2 相關技術分析

2.1 微信小程序技術簡介

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

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

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

表1 框架全局文件

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

其中，公共設置文件app.json 文件負責以下功能的設置：頁面路徑、窗口外觀、菜單導航、網絡超時和調試模式。

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

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

2.2 Node.js技術簡介

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

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

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

3 系統設計

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

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

3.1 數據層

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

3.2 服務層

服務層基于Node.js 的Express 框架，根據功能設計分為會話層、事務層和通訊層。各層的作用與關系如下：

1）會話層通過創建對應的音樂數據主體，并在會話層保留訪問接口，用于訪問會話內部對應的內容。

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

3）通訊層提供標準化的HTTP 接口，接收小程序頁面的請求，完成用戶認證、數據認證和權限認證。本文利用Node.js 中Express 框架實現通訊接口，構建Web 運行環境，通過Web 服務與小程序進行通訊，使得后端服務的開發和部署得到簡化。

3.3 用戶層

本文采用微信小程序作為框架進行界面UI開發，利用WXML、WXSS和JavaScript 進行功能實習。系統利用小程序組件進行快速開發，并將其打包成項目部署文件部署到騰訊服務器中。系統由用于管理音樂播放和音樂使用等的業務模塊和管理用戶、使用權限等的用戶模塊構成。

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

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

由于所開發的音樂平臺部署在騰訊云中，所有聯網用戶都能隨時隨地使用此系統，非常方便快捷。

4 系統實現

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

其中，首頁設計分成導航切換區tab，內容區con?tent和播放區player三個部分。如圖1所示。

圖1 首頁設計結構

在tab 區，使用標簽頁完成導航內容的切換，此時，將創建三個wxml 文件，對應三項功能，通過左右滑動頁面進行切換，類似于網頁開發中的焦點圖切換的效果。

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

圖2 推薦頁面結構圖

播放器頁面包括音樂信息、專輯封面和播放進度三個部分，下面通過圖3說明頁面的嵌套關系和結構。

圖3 播放器頁面結構設計

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

圖4 服務端程序運行效果

第一步，創建express服務器。具體實現如下：

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 請求。當一個HTTP請求到達服務器后，服務器實例做出響應，調用中間件，并在完成后根據設置，決定是否再調用下一個中間件。use 是express 調用中間件的方法，它返回一個函數。具體實現如下：

var serve=serveStatic('./htdocs')

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

這里指定靜態網頁目錄，當微信小程序發出非HTML 文件請求時，服務器端就到htdocs 目錄尋找對應的文件。

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

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()

})

})

最后一步，完成服務器監聽，并提示。具體實現如下：

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)

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

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

5 結束語

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