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

发布日期： 2017-09-12 阅读量： 作者： 网络

推荐页
完成标题栏后我们开始编写推荐页，即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,
            //表示返回类型为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&amp;id=1842365&amp;g_f=shoujijiaodian",
                "picUrl": "//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/T003R720x288M000002QUG1D0iCyQM.jpg",
                "id": 8642
            },
            {
                "linkUrl": "http://y.qq.com/live/zhibo/0214liwen.html",
                "picUrl": "//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/T003R720x288M000003KFpsf1mPzlY.jpg",
                "id": 8645
            },
            {
                "linkUrl": "http://v.qq.com/live/p/topic/22876/preview.html",
                "picUrl": "//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/T003R720x288M000000ZZAWw1KsyoJ.jpg",
                "id": 8653
            },
            {
                "linkUrl": "http://y.qq.com/m/act/singer/index.html?ADTAG=shoujijiao",
                "picUrl": "//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/T003R720x288M000001MG8W3200tuD.jpg",
                "id": 8609
            },
            {
                "linkUrl": "http://y.qq.com/w/album.html?albummid=0035hOHV0uUWA9",
                "picUrl": "//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/T003R720x288M000000cfVE83KCkmz.jpg",
                "id": 8607
            }
        ],
        "radioList": [
            {
                "picUrl": "//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/track_radio_199_13_1.jpg",
                "Ftitle": "热歌",
                "radioid": 199
            },
            {
                "picUrl": "//imgfile2.oss-cn-hangzhou.aliyuncs.com/147/track_radio_307_13_1.jpg",
                "Ftitle": "一人一首招牌歌",
                "radioid": 307
            }
        ],
        "songList": []
    }
}

# 程序开发 # 小程序 # 播放器

上一篇: golang 框架的云原生部署最佳实践？

下一篇: 不同类型 Go 框架之间的比较和适用性

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

随便看看