微信小程序怎么实现音乐排行榜

今天小编给大家分享一下微信小程序怎么实现音乐排行榜的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　排行页

我们先在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: 'h6',

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": "https://file.lsjlt.com/upload/202306/25/yfmywyoaatf.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": "https://file.lsjlt.com/upload/202306/25/sp4t1gf3cjv.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")。因此，我们最后要达成的页面应该为图所示。

　　同理上一节内容，我们新增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每一项创建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.     },

以上就是“微信小程序怎么实现音乐排行榜”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。