“微音樂”微信小程序實戰開發過程
本文帶大家開發一個音樂播放器微信小程序——微音樂。該播放器通過QQ音樂接口獲取音樂相關數據，首先在頁面中顯示一個音樂分類列表，用戶選擇分類之后從QQ音樂中查詢獲取符合要求的音樂列表，在這個音樂列表中單擊一首音樂即進入播放頁面進行播放。另外，還需要做一個查詢功能，可按歌手或音樂名稱進行查詢。
QQ音樂API
與“微天氣”案例類似，本案例也是通過互聯網中已有的API來獲取音樂信息。在互聯網上這類API很多，本案例使用“易源接口”網站提供的QQ音樂接口，易源接口網址如下：
認識易源接口網站
在瀏覽器中打開易源接口網站，可看到如圖1所示的界面。從網頁左邊的“API分類導航”列表可看到，該網站提供了不同種類的API，在大類中又有很多小類，天氣預報的接口也有。
在易源接口網站中提供的接口很多是免費的，要使用這些免費接口，也需要在網站中注冊賬號，然后申請使用。申請成功之后，在“我的應用”中就可看到申請應用的appid，如圖2所示。在應用同一行的secret列單擊“查看密鑰”，將彈出對話框顯示該應用的密鑰。將appid和secret復制下來，以備程序中使用。
圖1 易源接口
圖2 我的接口
QQ音樂接口
本案例使用易源接口提供的“QQ音樂”接口，其說明如圖3所示。可以看到，這個接口是免費使用的。
圖3 QQ音樂接口
在圖3所示頁面的左側“接入點列表”中可看到該API提供了3個接入點。
1. 熱門榜單
在圖3所示頁面中，單擊左側的“熱門榜單”，將顯示該接入點的詳細信息。
熱門榜單接入點的URL地址如下：
http://route.showapi.com/213-4
請求該URL地址時，還需要傳入一些參數，主要有以下這些。
- showapi_appid：這是用戶申請的appid。
- showapi_sign：這是用戶應用的密鑰。
- topid：這是音樂分類編碼（如5表示內地音樂，6表示港臺音樂）。
該接入點返回的JSON數據格式如下（與易源接口官方提示的內容有些不同）：
{
"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數據可看出，該接入點返回的數據中，音樂列表數據保存在songlist數組中，該數組中的每一個元素是一首音樂的信息，各字段的含義如下：
"songname":音樂名稱,
"seconds": 時長,
"songid": 音樂ID,
"singerid": 歌手id,
"albumpic_big": 專輯大圖片，高寬300,
"albumpic_small": 專輯小圖片，高寬90,
"downUrl": mp3下載鏈接,
"url": 流媒體地址,
"singername": 歌手名,
"albumid": 專輯id
2. 根據歌名、人名查詢歌曲
熱門榜單接入點的URL地址如下：
http://route.showapi.com/213-1
請求該URL地址時，還需要傳入一些參數，主要有以下這些。
- showapi_appid：這是用戶申請的appid。
- showapi_sign：這是用戶應用的密鑰。
- keyword：查詢關鍵字（人名或歌名）。
該接入點返回的JSON數據格式如下所示：
{
"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
}
}
}
可以看出，這與使用熱門榜單接入點獲取的數據格式類似，只是這里多了一些查詢相關的數據，另外，返回的音樂列表不是保存在songlist數組中了，而是保存contentlist數組中，流媒體地址不是保存在url中，而是保存在m4a中。其他數據的含義基本相同，這里就不列出來了。
本案例主要使用這兩個接入點，讀者可在本案例的基礎上做歌詞顯示功能，則需要使用到“根據歌曲id查詢歌詞”這個接入點。
另外，在訪問某一個接入點后如果返回“沒有訂購套餐”的錯誤結果，由于本API是免費使用的，出現這個提示說明用戶對接入點還未訂購。可在圖3所示頁面中單擊“價格一覽表”，顯示如圖4所示頁面，單擊左側的“為所有免費接入點一鍵訂購”即可正常使用所有免費接入點了。
圖4 為所有免費接入點一鍵訂購
界面設計
“微音樂”需要設計4個界面，分別是：
（1）音樂分類列表界面，如圖5所示，顯示音樂的分類列表。
（2）音樂列表界面，如圖6所示，這是在圖5所示界面中選擇某一分類中，列出該分類下的音樂曲目，為了使界面更好看一點，在曲目上方顯示一張圖片，這張圖片直接獲取第一首曲目的專輯封面圖片。
（3）音樂播放界面，如圖7所示，在圖6所示曲目列表中單擊一首曲目，就進入本界面，上方顯示專輯圖片，下方顯示歌名、歌手名稱和播放按鈕，單擊播放按鈕就可播放。
（4）搜索界面，如圖8所示，在輸入框中輸入關鍵字，單擊“立即搜索”按鈕進行搜索，結果顯示在下方的列表中，單擊結果中的某一首歌曲，進入圖7所示播放界面開始播放。
創建項目
界面初稿設計出來之后，就可以考慮進入實際程序開發過程了。
準備資源
從圖5至圖8所示的4個頁面可看出，本案例中需要顯示一些圖標和圖片，其中專輯封面圖片通過API動態獲取，而每首歌典前面出現的圖標就需要在編寫代碼之前準備好，還有圖7中的播放按鈕圖標，以及與其對應的暫停播放的圖標。
另外，在界面下方有一個工具條，最好也設計出對應的圖標。對于工具條中的圖標還需要設計出正常狀態和選擇狀態兩種不同的圖標，方便用戶區分當前選擇是哪一個tab。
通常，這些圖標可以從網絡中去搜索，然后再用Photoshop等圖像處理軟件進行簡單的加工即可。本案例使用到的圖標如圖9所示。
圖9 案例用到的圖標
在項目中新建一個名為images的子目錄，將如圖9所示的設計好的圖標復制到該子目錄備用。
創建項目
首先按以下步驟創建出項目。
（1）創建名為ch12的項目目錄。
（2）啟動微信小程序開發工具，在啟動界面中單擊“添加項目”按鈕，打開如圖10所示的對話框。
圖10 添加項目
（3）在圖10所示對話框中填寫好相應的項目名稱，并選擇保存項目的目錄，單擊“添加項目”按鈕即可創建好一個項目的框架。
（4）打開app.json文件，修改頁面數組、修改顯示標題并增加tabBar的設置，具體內容如下：
{
"pages":[
"pages/index/index",
"pages/play/play",
"pages/list/list",
"pages/search/search",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微音樂",
"navigationBarTextStyle":"black"
},
"tabBar": {
"color":"#818181",
"backgroundColor":"black",
"selectedColor":"green",
"list": [{
"pagePath": "pages/index/index",
"text": "音樂列表",
"iconPath":"/images/music.png",
"selectedIconPath":"/images/music-s.png"
}, {
"pagePath": "pages/play/play",
"iconPath":"/images/playing.png",
"selectedIconPath":"/images/playing-s.png",
"text": "正在播放"
}, {
"pagePath": "pages/search/search",
"iconPath":"/images/search.png",
"selectedIconPath":"/images/search-s.png",
"text": "搜索"
}]
}
}
由于在pages數組中增加了3個頁面，但這3個頁面還沒有創建，因此保存app.json時會出現錯誤提示，可以不管這個提示。當然，也可以將各頁面創建好之后再修改app.json文件。
（5）為了使項目不提示錯誤，接下來在pages目錄中分別創建list、play和search等3個子目錄，并分別創建對應的wxml、js、wxss等文件。這樣，項目就不會出現錯誤提示了。
至此，項目結構搭建完成，接下來分別開發4個頁面代碼即可。
創建配置文件
在項目中要使用到易源接口提供的QQ音樂API，這個API的接入點地址和身份認證參數之類的串在一起比較長，并且在多個頁面中需要使用到，因此最好將這些內容封裝在一個外部文件中，需要時引入即可。
在項目根目錄創建一個名為config.js的文件，編寫如下代碼：
(function(module){
var exports=module.exports={};
//易源接口應用ID
var appid=27426;
//接口密鑰
var secret="f7a6a43aef0649b5bd1a051e8f5aa536";
//GET方式的參數
var param="?showapi_appid=" + appid+"&showapi_sign=" + secret;
//熱門榜單訪問接口
var hotUrl = "http://route.showapi.com/213-4" + param;
//根據歌名、人名查詢歌曲接口
var searchByNameUrl ="http://route.showapi.com/213-1" + param;
var searchByIdUrl = "http://route.showapi.com/213-2" + param;
module.exports = {
config: {
hotUrl:hotUrl,
searchByNameUrl:searchByNameUrl,
searchByIdUrl:searchByIdUrl
}
};
})(module);
以上代碼將易源接口的接入點URL、appid和secret等都封裝起來，并以config對象的屬性形式提供。其他頁面引入config.js之后，就可使用config.hotUrl這樣的形式直接引用了。
音樂分類列表
音樂分類列表作為本項目的主頁面，將其代碼編寫在index頁面中。因此，將創建項目時自動創建的index.wxml、index.js等文件中原有內容刪除，然后在這里編寫相應的代碼即可。
開發頁面文件
打開index.wxml文件，刪除原有內容，重新輸入以下wxml代碼：
<view class="container">
<view class="rank-list">
<block wx:for="{{ranks}}" wx:key="{{item.type}}">
<view class="rank-item">
<navigator url="/pages/list/list?type={{item.type}}" class="text">
{{item.text}}</navigator>
<view class="arrow"/>
</view>
</block>
</view>
</view>
可以看出，音樂分類列表的頁面布局代碼很簡單，只是從ranks中取出數據，循環渲染到頁面中即可，每一項是一個分類，單擊分類后導航到list頁面，并將分類信息傳遞到list頁面進行處理。
開發頁面樣式文件
在index.wxml文件中，為每一個組件都設置class屬性，接下來在index.wxss中編寫對應的樣式代碼即可。打開index.wxss文件，刪除原有內容，然后輸入以下樣式代碼：
.rank-list {
width: 100%;
}
/*每一個分類*/
.rank-item {
width: 100%;
text-align: left;
height: 3rem;
line-height: 3rem;
border-bottom: 1px solid #eee;
position: relative;
}
/*分類文本*/
.rank-item .text {
padding-left: 1rem;
}
/*分類名右側的箭頭圖標*/
.rank-item .arrow {
width: 10px;
height: 10px;
border-top: 2px solid #999;
border-right: 2px solid #999;
position: absolute;
right: 20px;
transform: rotate(45deg);
top: 20px;
}
開發頁面邏輯代碼
在index.wxml文件中綁定了一個名為ranks的變量，這個對象中保存了音樂分類的信息，需要在邏輯代碼中進行定義。打開index.js文件，刪除原有內容，輸入以下JS代碼：
Page({
data:{
//音樂分類
ranks:[
{type:26,text:"熱歌"},
{type:23,text:"銷量"},
{type:18,text:"民謠"},
{type:19,text:"搖滾"},
{type:5,text:"內地"},
{type:6,text:"港臺"},
{type:16,text:"韓國"},
{type:17,text:"日本"},
{type:3,text:"歐美"}
],
},
})
可以看出，這里的JS代碼很簡單，只是定義了一個音樂分類的數組。最終反映在界面上的分類排列順序是以這個數組中各元素的順序為準的，因此，可以在這里進行調整，使最終顯示的分類順序符合自己的要求。
將index.wxml、index.wxss和index.js這3個文件編寫好之后，保存，在開發工具左側的模擬器中就可看到如圖11所示的效果。
圖11 音樂分類列表
至此，音樂列表頁面開發完成。這個頁面很簡單，也不需要訪問網絡，只是將固定的音樂分類顯示出來即可。
音樂列表
在圖11所示的音樂分類列表中單擊某一個分類，就會顯示該分類的音樂列表，接下來就來開發音樂列表的相關代碼。
開發頁面文件
音樂列表UI如圖6所示，上方一個圖片區域，下面是音樂列表。由于音樂列表的數量可能很多，一屏顯示不完，因此使用scroll-view組件進行滾動顯示。
打開list.wxml文件，在其中編寫以下代碼：
<scroll-view scroll-y="true" >
<view class="board">
<image src="{{board}}" />
</view>
<view class="songlist">
<block wx:for="{{songlist}}" wx:key="song_id">
<view class="songitem">
<navigator url="/pages/play/play?songid={{item.songid}}"
class="song-play"><image src="/images/play.png" /></navigator>
<navigator url="/pages/play/play?songid={{item.songid}}"
class="song-detail">
<view class="song-title">{{item.songname}}</view>
<view class="song-subtitle">{{item.singername}} -
{{item.seconds}}</view>
</navigator>
</view>
</block>
</view>
<loading hidden="{{!loading}}">
正在加載音樂……
</loading>
</scroll-view>
在以上代碼中，首先使用image組件綁定了一個名為board的變量顯示一幅圖片（專輯封面圖片）；接下來顯示分類的音樂列表，這里使用循環渲染songlist這個數組中的內容，將音樂的名稱、歌手名稱等信息顯示出來，并通過navigator組件進行導航，當用戶單擊音樂時導航到play頁面進行播放；最后，在下方添加了一個loading組件，用來顯示加載音樂列表時的提示信息。
開發頁面樣式文件
根據上面的wxml文件中定義的class，編寫對應的樣式代碼。打開list.wxss文件，在其中輸入以下樣式代碼：
/*頂部專輯封面圖片*/
.board image{
width: 100%;
height: 300px;
border-bottom: 1px solid #eee;
}
/*音樂列表*/
.songlist {
width: 100%;
overflow-x: hidden;
overflow-y: visible;
font-size: 0.8rem;
}
/*每一個音樂項目*/
.songitem{
height: 3rem;
line-height: 1.5rem;
display: flex;
border-bottom: 1px solid #eee;
padding: 10rpx;
width: 100%;
}
/*選擇的音樂項目*/
.songitem:active {
background: #eee;
}
/*左側的播放圖標*/
.song-play {
width: 10%;
text-align: center;
vertical-align: middle;
}
.song-play image {
line-height: 3rem;
width: 50rpx;
height: 50rpx;
padding-top: 13px;
}
/*音樂項目的細節內容*/
.song-detail {
white-space: nowrap;
width: 90%;
}
/*音樂標題*/
.song-title {
font-size: 1rem;
}
/*副標題*/
.song-subtitle {
color: #555;
}
以上樣式代碼中，每一項前面都有注釋，與wxml對照分析，很快就能搞明白其作用，這里不再贅述。
開發頁面邏輯代碼
接下來開發頁面的邏輯代碼，打開list.js文件，輸入以下代碼：
var config=require('../../config.js'); //導入配置文件
//將秒數轉換為分秒的表示形式
var formatSeconds = function(value) {
var time = parseFloat(value);
var m= Math.floor(time/60);
var s= time - m*60;
return [m, s].map(formatNumber).join(':');
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
}
Page({
data:{
board:'', //頂部圖片
songlist:[], //音樂列表
loading:false, //加載標志
},
//頁面加載事件
onLoad:function(options){
var self = this;
var topid = options.type; //獲取頁面跳轉傳過來的參數
this.setData({
loading:true //顯示加載提示信息
})
//加載歌曲列表
wx.request({
url:config.config.hotUrl, //熱門榜單接口
data:{topid:topid}, //歌曲類別編號
success:function(e){
if(e.statusCode == 200){
var songlist=e.data.showapi_res_body.pagebean.songlist;
//將時長轉換為分秒的表示形式
for(var i=0;i<songlist.length;i++)
{
songlist[i].seconds = formatSeconds(songlist[i].seconds);
}
self.setData({
//獲取第1首歌曲的圖片作為該頁頂部圖片
board:e.data.showapi_res_body.pagebean.songlist[0].albumpic_big,
//保存歌曲列表
songlist:songlist,
loading:false //隱藏加載提示信息
});
//將歌曲列表保存到本地緩存中
wx.setStorageSync('songlist',songlist);
}
}
});
}
})
以上代碼大部分都添加了注釋，參考注釋應該很容易讀懂。程序首先導入config.js文件，方便調用易源接口網站提供的API，接著定義了一個formatSeconds函數，該函數可以將以秒為單位表示的音樂時長轉換為以分秒表示的形式。
在Page函數中，代碼主要分兩部分。一個數據初始化部分，定義了一個名為board的變量，用來保存頁面頂部顯示的專輯封面圖片URL地址。另外一部分就是onLoad頁面加載事件處理，這是本頁面的核心代碼。在這段代碼中，首先從傳入頁面的參數type中獲取音樂分類ID，然后調用易源接口提供的API獲取對應分類的音樂列表，得到音樂列表之后，調用前面定義的formatSeconds將音樂時長轉換為分秒表示的形式，然后將音樂列表更新到頁面數據中，這樣，頁面上就會顯示獲取到的音樂列表。
在onLoad代碼的最后，還將獲取到的音樂列表緩存到本地。在音樂播放頁面play中就可看到這里緩存數據的作用了。
這樣，音樂列表頁面的開發完成，在開發工具的模擬器中預覽，首先顯示上一小節開發的音樂分類列表（如圖11所示）。單擊一個分類之后，將顯示如圖12所示的音樂列表，上方顯示的是第1首音樂的專輯封面圖片。
圖12 音樂列表
播放音樂
在圖12所示音樂列表中，單擊一首音樂，將導航到播放音樂界面。下面開發播放音樂界面的相關代碼。
開發頁面文件
如圖7所示的播放音樂界面比較簡單，上方顯示專輯圖片，下方顯示音樂名稱、歌手名稱和一個播放按鈕即可。打開play.wxml文件，在其中編寫以下代碼：
<view class="playing container">
<view class="thumbnail">
<image src="{{song.albumpic_big}}" />
</view>
<view class="detail">
<view class="title">{{song.songname}}</view>
<view class="author">{{song.singername}}</view>
<view class="action">
<view class="act-toggle" bindtap="playToggle">
<image src="/images/{{isPlaying ? 'pause' : 'play'}}.png" />
</view>
</view>
</view>
</view>
開發頁面樣式文件
根據play.wxml文件中設置的class屬性，編寫對應的樣式文件。打開play.wxss文件，編寫以下樣式代碼：
/*專輯封面圖片*/
.thumbnail image{
height: 300px;
width: 100%;
}
/*音樂名稱*/
.title{
text-align: center;
font-size: 1.3rem;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
/*歌手名稱*/
.author{
text-align: center;
color: #555;
}
/*播放*/
.action{
text-align: center;
margin-top: 1rem;
}
/*播放圖標*/
.action image{
width: 200rpx;
height: 200rpx;
}
樣式文件中每個class前面都有相應的注釋。
開發頁面邏輯代碼
播放音樂頁面的代碼相對較多，下面先進行簡單分析。
在進入播放頁面時，首先判斷以下幾種情況：
（1）未傳入songid參數，如直接在下方tab中單擊“正在播放”時進入該頁面。這時，如果之前播放過音樂，則可繼續播放之前那首音樂（要獲取之前播放過的那首音樂，可將其緩存到本地）。如果之前沒有播放過音樂，則顯示“未選擇歌曲”，按播放按鈕時不起作用。
（2）若傳入了songid參數，由于songid只是音樂中的一個編號，并沒有音樂本身的相關信息（如音樂名稱、歌手名稱、音樂鏈接地址等）。只有這個編號，無法調用wx.playBackgroundAudio這個API進行播放。這時，list頁面中將音樂列表songlist緩存在本地就有作用了。在play頁面中，從緩存中取出songlist這個音樂列表，然后用songid在songlist這個數組中查詢到相應的音樂，就將其取出來播放，同時，將該音樂緩存到本地，以備無songid參數傳入時播放該音樂。
根據以上分析，在play.js中編寫代碼如下：
var config=require('../../config.js'); //導入配置文件
Page({
data:{
song:{}, //傳入的歌曲信息
isPlaying:false, //播放狀態
},
//頁面載入事件處理函數
onLoad:function(options){
var self = this;
var songid = options.songid; //獲取頁面跳轉傳過來的參數(歌曲對象)
if(songid === undefined){ //未傳入歌曲ID
var curSong=wx.getStorageSync('curSong') || {}; //從緩存中獲取歌曲
if(curSong === undefined){ //緩存中無歌曲
var song={songname:'未選擇歌曲'}; //顯示未選擇歌曲
this.setData({
song:song
})
}else{
this.setData({
song:curSong
});
}
}else{
var songlist=wx.getStorageSync('songlist') || []; //從緩存中取出歌曲列表
//在歌曲列表中查找songid指定的歌曲
for(var i=0;i<songlist.length;i++){
if(songlist[i].songid == songid){ //找到對應的歌曲
this.setData({
song:songlist[i] //更新歌曲
});
break;
}
}
//緩存正在播放的歌曲
wx.setStorageSync('curSong',this.data.song);
}
},
//播放/暫停
playToggle:function(){
var self = this;
//沒有歌曲要播放，則直接退出
if(this.data.song.songname =='未選擇歌曲'){
return;
}
if(this.data.isPlaying){ //正在播放
wx.stopBackgroundAudio(); //停止播放歌曲
}else{//未播放，則開始播放
//播放歌曲
wx.playBackgroundAudio({
dataUrl: this.data.song.url || this.data.song.m4a,
success: function(res){ }
})
}
//更新播放狀態
this.setData({
isPlaying:!this.data.isPlaying
});
}
})
以上代碼大部分都添加了注釋，配合前面的分析，應該很容易讀明白。在wx.playBackgroundAudio函數的參數中，dataUrl的參數使用以下形式：
dataUrl: this.data.song.url || this.data.song.m4a,
這是因為，下一小節的搜索結果中返回的音樂文件是使用m4a來取得音樂的流媒體。
保存好播放音樂頁面的相關文件之后，進行調試，在圖12所示音樂列表中單擊一首音樂，進入播放界面，如圖13所示。
圖13 音樂播放
在圖13所示界面中，單擊播放圖標，即可聽到音樂聲，同時播放圖標變為了暫停圖標。
搜索音樂
最后，開發本案例的搜索音樂頁面。
開發頁面文件
參照圖8所示，該界面很簡單，在上方添加一個搜索輸入框和一個搜索按鈕，下面則是顯示搜索結果的列表。打開search.wxml文件，在其中編寫以下代碼：
<view class="container">
<view class="search-area">
<input bindinput="inputing" placeholder="請輸入搜索關鍵字"
value="{{value}}" />
<button type="primary" size="mini" bindtap="bindSearch"
loading="{{loading}}"> 立即搜索 </button>
</view>
<view class="songlist">
<block wx:for="{{list}}" wx:key="{{index}}">
<view class="songitem">
<navigator url="/pages/play/play?songid={{item.songid}}"
class="song-play">
<image src="/images/play.png" /></navigator>
<navigator url="/pages/play/play?songid={{item.songid}}"
class="song-detail">
<view class="song-title">{{item.songname}}-
{{item.singername}}</view>
<view class="song-subtitle">{{item.albumname}}</view>
</navigator>
</view>
</block>
</view>
<loading hidden="{{!loading}}">
正在搜索音樂...
</loading>
</view>
以上代碼中，除了圖8所示設計界面元素之外，在下方還添加了一個loading組件，用來顯示提示信息。
開發頁面樣式文件
接著根據searrch.wxml中使用的class屬性編寫樣式文件，從上面的代碼可看出，其中很多class與list.wxml中定義的相同，因此，可以進行復用。最好的方法是將這兩個頁面中重復的class定義剪切粘貼到app.wxss文件中，這樣，list.wxml和search.wxml這兩個頁面文件都可以使用這些樣式了。
然后，將search.wxml中特有的class進行單獨定義，打開search.wxss文件，編寫以下樣式代碼：
.search-area{
background: #f4f4f4;
padding: 1rem 0.5rem;
}
.search-area input{
background: #fff;
border-radius: 3px;
height: 2rem;
line-height: 2rem;
margin-bottom: 0.5rem;
padding-left: 0.5rem;
font-size: 0.8rem;
}
開發頁面邏輯代碼
接下來開發搜索頁面的邏輯代碼，打開search.js文件，編寫以下代碼：
var config=require('../../config.js'); //導入配置文件
Page({
data:{
value:'', //搜索關鍵字
loading:false, //按鍵前的loading圖標
list:[], //搜索結果
},
//保存輸入的關鍵字
inputing:function(e){
this.setData({
value:e.detail.value //更新搜索關鍵字
});
},
//立即搜索按鈕
bindSearch:function(){
var self=this;
this.setData({
loading:!self.data.loading //更新立即搜索按鈕的loading圖標
});
//開始搜索
wx.request({
url:config.config.searchByNameUrl, //搜索接口
data:{keyword:self.data.value}, //搜索關鍵字
success:function(e){
if(e.statusCode == 200){ //搜索成功
self.setData({
list:e.data.showapi_res_body.pagebean.contentlist, //更新搜索結果
loading:!self.data.loading
});
//將歌曲列表保存到本地緩存中
wx.setStorageSync('songlist',e.data.showapi_res_body.pagebean.contentlist);
}
}
});
}
})
以上代碼首先導入配置文件。
接著初始化數據，在初始化數據部分定義了3個變量，value用來保存用戶輸入的查詢關鍵字，而loading變量用來控制是否顯示查詢提示信息，list數組則用來保存查詢到的音樂列表。
在搜索按鈕的事件處理函數中，使用wx.request函數調用配置文件中定義的接口，并傳入關鍵字進行搜索，如果搜索成功，則將音樂文件列表更新到list數組中，同時還要將音樂文件列表緩存到本地，方便play頁面播放時查找。
雖然搜索結果中的音樂列表與list頁面中的音樂列表有些字段不相同，但在播放頁面中，已經進行了邏輯合并處理，因此，這些差異并不會影響play頁面中的播放。
保存搜索頁面的文件，最后就可以測試搜索的效果了。
在調試頁面中，單擊下方tab中的“搜索”進入搜索頁面，輸入搜索關鍵字，單擊“立即搜索”按鈕，下方將顯示搜索的結果，如圖14所示。
圖14 搜索結果
在圖14所示的列表中，單擊某一首音樂，即可進入圖13所示的播放界面，可播放收聽該音樂。
至此，本案例開發完成。由于篇幅所限，這里就不截圖顯示測試的各界面了，讀者可自行測試效果。
來自：http://geek.csdn.net/news/detail/188145