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

// 获取首页的音乐数据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": "https://www.easck.com/d/file/p/2020/08-18/202008181522261521.jpg",                "id": 8642            },            {                "linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",                "picUrl": "https://www.easck.com/d/file/p/2020/08-18/202008181522261522.jpg",                "id": 8645            },            {                "linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html",                "picUrl": "https://www.easck.com/d/file/p/2020/08-18/202008181522271523.jpg",                "id": 8653            },            {                "linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao",                "picUrl": "https://www.easck.com/d/file/p/2020/08-18/202008181522271524.jpg",                "id": 8609            },            {                "linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9",                "picUrl": "https://www.easck.com/d/file/p/2020/08-18/202008181522271525.jpg",                "id": 8607            }        ],        "radioList": [            {                "picUrl": "https://www.easck.com/d/file/p/2020/08-18/202008181522271526.jpg",                "Ftitle": "热歌",                "radioid": 199            },            {                "picUrl": "https://www.easck.com/d/file/p/2020/08-18/202008181522271527.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向网络请求数据，返回歌曲列表，并且在播放页面加载这个列表，这一部分就留到音乐播放页再完成吧。