WeChat Mini-Programmentwicklungskoffer-Musikplayer

Empfohlene Seite
Nachdem wir die Titelleiste ausgefüllt haben, beginnen wir mit dem Schreiben der empfohlenen Seite. Dies ist die Seite, die angezeigt werden soll, wenn mainView=1.
Wie in Abbildung 10-2 dargestellt, besteht die Empfehlungsseite aus zwei Teilen: der Karussellkomponente (Banner) oben und der Radioliste unten.
Um diese Seite zu vervollständigen, werfen wir zunächst einen Blick auf das Datenformat, das von der Netzwerkanforderung zurückgegeben wird.
Hier werden Open-Source-Daten verwendet:
http://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg
Bezogen auf den Inhalt im Kapitel API-Schnittstelle erstellen wir music.js in Beginnen Sie in der Ordnerdatei „Services“ mit dem Schreiben des Netzwerkanforderungscodes:

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

Der Code hier zeigt an, ob unsere Anfrage erfolgreich ist bedeutet, dass die Anfrage erfolgreich ist. Die Daten sind die von uns benötigten Daten, die aus drei Teilen bestehen, nämlich dem Slider-Teil, der Daten für unsere Karussellkomponente bereitstellt, und dem RadioList-Teil, der Daten für die Radiosenderliste bereitstellt. Diese beiden Teile werden jeweils im Array-Format gespeichert und die entsprechenden Daten können namentlich abgerufen werden.
Nachdem wir die Daten haben, beginnen wir mit dem Schreiben der Komponenten, um die Daten anzuzeigen:

<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);
    },
})

Nachdem die Daten geschrieben wurden, rufen wir die Netzwerkanforderungsfunktion auf, die wir in onLoad geschrieben haben, und übergeben sie Der Parameter (that.initPageData) ist die Funktion, die ausgeführt werden muss, wenn die Anfrage erfolgreich ist. In dieser Funktion weisen wir den Arrays radioList und slider Werte zu.

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;
        ...
    },

Beim Springen müssen wir über das erhaltene Radiooid Daten vom Netzwerk anfordern, die Songliste zurückgeben und diese Liste auf die Wiedergabeseite laden. Dieser Teil bleibt der Musikwiedergabe überlassen Seite Beende es noch einmal.

Das obige ist der detaillierte Inhalt vonWeChat Mini-Programmentwicklungskoffer-Musikplayer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!