おすすめページ
タイトルバーが完成したら、mainView=1のときに表示されるページであるおすすめページを書き始めます。
図 10-2 に示すように、レコメンデーション ページは、上部のカルーセル コンポーネント (バナー) と下部のラジオ リストの 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 に等しい場合、リクエストが成功したことを意味します。データは必要なデータであり、3 つの部分が含まれています。最初の 2 つ、つまり、カルーセル コンポーネントのデータを提供するスライダー 部分と、ラジオ局リストのデータを提供する radioList 部分を使用する必要があります。 これら 2 つの部分はそれぞれ配列形式で保存され、対応するデータは名前によって取得できます。
データを取得したら、データを表示するコンポーネントの作成を開始します。
<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); }, })
データが書き込まれた後、onLoad で作成したネットワーク リクエスト関数を呼び出します。リクエストは成功しました。実行する必要がある関数。この関数では、配列 radioList と 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; ... },
ジャンプするときは、取得したラジオイドを通じてネットワークにデータをリクエストし、曲リストを返し、このリストを再生ページにロードする必要があります。この部分は音楽再生ページに任せて完了します。
以上がWeChat ミニプログラム開発事例 音楽プレーヤーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。