WeChat Mini Program Development Case Music Player

Recommendation page
After completing the title bar, we start writing the recommendation page, which is the page to be displayed when mainView=1.
As shown in Figure 10-2, the recommendation page consists of two parts: the carousel component (banner) at the top and the radio station list at the bottom.
In order to complete this page, let's first take a look at the data format returned by the network request.
Open source data is used here:
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
Referring to the content in the API interface chapter, we create music.js in the services folder file, start writing the network request code in it:

// 获取首页的音乐数据
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": []
    }
}

The code here indicates whether our request is successful. When it is equal to 0, it means the request is successful. The data is the data we need, which contains 3 parts. We need to use the first two, namely the slider part - which provides data for our carousel component, and the radioList part - which provides data for the radio station list. These two parts will be saved in array format respectively, and the corresponding data can be obtained by name.
After we have the data, we start to write the component that displays the data:

<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(&#39;../../services/music&#39;);
//获取应用实例
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);
    },
})

After the data is written, we call the network request function we wrote in onLoad, passing in the parameters (that .initPageData) is the function that needs to be executed when the request is successful. In this function, we assign values ​​to the arrays radioList and 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;
        ...
    },

When jumping, we need to request data from the network through the obtained radioid, return the song list, and load this list on the playback page. This part will be left to the music playback page to complete. Bar.

The above is the detailed content of WeChat Mini Program Development Case Music Player. For more information, please follow other related articles on the PHP Chinese website!