WeChat 미니 프로그램 개발 사례 뮤직 플레이어

추천 페이지
제목 표시줄을 완성한 후 mainView=1일 때 표시되는 페이지인 추천 페이지 작성을 시작합니다.
그림 10-2와 같이 추천 페이지는 상단의 캐러셀 구성요소(배너)와 하단의 라디오 목록의 두 부분으로 구성됩니다.
이 페이지를 완료하기 위해 먼저 네트워크 요청에서 반환된 데이터 형식을 살펴보겠습니다.
오픈 소스 데이터는 여기에서 사용됩니다:
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&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": []
    }
}

여기의 코드는 요청이 성공했는지 여부를 나타냅니다. 0과 같으면 요청이 성공했음을 의미합니다. 데이터는 우리에게 필요한 데이터로, 세 부분으로 구성되어 있습니다. 즉, 캐러셀 구성 요소에 대한 데이터를 제공하는 슬라이더 부분과 라디오 방송국 목록에 대한 데이터를 제공하는 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(&#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);
    },
})

데이터가 작성된 후 onLoad에 작성한 네트워크 요청 함수를 호출합니다. 수신 매개변수(that.initPageData)는 요청이 성공했습니다. 실행해야 하는 함수입니다. 이 함수에서는 radioList 및 슬라이더 배열에 값을 할당합니다.

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

점프할 때 획득한 라디오이드를 통해 네트워크에 데이터를 요청하고, 노래 목록을 반환하고, 이 목록을 재생 페이지에 로드해야 합니다. 이 부분은 음악 재생 페이지에 맡겨서 완료합니다.

위 내용은 WeChat 미니 프로그램 개발 사례 뮤직 플레이어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!