推荐页
完成标题栏后我们开始编写推荐页，即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向网络请求数据，返回歌曲列表，并且在播放页面加载这个列表，这一部分就留到音乐播放页再完成吧。
以上就是微信小程序开发案例之音乐播放器的详细内容。