本文帶大家開發(fā)一個音樂播放器微信小程序——微音樂。該播放器通過QQ音樂接口獲取音樂相關(guān)數(shù)據(jù)，首先在頁面中顯示一個音樂分類列表，用戶選擇分類之后從QQ音樂中查詢獲取符合要求的音樂列表，在這個音樂列表中單擊一首音樂即進入播放頁面進行播放。另外，還需要做一個查詢功能，可按歌手或音樂名稱進行查詢。

QQ音樂API

與“微天氣”案例類似，本案例也是通過互聯(lián)網(wǎng)中已有的API來獲取音樂信息。在互聯(lián)網(wǎng)上這類API很多，本案例使用“易源接口”網(wǎng)站提供的QQ音樂接口，易源接口網(wǎng)址如下：

https://www.showapi.com/

認識易源接口網(wǎng)站

在瀏覽器中打開易源接口網(wǎng)站，可看到如圖1所示的界面。從網(wǎng)頁左邊的“API分類導航”列表可看到，該網(wǎng)站提供了不同種類的API，在大類中又有很多小類，天氣預報的接口也有。

在易源接口網(wǎng)站中提供的接口很多是免費的，要使用這些免費接口，也需要在網(wǎng)站中注冊賬號，然后申請使用。申請成功之后，在“我的應用”中就可看到申請應用的appid，如圖2所示。在應用同一行的secret列單擊“查看密鑰”，將彈出對話框顯示該應用的密鑰。將appid和secret復制下來，以備程序中使用。

圖1 易源接口

圖2 我的接口

QQ音樂接口

本案例使用易源接口提供的“QQ音樂”接口，其說明如圖3所示?？梢钥吹?，這個接口是免費使用的。

圖3 QQ音樂接口

在圖3所示頁面的左側(cè)“接入點列表”中可看到該API提供了3個接入點。

1. 熱門榜單

在圖3所示頁面中，單擊左側(cè)的“熱門榜單”，將顯示該接入點的詳細信息。

熱門榜單接入點的URL地址如下：

http://route.showapi.com/213-4

請求該URL地址時，還需要傳入一些參數(shù)，主要有以下這些。

• showapi_appid：這是用戶申請的appid。
• showapi_sign：這是用戶應用的密鑰。
• topid：這是音樂分類編碼（如5表示內(nèi)地音樂，6表示港臺音樂）。

該接入點返回的JSON數(shù)據(jù)格式如下（與易源接口官方提示的內(nèi)容有些不同）：

{
    "showapi_res_code": 0,
    "showapi_res_error": "",
    "showapi_res_body": {
        "ret_code": 0,
        "pagebean": {
            "songlist": [{
                "songname": "一定要幸福 (《咱們相愛吧》電視劇主題曲)",
                "seconds": 294,
                "albummid": "003V7SAg16Ed0F",
                "songid": 109127914,
                "singerid": 4607,
                "albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/
                          0/F/003V7SAg16Ed0F.jpg",
                "albumpic_small": "http://i.gtimg.cn/music/photo/
                       mid_album_90/0/F/003V7SAg16Ed0F.jpg",
                "downUrl": "http://dl.stream.qqmusic.qq.com/109127914.mp3?
                        vkey=3B0957F1A4CDCAD8875251834B7C0DA2D4287FA3BC1A5F73AA
                         002D3833AE5685FE6168E75BBDB277CB0635E3B483CB6E3A073
                         E7A1B9723A4&guid=2718671044",
                "url": "http://ws.stream.qqmusic.qq.com/
                         109127914.m4a?fromtag=46",
                "singername": "張靚穎",
                "albumid": 1679081
            },
                 ……
            ],
            "total_song_num": 100,
            "ret_code": 0,
            "update_time": "2016-11-17",
            "color": 0,
            "cur_song_num": 100,
            "comment_num": 1010,
            "currentPage": 1,
            "song_begin": 0,
            "totalpage": 1
        }
    }
}

從上面的JSON數(shù)據(jù)可看出，該接入點返回的數(shù)據(jù)中，音樂列表數(shù)據(jù)保存在songlist數(shù)組中，該數(shù)組中的每一個元素是一首音樂的信息，各字段的含義如下：

"songname":音樂名稱,
"seconds": 時長,
"songid": 音樂ID,
"singerid": 歌手id,
"albumpic_big": 專輯大圖片，高寬300,
"albumpic_small": 專輯小圖片，高寬90,
"downUrl": mp3下載鏈接,
"url": 流媒體地址,
"singername": 歌手名,
"albumid": 專輯id

2. 根據(jù)歌名、人名查詢歌曲

熱門榜單接入點的URL地址如下：

http://route.showapi.com/213-1

請求該URL地址時，還需要傳入一些參數(shù)，主要有以下這些。

• showapi_appid：這是用戶申請的appid。
• showapi_sign：這是用戶應用的密鑰。
• keyword：查詢關(guān)鍵字（人名或歌名）。

該接入點返回的JSON數(shù)據(jù)格式如下所示：

{
    "showapi_res_code": 0,
    "showapi_res_error": "",
    "showapi_res_body": {
        "ret_code": 0,
        "pagebean": {
            "w": "劉德華",
            "allPages": 14,
            "ret_code": 0,
            "contentlist": [{
                "m4a": "http://ws.stream.qqmusic.qq.com/
                       179990.m4a?fromtag=46",
                "media_mid": "002Ly1Xh1pwBGt",
                "songid": 179990,
                "singerid": 163,
                "albumname": "幻影中國巡回演唱會Live",
                "downUrl": "http://dl.stream.qqmusic.qq.com/179990.mp3
                       ?vkey=1BD3868E2A0278D184D1FEC2A9391F1A673AAF1FCAB59DEA
                       F0DCCF80ED58E564978D1EAAF5E53B85B0E5D30ACFF2AFBF32296
                       4C86ED8B14D&guid=2718671044",
                "singername": "劉德華",
                "songname": "練習 (Live)",
                "strMediaMid": "002Ly1Xh1pwBGt",
                "albummid": "004UpCFj3kyano",
                "songmid": "002Ly1Xh1pwBGt",
                "albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/
                        n/o/004UpCFj3kyano.jpg",
                "albumpic_small": "http://i.gtimg.cn/music/photo/
                        mid_album_90/n/o/004UpCFj3kyano.jpg",
                "albumid": 15531
            },
            ,],
            "currentPage": 1,
            "notice": "",
            "allNum": 393,
            "maxResult": 30
        }
    }
}

可以看出，這與使用熱門榜單接入點獲取的數(shù)據(jù)格式類似，只是這里多了一些查詢相關(guān)的數(shù)據(jù)，另外，返回的音樂列表不是保存在songlist數(shù)組中了，而是保存contentlist數(shù)組中，流媒體地址不是保存在url中，而是保存在m4a中。其他數(shù)據(jù)的含義基本相同，這里就不列出來了。

本案例主要使用這兩個接入點，讀者可在本案例的基礎(chǔ)上做歌詞顯示功能，則需要使用到“根據(jù)歌曲id查詢歌詞”這個接入點。

另外，在訪問某一個接入點后如果返回“沒有訂購套餐”的錯誤結(jié)果，由于本API是免費使用的，出現(xiàn)這個提示說明用戶對接入點還未訂購?？稍趫D3所示頁面中單擊“價格一覽表”，顯示如圖4所示頁面，單擊左側(cè)的“為所有免費接入點一鍵訂購”即可正常使用所有免費接入點了。

圖4 為所有免費接入點一鍵訂購

界面設(shè)計

“微音樂”需要設(shè)計4個界面，分別是：

（1）音樂分類列表界面，如圖5所示，顯示音樂的分類列表。

（2）音樂列表界面，如圖6所示，這是在圖5所示界面中選擇某一分類中，列出該分類下的音樂曲目，為了使界面更好看一點，在曲目上方顯示一張圖片，這張圖片直接獲取第一首曲目的專輯封面圖片。

（3）音樂播放界面，如圖7所示，在圖6所示曲目列表中單擊一首曲目，就進入本界面，上方顯示專輯圖片，下方顯示歌名、歌手名稱和播放按鈕，單擊播放按鈕就可播放。

（4）搜索界面，如圖8所示，在輸入框中輸入關(guān)鍵字，單擊“立即搜索”按鈕進行搜索，結(jié)果顯示在下方的列表中，單擊結(jié)果中的某一首歌曲，進入圖7所示播放界面開始播放。

創(chuàng)建項目

界面初稿設(shè)計出來之后，就可以考慮進入實際程序開發(fā)過程了。

準備資源

從圖5至圖8所示的4個頁面可看出，本案例中需要顯示一些圖標和圖片，其中專輯封面圖片通過API動態(tài)獲取，而每首歌典前面出現(xiàn)的圖標就需要在編寫代碼之前準備好，還有圖7中的播放按鈕圖標，以及與其對應的暫停播放的圖標。

另外，在界面下方有一個工具條，最好也設(shè)計出對應的圖標。對于工具條中的圖標還需要設(shè)計出正常狀態(tài)和選擇狀態(tài)兩種不同的圖標，方便用戶區(qū)分當前選擇是哪一個tab。

通常，這些圖標可以從網(wǎng)絡(luò)中去搜索，然后再用Photoshop等圖像處理軟件進行簡單的加工即可。本案例使用到的圖標如圖9所示。

圖9 案例用到的圖標

在項目中新建一個名為images的子目錄，將如圖9所示的設(shè)計好的圖標復制到該子目錄備用。

創(chuàng)建項目

首先按以下步驟創(chuàng)建出項目。

（1）創(chuàng)建名為ch12的項目目錄。

（2）啟動微信小程序開發(fā)工具，在啟動界面中單擊“添加項目”按鈕，打開如圖10所示的對話框。