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

今天進入音樂播放器教程的最後一部分，主要是前端播放器和後端數據庫通信整合。

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

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

一、更新了下images目錄下的common.js和common.css，請覆蓋原來文件便可。

二、修改了下wxgetmusic.php，請覆蓋原文件便可

三、先後端整合代碼都在audio.html裏，先覆蓋原來文件，而後參看教程進行修改。

---

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

5、音樂播放器先後端整合

在前兩期教程中咱們已經將前臺播放器界面、後臺音樂內容管理以及數據通信接口完成了，如今要作的事情就是編寫代碼讓前臺播放器利用通信接口來調用後臺音樂內容，實現一些播放器操做。

以前的前臺頁面是實現播放器效果展示和離線播放，因此在整合的時候對以前的html代碼作了一些調整，去除了音樂封面、音樂信息以及音樂url等，這裏就不重點講了，有興趣的朋友能夠將先後兩個文件作個對比。

下面重點來說如何使用JS來完成數據調用以及播放器操做，全部的代碼都在第69行<script>以後，首先是初始化播放器頁面，以下圖：

第7一、73行是定義一些變量，同時新建一個播放器類，類的定義在common.js裏，這個類是有關於播放器的一些綁定操做，好比播放、暫停，檢測歌曲載入和播放時間，檢測歌曲是否播放完畢等，有興趣的能夠去看下。

第74行是jquery的一種語法，表示當頁面加載完畢時執行這個函數，也就是當前臺頁面加載完成後執行該函數裏的一些程序。

第76行這個函數定義也在common.js裏，是將歌曲列表層隱藏起來，隱藏的方法是獲取當前頁面的寬度，而後將列表左偏移頁面寬度。

第77到115行是對播放器上的一些按鈕進行事件綁定，$('#按鈕名').click(函數)至關於在按鈕上加onclick事件，即當用戶點擊按鈕時觸發操做。

第117行播放器類綁定播放器控件。

第119行到126行獲取前端頁面url傳遞的參數，一個是歌曲的ID，一個是微信用戶ID。播放器前端頁面是一個.html的靜態頁面，所以獲取url參數是經過location.search來獲取的，parseQuery()函數是用來處理獲取的數據的。

第128行經過get_song函數從服務器獲取歌曲詳細信息，更新播放器。

第130行經過get_list函數從服務器獲取歌曲列表信息，更新列表內容。

get_song()是歌曲詳細信息獲取的函數，以下圖：

該函數的參數有兩個，一個是song_id，即須要獲取歌曲的ID號，播放器切換上下歌曲、歌曲列表點選歌曲都是調用這個函數將歌曲ID傳遞到服務器上，另外一個參數opne_id是微信用戶ID，主要是輔助判斷該歌曲是否爲用戶表態喜歡的歌曲。

獲取歌曲信息採用的是Ajax這種異步獲取的方式，這樣能夠在不刷新當前頁面的狀況下從服務器上拿到數據，更新當前頁面的一些內容，它也分GET和POST兩種模式，這裏都是用了GET模式。

Ajax的格式是$.ajax({過程})，其中有一些必寫參數：

URL:是指服務器接口地址，因爲採用的是get的方式，因此除了地址外還要將參數傳遞過去，在這裏傳遞過去的是t=jsonp（服務器返回數據的格式）、song_id（歌曲ID）、open_id（微信用戶ID），接口地址爲服務器上wxgetmusic.php，這裏請各位修改下sae的域名。

DATATYPE:接受數據的格式
JSONP:校驗的變量名
TIMEOUT:保持鏈接最大時間，超過則斷開
SUCCESS：通信成功後執行事件

當song_id=0，open_id=aaa這樣條件下，前端頁面去請求服務器時，服務器返回數據會以下：

jQueryXXXX這個是校驗的變量名，後面就是json格式的歌曲信息數據，包括歌曲信息、上一首下一首的ID號等。獲取到這些數據後就能夠相應更新播放器內容。

第152到155行是更新歌曲名稱、演唱者、歌曲說明、歌曲封面，其中.html()是jquery的函數，表示替換指定控件的內容，.css()也是jquery的函數，表示修改控件的樣式。

第158行是更新播放器控件的歌曲url，即第38行

第160到162行是給全局變量賦值，這三個變量在初始化的時候定義了，分別對應上一首、下一首和當前歌曲。

第164到171行是根據返回的表態標識來判斷當前歌曲的喜歡樣式，即紅心仍是灰心。

第175行是當接口文件返回錯誤，即wxgetmusic.php裏出現throw new Exception(錯誤信息)跳出時，將錯誤信息顯示出來。

like()是用戶點擊喜歡按鈕事件的函數，以下圖：

結構和上面差很少，不一樣的是這裏url的參數多了do=like，這樣wxgetmusic.php就會接收到do這個參數爲like，表示執行第44到第88行用戶表態的操做。

prev_song()和next_song()是對應上下歌曲按鈕的函數，以下圖：

這兩個函數只是作了一些邏輯判斷，經過prev_id和next_id兩個全局變量來肯定是否執行播放操做，播放操做仍是調用了get_song()。

get_list()是獲取歌曲列表函數，以下圖：

這裏的重點有三個：

第247行到252行判斷獲取所有歌曲列表仍是喜歡歌曲列表。

第262行到274行是歌曲列表內容展現格式整理，因爲服務器返回的歌曲列表是一個數組，所以在這裏用$.each作數組的讀取，而後拼接成一個個

<

dl>內容塊，最後總體替換fmlistdiv的內容。

第275行到287行是頁碼區內容展現，page是服務器返回的當前頁碼，若是當前頁碼不爲1則表示不是首頁，所以要顯示首頁和上一頁按鈕，real_page是服務器返回的總頁數，若是當前頁碼不等於總頁數表示不是尾頁，所以要顯示尾頁和下一頁。

get_song_from_list()列表歌曲點擊播放函數，以下圖：

這個函數只是多了一步，就是把列表隱藏起來，而後執行get_song。

關於前臺頁面和後臺音樂數據整合就是這些，最後發個微信接口文件的代碼，以下圖：

這是一個標準的微信圖文消息回覆格式，要注意的是圖文消息地址Url這個賦值，我除了把播放器url地址放上以外，還有相應的參數，其中0表示默認歌曲ID，&&是分隔符，後面的$fromUsername是當前微信用戶的ID號，這樣當用戶點擊該圖文消息時，實際訪問的地址是：

播放器頁面地址?歌曲ID=0&&微信用戶ID=xxx

播放器也就能夠獲取到歌曲ID和微信用ID了！關於播放器的教程到此完畢，但願對你們有幫助！

另外自定義菜單接口最近有了新變化，以前寫的接口文件沒有與時俱進，我抽空會更新下提供給你們！