小潘杂谈

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

字号+ 作者:admin 来源:seo博客 2020-09-07 09:30 我要评论( )

推荐页完成标题栏后我们开始编写推荐页,即mainView=1时所要显示的页面。根据图10-2所示,推荐页由上方的轮播组件(banner)以及下方的电台列表两部分构成。为了完......

推荐页完成标题栏后我们开始编写推荐页,即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,//表示返回类型为JSONheader: {'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 alt="微信小程序开发案例之音乐播放器" src="{{item.picUrl}}" style="height:100%">data写好后,我们在onLoad里调用我们写好的网络请求函数,传入的参数(that.initPageData)即当请求成功后需要执行的函数,在这个函数里我们为数组radioList和slider赋值。initPageData: function (data) {var self = this;//请求成功再赋值,需要判断code是否为0if (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向网络请求数据,返回歌曲列表,并且在播放页面加载这个列表,这一部分就留到音乐播放页再完成吧。以上就是微信小程序开发案例之音乐播放器的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读