《微信公衆平臺入門到精通》Vol.21

今天進入音樂播放器教程的第二部分，主要是有關服務器端音樂內容管理和前端通信接口的代碼。

源碼請點擊這裏下載，或者在公衆號裏輸入「微信代碼」查看下載鏈接，而後將下載連接本身想辦法搞到PC上而後再下載，下載後上傳到本身sae裏，和上一個教程的播放器前端頁面在同個地方就能夠，後臺管理是在瀏覽器運行的。

建議先下載安裝了再看文章，如下是注意事項：

一、music.sql是數據庫表文件，不瞭解SAE數據庫的能夠輸入數字13查看《微信公衆平臺入門到精通》Vol.13。

二、圖片上傳使用的是SAE的Storage，不瞭解的能夠輸入數字10查看《微信公衆平臺入門到精通》Vol.10。

三、其餘文件說明：

base-class.php  自定義函數，無需改動
wxmusicadd.php 音樂添加，須要改動的是Storage空間名稱
wxmusic.php 音樂管理，無需改動
wxgetmusic.php  前端數據通信接口，無需改動

---

第十六章 微信音樂播放器開發

3、音樂添加與管理

音樂內容添加與管理是經過服務器程序來實現的，若是有學習以前教程的朋友應該很熟悉結構了，而且我在源碼裏有詳細註解，我這裏就簡單的過一遍，音樂內容新增文件是wxmusicadd.php，界面以下：

這裏要注意的是歌曲連接，網上很多連接都是有訪問保護的，能在線聽，可是無法經過第三方路徑訪問，最好的解決方法固然是放到本身的地盤裏，好比可使用又拍雲存儲這些。

千萬不要把歌曲放到SAE的Storage空間裏，流量消耗大得要命，你那點豆子根本不夠用的，另外不要用qq音樂的音樂連接，在微信裏沒法收聽。

代碼須要修改的地方就是第100行，這裏有個weixincourse，這個是個人Storage空間名字，你必須修改爲你本身的。

還有就是我在頁尾加了個JS的驗證表單，能夠在表單提交前進行驗證是否所有填完，以下圖：

音樂管理界面以下：

---

4、前端數據通信接口

音樂後臺管理這塊其實不難，跟以前我分享的代碼結構基本同樣，重點是在如何讓播放器和數據庫進行通信，這裏使用的技術是Ajax，它是一種異步的JavaScript與XML技術，說白了就是可讓前端在無刷新的狀況下進行歌曲的切換、列表的獲取等。

也就是播放器利用JS發送一個指令到後臺，後臺響應這個指令將符合指令的格式化數據反饋到前臺，wxgetmusic.php就是後臺進行數據處理輸出的接口文件，前端這塊下篇再講。

接口文件我是用了三層函數結構寫的，分別是指令獲取驗證、數據處理、數據輸出三塊，定義了三個局部變量數組來提升數據安全性。

指令獲取驗證函數比較簡單，就是從url獲取前端傳遞過來的參數，進行過濾和賦值，以下圖：

callback是Ajax在數據傳輸時的標識參數
t是輸出數據的格式標識參數
do是前端發送過來的操做指令，分別有list（所有歌曲列表）、like_list（喜歡的歌曲列表）、like（喜歡操做）
open_id是微信用戶的ID號
song_id是歌曲的ID號
page是當前頁碼，若是爲空則默認是1。

數據處理函數比較複雜，首先是獲取歌曲列表，以下圖：

第47行到59行是根據頁碼來從數據庫裏獲取歌曲列表

第60行到74行是計算上一頁和下一頁的頁碼，根據這個來控制前端是否顯示上下翻頁的按鈕

第77行到81行是將全部處理完的數據複製給輸出數組。

第86行throw new Exception是中斷程序拋出錯誤，也就是返回錯誤提示。

喜歡歌曲列表和所有歌曲列表差很少，區別就是喜歡歌曲列表要加個檢測是否獲取到微信用戶的OPENID，而後經過OPENID來獲取歌曲列表，同時操做表是music_user而不是music，以下圖。

用戶對歌曲表態的操做牽扯的邏輯較多，以下圖：

第150行判斷是否獲取到用戶的openid和要表態歌曲的ID

第153行查看music_user裏該用戶是否已經有過這首歌的記錄

第157行到160行，若是用戶對這首歌已經表過態，則判斷這條記錄的status值是1仍是0，用這個來控制是喜歡仍是不喜歡，而後更新表態的狀態。

第165行到173行，若是用戶第一次對這首歌表態，則從music表中獲取該歌曲的信息，而後在music_user裏插入一條新記錄，並將stauts賦值爲1，即用戶喜歡此歌曲，同時將like_flag賦值爲1。

第176行返回$like_flag值，即告訴前端用戶的表態結果，1爲喜歡，0爲不喜歡。

最後是沒有任何DO的操做，默認爲向播放器返回一首單曲的處理，以下圖：

第193行到196行，前端有歌曲ID傳輸過來則返回該歌曲的數據

第197行到292行，前端傳輸過來的ID爲-1，表示歌曲播放到最後一首了，循環播放返回第一首歌曲的數據。

第203行到207行，前端沒有任何ID傳輸過來，則播放最新的一首歌曲。

第209行到215行，已經得到了要播放的歌曲數據，再查找這首歌曲上一首和下一首歌曲的ID號，返回給前端。

第222行到226行，已經得到了要播放的歌曲數據，同時前端還傳輸過來微信用戶ID，則檢查music_user裏是否有該用戶表態喜歡的記錄，返回歌曲的表態數據。

函數執行的處理器我是用了try{}catch{}，自己做用是用來處理異常的，不過這裏能夠方便的用來作接口返回處理器。指令獲取處理和數據處理函數在try裏運行，若是一切正常則輸出數組的error爲0，若是有錯誤，即經過throw new Exception拋出了錯誤提示，則程序終止，error爲1，同時errmsg返回這個錯誤提示。

最後是輸出格式化的數據，以下圖：

這裏有三個格式輸出：

• serialize是將數組以字符串方式返回，這個方便在瀏覽器直接查看運行結果。

• json是將數組以json格式返回，能夠用js反解成數組。

• jsonp也是將數組以json格式返回，可是不一樣的是他能夠跨域傳輸數據，這個應用的地方主要是在一些分佈式服務器上。

最後運行的效果以下：

獲取所有歌曲列表

用戶表態操做成功

獲取單曲

動態程序這塊基本就這些，下一期講如何將先後端經過Ajax鏈接通信。