推薦頁
完成標題列後我們開始寫推薦頁，也就是mainView=1時要顯示的頁面。
根據圖10-2所示，推薦頁由上方的輪播組件（banner）以及下方的電台清單兩部分構成。
為了完成這個頁面，我們先來看看網路請求回傳的資料格式。
這裡使用開源資料：
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
參考API介面章節裡的內容，我們在services資料夾下創建music.js文件，在裡面開始編寫網路請求代碼：
// 获取首页的音乐数据
function getRecommendMusic(callback){
//请求所需数据
var data = {
g_tk: 5381,
uin: 0,
format: 'json',
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
platform: 'h5',
needNewCode: 1,
_: Date.now()
};
wx.request({
//地址
url: 'http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
//数据
data: data,
//表示返回类型为JSON
header: {
'Content-Type': 'application/json'
},
success: function (res) {
if (res.statusCode == 200) {
callback(res.data)
} else {
}
}
});
}
module.exports = {
getRecommendMusic:getRecommendMusic
}
复制代码
通过这个请求，返回json格式的数据样式为：
{
"code": 0,
"data": {
"slider": [
{
"linkUrl": "http://share.y.qq.com/l?g=2766&id=1842365&g_f=shoujijiaodian",
"picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000002QUG1D0iCyQM.jpg",
"id": 8642
},
{
"linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",
"picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000003KFpsf1mPzlY.jpg",
"id": 8645
},
{
"linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html",
"picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000000ZZAWw1KsyoJ.jpg",
"id": 8653
},
{
"linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao",
"picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000001MG8W3200tuD.jpg",
"id": 8609
},
{
"linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9",
"picUrl": "http://y.gtimg.cn/music/photo_new/T003R720x288M000000cfVE83KCkmz.jpg",
"id": 8607
}
],
"radioList": [
{
"picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg",
"Ftitle": "热歌",
"radioid": 199
},
{
"picUrl": "http://y.gtimg.cn/music/photo/radio/track_radio_307_13_1.jpg",
"Ftitle": "一人一首招牌歌",
"radioid": 307
}
],
"songList": []
}
}
這裡code為我們請求是否成功的標示，當它等於0時，表示請求成功。 data裡就是我們需要的數據，裡麵包含3個部分，我們需要使用的為前兩個，即slider部分——為我們的輪播組件提供數據，以及radioList部分——為電台列表提供數據。 這兩部分會分別以數組格式儲存，並透過名稱來取得對應資料。
有了資料之後，我們開始寫顯示資料的元件：
<view hidden="{{currentView != 1}}">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{slider}}" wx:key="unique">
<swiper-item data-id="{{item.id}}">
<image src="{{item.picUrl}}" style="height:100%" class="slide-image" />
</swiper-item>
</block>
</swiper>
<view class="channel">
<text class="channel-title">电台</text>
<view class="radio-list">
<block wx:for="{{radioList}}" wx:key="unique">
<view class="radio-item" data-id="{{item.radioid}}" data-ftitle="{{item.Ftitle}}" bindtap="radioTap">
<image class="radio-img" mode="aspectFit" style="height:167.5px;" src="{{item.picUrl}}" />
<text class="radio-text">{{item.Ftitle}}</text>
</view>
</block>
</view>
</view>
</view>
复制代码
最外层使用view组件包裹，当currentView!=1时隐藏。
轮播组件使用swiper组件来完成，设置是否显示指示点，是否自动播放，切换间隔以及滑动时间4个属性。每个swiper-item为图片，使用item.picUrl从slider里获取数据。
电台部分使用列表格式，数据保存在radioList内。每个item包涵两个部分：图片和标题，以item.picUrl和item.Ftitle保存，此外还要保存每个item的ID（item.radioid)用于页面跳转。点击的响应事件定义为radioTap。
至此我们需要的数据有：indicatorDots，autoplay，interval，duration，slider，radioList。我们把这些加入到index.js中的data里吧。
//引用网络请求文件
var MusicService = require('../../services/music');
//获取应用实例
var app = getApp()
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
radioList: [],
slider: [],
mainView: 1,
},
onLoad: function () {
var that = this;
MusicService.getRecommendMusic(that.initPageData);
},
})data寫好後，我們在onLoad裡呼叫我們寫好的網路請求函數，傳入的參數（that .initPageData)即當請求成功後需要執行的函數，在這個函數裡我們為數組radioList和slider賦值。
initPageData: function (data) {
var self = this;
//请求成功再赋值，需要判断code是否为0
if (data.code == 0) {
self.setData({
slider: data.data.slider,
radioList: data.data.radioList,
})
}
},
复制代码
到此为止我们的页面应该可以显示数据了，最后一步我们要给写好的view添加点击事件radioTap，让用户点击后跳转到play（音乐播放）页面。
radioTap: function (e) {
var dataSet = e.currentTarget.dataset;
...
},在跳轉的時候，我們需要透過已經獲得的radioid向網絡請求數據，返回歌曲列表，並且在播放頁面加載這個列表，這一部分就留到音樂播放頁再完成吧。
以上是微信小程式開發案例之音樂播放器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
