小程序模板網(wǎng)

“微音樂”微信小程序?qū)崙?zhàn)開發(fā)過(guò)程

發(fā)布時(shí)間:2017-12-07 08:52 所屬欄目:小程序開發(fā)教程

本文帶大家開發(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ì)話框。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/18067.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢