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

// 获取首页的音乐数据  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);      },  })

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

以上就是微信小程序开发案例之音乐播放器的详细内容，更多内容请关注技术你好其它相关文章！