注冊

微信小程序音樂播放器,音樂播放器小程序制作步驟（音樂排行榜）

2018-03-21
導讀：同上一小節(jié)所做的一樣，我們先在services/music.js里添加網絡請求函數...

　　排行頁

　　

　　獲取排行榜的網絡請求地址：

　　http://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg

　　

　　同上一小節(jié)所做的一樣，我們先在services/music.js里添加網絡請求函數：

  1. function getTopMusic(callback){
  2.     var data = {
  3.             format: 'json',
  4.             g_tk: 5381,
  5.             uin: 0,
  6.             inCharset: 'utf-8',
  7.             outCharset: 'utf-8',
  8.             notice: 0,
  9.             platform: 'h5',
  10.             needNewCode: 1,
  11.             _: Date.now()
  12.         };
  13.         wx.request({
  14.             url: 'http://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg',
  15.             data: data,
  16.             header: {
  17.                 'Content-Type': 'application/json'
  18.             },
  19.             success: function (res) {
  20.                 if (res.statusCode == 200) {
  21.                     callback(res.data)
  22.                 } else {
  23.  
  24.                 }
  25.             }
  26.         });
  27. }
  28.  
  29. module.exports = {
  30.   getRecommendMusic:getRecommendMusic
  31.   getTopMusic:getTopMusic
  32. }
復制代碼

 

　　這里返回的JSON格式數據為：

  1. {
  2.     "code": 0,
  3.     "subcode": 0,
  4.     "message": "",
  5.     "default": 0,
  6.     "data": {
  7.         "topList": [
  8.             {
  9.                 "id": 4,
  10.                 "listenCount": 20000000,
  11.                 "picUrl": "http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_4_300_200669704.jpg",
  12.                 "songList": [
  13.                     {
  14.                         "singername": "趙雷",
  15.                         "songname": "理想 (Live)"
  16.                     },
  17.                     {
  18.                         "singername": "薛之謙/歐陽娜娜",
  19.                         "songname": "小幸運 (Live)"
  20.                     },
  21.                     {
  22.                         "singername": "迪瑪希Dimash",
  23.                         "songname": "秋意濃 (Live)"
  24.                     }
  25.                 ],
  26.                 "topTitle": "巔峰榜·流行指數",
  27.                 "type": 0
  28.             },
  29.             {
  30.                 "id": 26,
  31.                 "listenCount": 19900000,
  32.                 "picUrl": "http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_26_300_109191643.jpg",
  33.                 "songList": [
  34.                     {
  35.                         "singername": "李玉剛",
  36.                         "songname": "剛好遇見你"
  37.                     },
  38.                     {
  39.                         "singername": "周杰倫",
  40.                         "songname": "告白氣球"
  41.                     },
  42.                     {
  43.                         "singername": "張杰",
  44.                         "songname": "三生三世"
  45.                     }
  46.                 ],
  47.                 "topTitle": "巔峰榜·熱歌",
  48.                 "type": 0
  49.             },
  50.             ...
  51.         ]
  52.     }
  53. }
復制代碼

 

　　可以看到這里顯示了兩類排行榜：“巔峰榜·流行指數”與“巔峰榜·熱歌”，篇幅原因省去了其他12類，所以實際返回的排行榜類別為14類，每一類包涵標題("topTitle")，該類的圖標圖片地址("picUrl")，以及前三位的歌曲列表("songList")。因此，我們最后要達成的頁面應該為圖所示。

　　同理上一節(jié)內容，我們新增topList數組，調用網絡請求，使用回調函數為topList賦值。

  1. //引用網絡請求文件
  2. var MusicService = require('../../services/music');
  3.  
  4. //獲取應用實例
  5. var app = getApp()
  6. Page({
  7.     data: {
  8.         indicatorDots: true,
  9.         autoplay: true,
  10.         interval: 5000,
  11.         duration: 1000,
  12.         radioList: [],
  13.         slider: [],
  14.         mainView: 1,
  15.         topList:[]
  16.     },
  17.     onLoad: function () {
  18.         var that = this;
  19.         MusicService.getRecommendMusic(that.initPageData);
  20.         MusicService.getTopMusic(that.initTopList);
  21.     },
  22.  
  23.     ...
  24.  
  25.     initTopList: function (data) {
  26.         var self = this;
  27.         if (data.code == 0) {
  28.             self.setData({
  29.                 topList: data.data.topList
  30.             })
  31.         }
  32.     },
  33.  
  34.     ...
  35.  
  36. })
  37.  
復制代碼

 

　　排行頁主要由列表組成，所以使用wx:for為topList每一項創(chuàng)建view,綁定每一項的id和點擊事件topListTap。

  1. <!-- 排行頁 -->
  2. <view class="top-view" hidden="{{currentView != 2}}">
  3.   <view class="top-item" wx:for="{{topList}}" wx:key="unique" data-id="{{item.id}}" bindtap="topListTap">
  4.     ...
  5.   </view>
  6. </view>
復制代碼

 

　　列表的每一項由圖片(數據源為picUrl)以及前三名歌曲列表(數據源為songList)組成。我們把這一部分加入到省略號位置。

  1. <!-- 排行頁 -->
  2. <view class="top-view" hidden="{{currentView != 2}}">
  3.   <view class="top-item" wx:for="{{topList}}" wx:key="unique" data-id="{{item.id}}" bindtap="topListTap">
  4.     <image class="top-item-img" mode="aspectFit" src="{{item.picUrl}}" />
  5.     <view class="top-item-info">
  6.       ...
  7.     </view>
  8.   </view>
  9. </view>
復制代碼

 

　　圖片定義了屬性aspectFit，即在保持縱橫比的前提下，縮放圖片，使圖片在容器內都顯示出來。

　　

　　最后我們添加歌曲列表，每一項由文字(歌曲名-歌手)以及表示排名的圖片組成。這個圖片為本地圖片，保存在resources/images下，名稱為1.png,2.png,3.png。所以這部分最終的代碼為：

  1. <!-- 排行頁 -->
  2. <view class="top-view" hidden="{{currentView != 2}}">
  3.   <view class="top-item" wx:for="{{topList}}" wx:key="unique" data-id="{{item.id}}" bindtap="topListTap">
  4.     <image class="top-item-img" mode="aspectFit" src="{{item.picUrl}}" />
  5.     <view class="top-item-info">
  6.       <view class="top-item-list" wx:for="{{item.songList}}" wx:key="unique">
  7.         <image class="top-icon" src="../../resources/images/{{index+1}}.png" />
  8.         <text class="top-item-text">{{item.songname}}-{{item.singername}}</text>
  9.       </view>
  10.     </view>
  11.   </view>
  12. </view>
復制代碼

 

　　需要的格式文件代碼為：

  1. .top-view {
  2.     background:#f7f7f7;
  3.     padding:20rpx;
  4. }
  5. .top-item {
  6.     display:-webkit-box;
  7.     height:200rpx;
  8.     margin-bottom:20rpx;
  9.     background:#fff;
  10.     overflow: hidden;
  11. }
  12. .top-item-img {
  13.     display:block;
  14.     position:relative;
  15.     width:200rpx;
  16.     height:200rpx;
  17. }
  18. .top-item-info {
  19.     margin:0 10rpx 0 20rpx;
  20.     flex-direction:column;
  21. }
  22. .top-item-list {
  23.     white-space:nowrap;
  24. }
  25. .top-icon {
  26.     margin-top:16rpx;
  27.     width:40rpx;
  28.     height:40rpx;
  29. }
  30. .top-item-text {
  31.     margin-bottom: 10rpx;
  32.     font-size:40rpx;
  33. }
復制代碼

 

　　頁面完成后，在index.js里添加點擊事件的代碼：

  1. topListTap: function (e) {
  2.         wx.navigateTo({
  3.             url: '../toplist/toplist'
  4.         })
  5.     },
復制代碼

 

　　這樣在點擊之后就進入了列表頁面，但這樣還不能完成我們的要求，因為這樣列表頁完全不知道我們點擊了哪一類。為了讓列表頁獲取這個信息，我們需要把類的id傳過去，這就需要我們在app.js里添加一個全局變量。

  1. //app.js
  2. App({
  3.   onLaunch: function () {
  4.     //調用API從本地緩存中獲取數據
  5.     var logs = wx.getStorageSync('logs') || []
  6.     logs.unshift(Date.now())
  7.     wx.setStorageSync('logs', logs)
  8.   },
  9.   getUserInfo:function(cb){
  10.     var that = this
  11.     if(this.globalData.userInfo){
  12.       typeof cb == "function" && cb(this.globalData.userInfo)
  13.     }else{
  14.       //調用登錄接口
  15.       wx.login({
  16.         success: function () {
  17.           wx.getUserInfo({
  18.             success: function (res) {
  19.               that.globalData.userInfo = res.userInfo
  20.               typeof cb == "function" && cb(that.globalData.userInfo)
  21.             }
  22.           })
  23.         }
  24.       })
  25.     }
  26.   },
  27.   //這里是我們添加的代碼!!!
  28.   setGlobalData: function (obj) {
  29.     for(var n in obj) {
  30.       this.globalData[n] = obj[n];
  31.     }
  32.   },
  33.   globalData:{
  34.     userInfo:null
  35.   }
  36. })
復制代碼

 

　　這里定義了一個方法，讓我們可以向globalData里添加數據，之后我們只需在點擊事件里調用這個方法就可以了：

  1. topListTap: function (e) {
  2.         var _dataSet = e.currentTarget.dataset;   //獲取點擊的view的數據
  3.         app.setGlobalData({                       //將數據里的id傳給globaldata
  4.             topListId: _dataSet.id
  5.         });
  6.         wx.navigateTo({
  7.             url: '../toplist/toplist'
  8.         })
  9.     },
復制代碼

 

　　上一節(jié)：微信小程序小白項目開發(fā)案例之音樂播放器——推薦頁

重磅推薦：小程序開店目錄

第一部分：小商店是什么

第二部分：如何開通一個小商店

第三部分：如何登錄小商店

第四部分：開店任務常見問題

第五部分：小商店可以賣什么

第六部分：HiShop小程序特色功能

第七部分：小程序直播

第八部分：小程序收貨/物流

第九部分：小程序怎么結算

第十部分：小程序客服

第十一部分：電商創(chuàng)業(yè)

第十二部分：小程序游戲開發(fā)