微信小程序开发案例之音乐播放器

微信小程序开发案例之音乐播放器
微信小程序,小程序社区,weixin,微信小程序小白项目开发案例之音乐播放器——推荐页，

推荐页完成标题栏后我们开始编写推荐页，即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": [] }}