“微音樂”微信小程序?qū)崙?zhàn)開發(fā)過(guò)程
本文帶大家開發(fā)一個(gè)音樂播放器微信小程序——微音樂。該播放器通過(guò)QQ音樂接口獲取音樂相關(guān)數(shù)據(jù)，首先在頁(yè)面中顯示一個(gè)音樂分類列表 ...
本文帶大家開發(fā)一個(gè)音樂播放器微信小程序——微音樂。該播放器通過(guò)QQ音樂接口獲取音樂相關(guān)數(shù)據(jù)，首先在頁(yè)面中顯示一個(gè)音樂分類列表，用戶選擇分類之后從QQ音樂中查詢獲取符合要求的音樂列表，在這個(gè)音樂列表中單擊一首音樂即進(jìn)入播放頁(yè)面進(jìn)行播放。另外，還需要做一個(gè)查詢功能，可按歌手或音樂名稱進(jìn)行查詢。
QQ音樂API
與“微天氣”案例類似，本案例也是通過(guò)互聯(lián)網(wǎng)中已有的API來(lái)獲取音樂信息。在互聯(lián)網(wǎng)上這類API很多，本案例使用“易源接口”網(wǎng)站提供的QQ音樂接口，易源接口網(wǎng)址如下：
https://www.showapi.com/
認(rèn)識(shí)易源接口網(wǎng)站
在瀏覽器中打開易源接口網(wǎng)站，可看到如圖1所示的界面。從網(wǎng)頁(yè)左邊的“API分類導(dǎo)航”列表可看到，該網(wǎng)站提供了不同種類的API，在大類中又有很多小類，天氣預(yù)報(bào)的接口也有。
在易源接口網(wǎng)站中提供的接口很多是免費(fèi)的，要使用這些免費(fèi)接口，也需要在網(wǎng)站中注冊(cè)賬號(hào)，然后申請(qǐng)使用。申請(qǐng)成功之后，在“我的應(yīng)用”中就可看到申請(qǐng)應(yīng)用的appid，如圖2所示。在應(yīng)用同一行的secret列單擊“查看密鑰”，將彈出對(duì)話框顯示該應(yīng)用的密鑰。將appid和secret復(fù)制下來(lái)，以備程序中使用。
圖1 易源接口
圖2 我的接口
QQ音樂接口
本案例使用易源接口提供的“QQ音樂”接口，其說(shuō)明如圖3所示?？梢钥吹?，這個(gè)接口是免費(fèi)使用的。
圖3 QQ音樂接口
在圖3所示頁(yè)面的左側(cè)“接入點(diǎn)列表”中可看到該API提供了3個(gè)接入點(diǎn)。
1. 熱門榜單
在圖3所示頁(yè)面中，單擊左側(cè)的“熱門榜單”，將顯示該接入點(diǎn)的詳細(xì)信息。
熱門榜單接入點(diǎn)的URL地址如下：
http://route.showapi.com/213-4
請(qǐng)求該URL地址時(shí)，還需要傳入一些參數(shù)，主要有以下這些。
- showapi_appid：這是用戶申請(qǐng)的appid。
- showapi_sign：這是用戶應(yīng)用的密鑰。
- topid：這是音樂分類編碼（如5表示內(nèi)地音樂，6表示港臺(tái)音樂）。
該接入點(diǎn)返回的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ù)可看出，該接入點(diǎn)返回的數(shù)據(jù)中，音樂列表數(shù)據(jù)保存在songlist數(shù)組中，該數(shù)組中的每一個(gè)元素是一首音樂的信息，各字段的含義如下：
"songname":音樂名稱,
"seconds": 時(shí)長(zhǎng),
"songid": 音樂ID,
"singerid": 歌手id,
"albumpic_big": 專輯大圖片，高寬300,
"albumpic_small": 專輯小圖片，高寬90,
"downUrl": mp3下載鏈接,
"url": 流媒體地址,
"singername": 歌手名,
"albumid": 專輯id
2. 根據(jù)歌名、人名查詢歌曲
熱門榜單接入點(diǎn)的URL地址如下：
http://route.showapi.com/213-1
請(qǐng)求該URL地址時(shí)，還需要傳入一些參數(shù)，主要有以下這些。
- showapi_appid：這是用戶申請(qǐng)的appid。
- showapi_sign：這是用戶應(yīng)用的密鑰。
- keyword：查詢關(guān)鍵字（人名或歌名）。
該接入點(diǎ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": "幻影中國(guó)巡回演唱會(huì)Live",
"downUrl": "http://dl.stream.qqmusic.qq.com/179990.mp3
?vkey=1BD3868E2A0278D184D1FEC2A9391F1A673AAF1FCAB59DEA
F0DCCF80ED58E564978D1EAAF5E53B85B0E5D30ACFF2AFBF32296
4C86ED8B14D&guid=2718671044",
"singername": "劉德華",
"songname": "練習(xí) (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
}
}
}
可以看出，這與使用熱門榜單接入點(diǎn)獲取的數(shù)據(jù)格式類似，只是這里多了一些查詢相關(guān)的數(shù)據(jù)，另外，返回的音樂列表不是保存在songlist數(shù)組中了，而是保存contentlist數(shù)組中，流媒體地址不是保存在url中，而是保存在m4a中。其他數(shù)據(jù)的含義基本相同，這里就不列出來(lái)了。
本案例主要使用這兩個(gè)接入點(diǎn)，讀者可在本案例的基礎(chǔ)上做歌詞顯示功能，則需要使用到“根據(jù)歌曲id查詢歌詞”這個(gè)接入點(diǎn)。
另外，在訪問某一個(gè)接入點(diǎn)后如果返回“沒有訂購(gòu)套餐”的錯(cuò)誤結(jié)果，由于本API是免費(fèi)使用的，出現(xiàn)這個(gè)提示說(shuō)明用戶對(duì)接入點(diǎn)還未訂購(gòu)。可在圖3所示頁(yè)面中單擊“價(jià)格一覽表”，顯示如圖4所示頁(yè)面，單擊左側(cè)的“為所有免費(fèi)接入點(diǎn)一鍵訂購(gòu)”即可正常使用所有免費(fèi)接入點(diǎn)了。
圖4 為所有免費(fèi)接入點(diǎn)一鍵訂購(gòu)
界面設(shè)計(jì)
“微音樂”需要設(shè)計(jì)4個(gè)界面，分別是：
（1）音樂分類列表界面，如圖5所示，顯示音樂的分類列表。
（2）音樂列表界面，如圖6所示，這是在圖5所示界面中選擇某一分類中，列出該分類下的音樂曲目，為了使界面更好看一點(diǎn)，在曲目上方顯示一張圖片，這張圖片直接獲取第一首曲目的專輯封面圖片。
（3）音樂播放界面，如圖7所示，在圖6所示曲目列表中單擊一首曲目，就進(jìn)入本界面，上方顯示專輯圖片，下方顯示歌名、歌手名稱和播放按鈕，單擊播放按鈕就可播放。
（4）搜索界面，如圖8所示，在輸入框中輸入關(guān)鍵字，單擊“立即搜索”按鈕進(jìn)行搜索，結(jié)果顯示在下方的列表中，單擊結(jié)果中的某一首歌曲，進(jìn)入圖7所示播放界面開始播放。
創(chuàng)建項(xiàng)目
界面初稿設(shè)計(jì)出來(lái)之后，就可以考慮進(jìn)入實(shí)際程序開發(fā)過(guò)程了。
準(zhǔn)備資源
從圖5至圖8所示的4個(gè)頁(yè)面可看出，本案例中需要顯示一些圖標(biāo)和圖片，其中專輯封面圖片通過(guò)API動(dòng)態(tài)獲取，而每首歌典前面出現(xiàn)的圖標(biāo)就需要在編寫代碼之前準(zhǔn)備好，還有圖7中的播放按鈕圖標(biāo)，以及與其對(duì)應(yīng)的暫停播放的圖標(biāo)。
另外，在界面下方有一個(gè)工具條，最好也設(shè)計(jì)出對(duì)應(yīng)的圖標(biāo)。對(duì)于工具條中的圖標(biāo)還需要設(shè)計(jì)出正常狀態(tài)和選擇狀態(tài)兩種不同的圖標(biāo)，方便用戶區(qū)分當(dāng)前選擇是哪一個(gè)tab。
通常，這些圖標(biāo)可以從網(wǎng)絡(luò)中去搜索，然后再用Photoshop等圖像處理軟件進(jìn)行簡(jiǎn)單的加工即可。本案例使用到的圖標(biāo)如圖9所示。
圖9 案例用到的圖標(biāo)
在項(xiàng)目中新建一個(gè)名為images的子目錄，將如圖9所示的設(shè)計(jì)好的圖標(biāo)復(fù)制到該子目錄備用。
創(chuàng)建項(xiàng)目
首先按以下步驟創(chuàng)建出項(xiàng)目。
（1）創(chuàng)建名為ch12的項(xiàng)目目錄。
（2）啟動(dòng)微信小程序開發(fā)工具，在啟動(dòng)界面中單擊“添加項(xiàng)目”按鈕，打開如圖10所示的對(duì)話框。
