本文帶大家開發一(yi)個音(yin)(yin)(yin)樂(le)(le)(le)(le)播放(fang)器微信小程序(xu)——微音(yin)(yin)(yin)樂(le)(le)(le)(le)。該播放(fang)器通過(guo)QQ音(yin)(yin)(yin)樂(le)(le)(le)(le)接口獲取音(yin)(yin)(yin)樂(le)(le)(le)(le)相關數據，首(shou)先在頁面中(zhong)(zhong)顯示(shi)一(yi)個音(yin)(yin)(yin)樂(le)(le)(le)(le)分類(lei)列表(biao)，用戶選(xuan)擇分類(lei)之(zhi)后從(cong)QQ音(yin)(yin)(yin)樂(le)(le)(le)(le)中(zhong)(zhong)查(cha)(cha)詢(xun)(xun)獲取符合要求的音(yin)(yin)(yin)樂(le)(le)(le)(le)列表(biao)，在這個音(yin)(yin)(yin)樂(le)(le)(le)(le)列表(biao)中(zhong)(zhong)單擊(ji)一(yi)首(shou)音(yin)(yin)(yin)樂(le)(le)(le)(le)即進入播放(fang)頁面進行播放(fang)。另外，還需要做一(yi)個查(cha)(cha)詢(xun)(xun)功能(neng)，可按歌手或音(yin)(yin)(yin)樂(le)(le)(le)(le)名稱進行查(cha)(cha)詢(xun)(xun)。

QQ音樂API

與“微(wei)天氣”案例(li)(li)類(lei)似，本案例(li)(li)也(ye)是通過互(hu)聯網(wang)中已(yi)有的API來獲取音樂信(xin)息(xi)。在互(hu)聯網(wang)上這類(lei)API很(hen)多，本案例(li)(li)使(shi)用“易源接(jie)口”網(wang)站(zhan)提供的QQ音樂接(jie)口，易源接(jie)口網(wang)址如下(xia)：

//www.showapi.com/

認識易源接口網站

在(zai)瀏覽器中打開易源(yuan)接(jie)口(kou)網站(zhan)，可看(kan)到如圖1所(suo)示的界(jie)面(mian)。從網頁左邊的“API分類(lei)導航”列表可看(kan)到，該(gai)網站(zhan)提供了不同種類(lei)的API，在(zai)大(da)類(lei)中又有(you)很多小類(lei)，天氣預報的接(jie)口(kou)也有(you)。

在(zai)易源(yuan)接(jie)口網站中(zhong)提(ti)供的接(jie)口很(hen)多是(shi)免(mian)費的，要使用(yong)這(zhe)些(xie)免(mian)費接(jie)口，也需要在(zai)網站中(zhong)注冊賬號，然后申請(qing)使用(yong)。申請(qing)成功(gong)之后，在(zai)“我的應用(yong)”中(zhong)就可看(kan)到申請(qing)應用(yong)的appid，如(ru)圖(tu)2所(suo)示(shi)。在(zai)應用(yong)同一行(xing)的secret列單(dan)擊“查看(kan)密鑰(yao)”，將(jiang)彈出對話框顯示(shi)該應用(yong)的密鑰(yao)。將(jiang)appid和secret復(fu)制下來，以備程(cheng)序中(zhong)使用(yong)。

圖1 易源接口

圖(tu)2 我的接口

QQ音樂接口

本案(an)例使(shi)用易源接口提供的(de)“QQ音樂”接口，其說明如圖(tu)3所示。可以看(kan)到，這個接口是(shi)免(mian)費使(shi)用的(de)。

圖3 QQ音樂接口

在(zai)圖3所(suo)示(shi)頁面(mian)的左側(ce)“接(jie)入(ru)點列表”中可看(kan)到該(gai)API提供了3個接(jie)入(ru)點。

1. 熱門(men)榜單

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

熱門榜單(dan)接入點的(de)URL地址(zhi)如下(xia)：

//route.showapi.com/213-4

請求該URL地址(zhi)時(shi)，還需(xu)要(yao)傳入一些參(can)數，主要(yao)有以下這些。

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

 該(gai)接入點返回的JSON數據(ju)格式如下(xia)（與易源接口官方提示的內容(rong)有些不同）：

{
    "showapi_res_code": 0,
    "showapi_res_error": "",
    "showapi_res_body": {
        "ret_code": 0,
        "pagebean": {
            "songlist": [{
                "songname": "一定(ding)要幸(xing)福 (《咱們相(xiang)愛吧》電視劇主題曲(qu))",
                "seconds": 294,
                "albummid": "003V7SAg16Ed0F",
                "songid": 109127914,
                "singerid": 4607,
                "albumpic_big": "//i.gtimg.cn/music/photo/mid_album_300/
                          0/F/003V7SAg16Ed0F.jpg",
                "albumpic_small": "//i.gtimg.cn/music/photo/
                       mid_album_90/0/F/003V7SAg16Ed0F.jpg",
                "downUrl": "//dl.stream.qqmusic.qq.com/109127914.mp3?
                        vkey=3B0957F1A4CDCAD8875251834B7C0DA2D4287FA3BC1A5F73AA
                         002D3833AE5685FE6168E75BBDB277CB0635E3B483CB6E3A073
                         E7A1B9723A4&guid=2718671044",
                "url": "//ws.stream.qqmusic.qq.com/
                         109127914.m4a?fromtag=46",
                "singername": "張靚(jing)穎",
                "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
        }
    }
}

從(cong)上面(mian)的JSON數據(ju)(ju)可看出(chu)，該(gai)接入(ru)點返回的數據(ju)(ju)中，音樂(le)列表數據(ju)(ju)保(bao)存在songlist數組中，該(gai)數組中的每(mei)一個元素(su)是一首音樂(le)的信息，各字段的含義如下：

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

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

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

//route.showapi.com/213-1

請求(qiu)該URL地(di)址時(shi)，還(huan)需要傳入一(yi)些參(can)數，主(zhu)要有以下這些。

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

該接入(ru)點返回的JSON數據格(ge)式如下所示：

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

 可以(yi)看出(chu)，這與使用熱門榜(bang)單(dan)接(jie)入點獲取的數(shu)據格式類似，只是這里(li)多了一些查詢相關(guan)的數(shu)據，另外，返回的音樂列表(biao)不是保存(cun)在songlist數(shu)組中(zhong)(zhong)了，而是保存(cun)contentlist數(shu)組中(zhong)(zhong)，流媒體(ti)地址不是保存(cun)在url中(zhong)(zhong)，而是保存(cun)在m4a中(zhong)(zhong)。其他數(shu)據的含義基本(ben)相同，這里(li)就不列出(chu)來(lai)了。

本案例主要(yao)使(shi)用這(zhe)兩個接入(ru)點(dian)，讀者可(ke)在(zai)本案例的基礎上(shang)做歌(ge)詞顯示功(gong)能，則需要(yao)使(shi)用到“根據歌(ge)曲id查詢歌(ge)詞”這(zhe)個接入(ru)點(dian)。

另外，在訪問某(mou)一個接(jie)入(ru)點后如果返(fan)回“沒(mei)有(you)訂購(gou)(gou)套(tao)餐”的(de)(de)錯誤結果，由(you)于本API是免(mian)費(fei)使用(yong)的(de)(de)，出現(xian)這個提示說(shuo)明用(yong)戶對接(jie)入(ru)點還未訂購(gou)(gou)。可在圖(tu)(tu)3所(suo)(suo)(suo)示頁面中單擊“價格一覽表(biao)”，顯示如圖(tu)(tu)4所(suo)(suo)(suo)示頁面，單擊左側的(de)(de)“為所(suo)(suo)(suo)有(you)免(mian)費(fei)接(jie)入(ru)點一鍵(jian)訂購(gou)(gou)”即可正常(chang)使用(yong)所(suo)(suo)(suo)有(you)免(mian)費(fei)接(jie)入(ru)點了。

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

界面設計

 “微(wei)音(yin)樂”需要設計(ji)4個界面，分別(bie)是：

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

（2）音(yin)樂列表界面(mian)(mian)，如圖6所示，這(zhe)是在(zai)圖5所示界面(mian)(mian)中(zhong)選擇某一(yi)分類(lei)中(zhong)，列出該分類(lei)下的音(yin)樂曲(qu)目(mu)，為了使界面(mian)(mian)更好看一(yi)點，在(zai)曲(qu)目(mu)上方顯示一(yi)張(zhang)圖片(pian)(pian)，這(zhe)張(zhang)圖片(pian)(pian)直(zhi)接獲取(qu)第一(yi)首曲(qu)目(mu)的專輯封(feng)面(mian)(mian)圖片(pian)(pian)。

（3）音(yin)樂播放(fang)界面(mian)，如圖7所(suo)示，在圖6所(suo)示曲目(mu)(mu)列表中單(dan)擊一首曲目(mu)(mu)，就進(jin)入本(ben)界面(mian)，上方(fang)顯示專輯圖片(pian)，下方(fang)顯示歌名(ming)、歌手名(ming)稱和播放(fang)按鈕，單(dan)擊播放(fang)按鈕就可(ke)播放(fang)。

（4）搜(sou)(sou)索界面(mian)，如圖(tu)8所示，在(zai)輸入(ru)框中(zhong)輸入(ru)關鍵字，單擊“立即搜(sou)(sou)索”按鈕進行搜(sou)(sou)索，結果顯示在(zai)下方的(de)列表(biao)中(zhong)，單擊結果中(zhong)的(de)某一首歌曲，進入(ru)圖(tu)7所示播放界面(mian)開始(shi)播放。

創建項目

界面初稿設計出(chu)來之(zhi)后，就(jiu)可(ke)以考慮進(jin)入實際程序開(kai)發(fa)過程了。

準備資源

從圖(tu)5至圖(tu)8所示(shi)的4個頁面(mian)可看出(chu)，本案例中(zhong)需要顯示(shi)一些圖(tu)標(biao)和(he)圖(tu)片，其(qi)中(zhong)專輯(ji)封面(mian)圖(tu)片通(tong)過(guo)API動態獲取，而(er)每首歌典(dian)前面(mian)出(chu)現的圖(tu)標(biao)就需要在編寫代碼之前準備好，還有(you)圖(tu)7中(zhong)的播放按鈕圖(tu)標(biao)，以及(ji)與其(qi)對應的暫停播放的圖(tu)標(biao)。

另外，在界面(mian)下方(fang)有一個工具條(tiao)，最(zui)好也設計出對(dui)應的圖(tu)標。對(dui)于工具條(tiao)中(zhong)的圖(tu)標還需要設計出正常狀態和選擇(ze)狀態兩種不(bu)同的圖(tu)標，方(fang)便用(yong)戶區分當前選擇(ze)是(shi)哪一個tab。

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

圖9 案例用到的(de)圖標

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

創建項目

首先按以下(xia)步驟創建出項目(mu)。

（1）創建名為ch12的項目目錄。

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