找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1427

所属分类: 微信开发 微信小程序开发资源

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群

[最新文章] 微信小程序小白项目开发案例之音乐播放器——排行页

[复制链接]
查看: 3465|回复: 8
最佳答案
1 

17

主题

21

帖子

856

积分

专家路上

积分
856
 楼主| 发表于 2017-2-13 18:38:08 | 显示全部楼层 |阅读模式
本帖最后由 peoples 于 2017-2-16 17:25 编辑

排行页

获取排行榜的网络请求地址:
http://c.y.qq.com/v8/fcg-bin/fcg_myqq_toplist.fcg

同上一小节所做的一样,我们先在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. module.exports = {
  28.   getRecommendMusic:getRecommendMusic
  29.   getTopMusic:getTopMusic
  30. }
复制代码

这里返回的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")。因此,我们最后要达成的页面应该为图所示。
20170213172906.png
同理上一节内容,我们新增topList数组,调用网络请求,使用回调函数为topList赋值。
  1. //引用网络请求文件
  2. var MusicService = require('../../services/music');

  3. //获取应用实例
  4. var app = getApp()
  5. Page({
  6.     data: {
  7.         indicatorDots: true,
  8.         autoplay: true,
  9.         interval: 5000,
  10.         duration: 1000,
  11.         radioList: [],
  12.         slider: [],
  13.         mainView: 1,
  14.         topList:[]
  15.     },
  16.     onLoad: function () {
  17.         var that = this;
  18.         MusicService.getRecommendMusic(that.initPageData);
  19.         MusicService.getTopMusic(that.initTopList);
  20.     },

  21.     ...

  22.     initTopList: function (data) {
  23.         var self = this;
  24.         if (data.code == 0) {
  25.             self.setData({
  26.                 topList: data.data.topList
  27.             })
  28.         }
  29.     },

  30.     ...

  31. })
复制代码

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

上一节:微信小程序小白项目开发案例之音乐播放器——推荐页
下一节:微信小程序小白项目开发案例之音乐播放器—检索页(上)

点评

两个网络请求加上,号否则报错  发表于 2017-2-21 10:25
回复

使用道具 举报

最佳答案
0 

0

主题

11

帖子

170

积分

新人求带

积分
170
发表于 2017-2-16 10:07:21 | 显示全部楼层
学习学习
回复

使用道具 举报

最佳答案
0 

0

主题

16

帖子

122

积分

新人求带

积分
122
发表于 2017-2-18 11:37:00 | 显示全部楼层
学习吧,如何快速完成
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

11

帖子

122

积分

新人求带

积分
122
发表于 2017-2-19 11:06:56 | 显示全部楼层
very    good
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

15

帖子

270

积分

新人求带

积分
270
发表于 2017-2-22 14:00:15 | 显示全部楼层
学习学习
回复

使用道具 举报

最佳答案
0 

0

主题

45

帖子

579

积分

略知一二

积分
579
发表于 2017-2-22 15:22:55 | 显示全部楼层
谢谢分享!!
回复

使用道具 举报

最佳答案
0 

0

主题

15

帖子

270

积分

新人求带

积分
270
发表于 2017-2-23 16:29:55 | 显示全部楼层
地地地地地地地地地地
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4

帖子

114

积分

新人求带

积分
114
发表于 2017-2-28 13:54:27 | 显示全部楼层
学习一下!!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com