https://www.jmqz1000.com

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

推荐页
完成标题栏后我们开始编写推荐页,即mainView=1时所要显示的页面。
根据图10-2所示,推荐页由上方的轮播组件(banner)以及下方的电台列表两部分构成。
为了完成这个页面,我们先来看看网络请求返回的数据格式。
这里使用开源数据:
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
参照API接口章节里的内容,我们在services文件夹下创建music.html' target='_blank'>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}} >

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向网络请求数据,返回歌曲列表,并且在播放页面加载这个列表,这一部分就留到音乐播放页再完成吧。

以上就是微信小程序开发案例之音乐播放器详细内容,其它编程语言

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

相关文章阅读