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

// 获取首页的音乐数据

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-/music/photo_new/T003R720x288M000002QUG1D0iCyQM.jpg",

                "id": 8642

            },

            {

                "linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",

                "picUrl": "http://y.gtimg-/music/photo_new/T003R720x288M000003KFpsf1mPzlY.jpg",

                "id": 8645

            },

            {

                "linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html",

                "picUrl": "http://y.gtimg-/music/photo_new/T003R720x288M000000ZZAWw1KsyoJ.jpg",

                "id": 8653

            },

            {

                "linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao",

                "picUrl": "http://y.gtimg-/music/photo_new/T003R720x288M000001MG8W3200tuD.jpg",

                "id": 8609

            },

            {

                "linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9",

                "picUrl": "http://y.gtimg-/music/photo_new/T003R720x288M000000cfVE83KCkmz.jpg",

                "id": 8607

            }

        ],

        "radioList": [

            {

                "picUrl": "http://y.gtimg-/music/photo/radio/track_radio_199_13_1.jpg",

                "Ftitle": "热歌",

                "radioid": 199

            },

            {

                "picUrl": "http://y.gtimg-/music/photo/radio/track_radio_307_13_1.jpg",

                "Ftitle": "一人一首招牌歌",

                "radioid": 307

            }

        ],

        "songList": []

    }

}

<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;

        ...

    },