微信小程序怎么实现音乐排行榜(微信小程序,开发技术)

　　排行页

我们先在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 {

24. }

25. }

26. });

27. }

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://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/iydofdgkebm.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://qixn-bj.oss-cn-beijing.aliyuncs.com/seosjz/uploadfile/all/jpg/h04p53iojgf.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');

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

23. ...

25. initTopList: function (data) {

26. var self = this;

27. if (data.code == 0) {

28. self.setData({

29. topList: data.data.topList

30. })

31. }

32. },

34. ...

36. })

复制代码

　　排行页主要由列表组成，所以使用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. },