返回
怎么开小程序商城店铺
  • 店铺开通

    销客多小程序商城,可快速开通上架店铺

  • 拉新推广

    链接12亿微信流量,拉新工具沉淀意向客户

  • 复购裂变

    拼团、分销等提升转化,不断裂变新用户购买

  • 对接门店

    线上导流、促活门店,实现线上下同步发展

制作小程序
HiShop > Hi小程序 > 小程序开发 >

微信小程序音乐播放器,音乐播放器小程序制作步骤(列表页数据)

2018-01-05 作者:黄先生

  获取列表页数据

  

  我们先来完成点击排行里的项目所跳转的排行列表。

  首先我们还是先编写一下网络请求的函数。

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

 

  返回的JSON格式数据为:

  1. {
  2.     "color": 14729248,
  3.     "comment_num": 1859,
  4.     "cur_song_num": 100,
  5.     "date": "2017_6",
  6.     "song_begin": 0,
  7.     "songlist": [
  8.         {
  9.             "Franking_value": "1",
  10.             "cur_count": "1",
  11.             "data": {
  12.                 "albumdesc": "",
  13.                 "albumid": 1829744,
  14.                 "albummid": "003GpN3b2UiNx0",
  15.                 "albumname": "Run Up",
  16.                 "alertid": 100002,
  17.                 "belongCD": 1,
  18.                 "cdIdx": 0,
  19.                 "interval": 203,
  20.                 "isonly": 1,
  21.                 "label": "0",
  22.                 "msgid": 14,
  23.                 "pay": {
  24.                     "payalbum": 0,
  25.                     "payalbumprice": 0,
  26.                     "paydownload": 1,
  27.                     "payinfo": 1,
  28.                     "payplay": 0,
  29.                     "paytrackmouth": 1,
  30.                     "paytrackprice": 200,
  31.                     "timefree": 0
  32.                 },
  33.                 "preview": {
  34.                     "trybegin": 0,
  35.                     "tryend": 0,
  36.                     "trysize": 0
  37.                 },
  38.                 "rate": 7,
  39.                 "singer": [
  40.                     {
  41.                         "id": 38150,
  42.                         "mid": "001J99OK2689F4",
  43.                         "name": "Major Lazer"
  44.                     },
  45.                     {
  46.                         "id": 177284,
  47.                         "mid": "002R2h8l05rVWb",
  48.                         "name": "PARTYNEXTDOOR"
  49.                     },
  50.                     {
  51.                         "id": 20710,
  52.                         "mid": "003kJN1r16tgOt",
  53.                         "name": "Nicki Minaj"
  54.                     }
  55.                 ],
  56.                 "size128": 3251944,
  57.                 "size320": 8129528,
  58.                 "size5_1": 0,
  59.                 "sizeape": 0,
  60.                 "sizeflac": 0,
  61.                 "sizeogg": 4972861,
  62.                 "songid": 200556634,
  63.                 "songmid": "003kPDEH3fSvh8",
  64.                 "songname": "Run Up",
  65.                 "songorig": "Run Up",
  66.                 "songtype": 0,
  67.                 "strMediaMid": "00191A2Z3qTVEr",
  68.                 "stream": 0,
  69.                 "switch": 636675,
  70.                 "type": 0,
  71.                 "vid": ""
  72.             },
  73.             "in_count": "2",
  74.             "mb": "",
  75.             "old_count": "1",
  76.             "singer2": {
  77.                 "Fgenre": "0",
  78.                 "Fsinger_id": "177284",
  79.                 "Fsinger_mid": "002R2h8l05rVWb",
  80.                 "Fsinger_name": "PARTYNEXTDOOR",
  81.                 "Ftype": "0"
  82.             },
  83.             "singer3": {
  84.                 "Fgenre": "0",
  85.                 "Fsinger_id": "20710",
  86.                 "Fsinger_mid": "003kJN1r16tgOt",
  87.                 "Fsinger_name": "Nicki Minaj",
  88.                 "Ftype": "1"
  89.             },
  90.             "vid": {
  91.                 "Fmv_id": "",
  92.                 "Fstatus": "",
  93.                 "Fvid": ""
  94.             }
  95.         },
  96.         ...
  97.         "topinfo": {
  98.         "ListName": "巅峰榜·欧美",
  99.         "MacDetailPicUrl": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104205.jpg",
  100.         "MacListPicUrl": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104155.jpg",
  101.         "UpdateType": "1",
  102.         "albuminfo": "QQ音乐巅峰榜·欧美专辑根据用户收听行为自动生成,集结当下最流行的欧美新碟!:更新时间:每周五|统计周期:一周(上周五至本周四)|统计对象:一年内发行的欧美专辑|排名数量:100张|统计算法:根据专辑内所有歌曲在一周内的有效播放次数总和,由高到低取前100名|有效播放次数:登录用户完整播放一首歌曲,记为一次有效播放;同一用户收听同一首歌曲,每天最多记录20次有效播放",
  103.         "headPic_v12": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20160224140905.jpg",
  104.         "info": "QQ音乐巅峰榜·欧美根据用户收听行为自动生成,集结当下最流行的欧美新歌!<br><br>更新时间:每周四22点<br>统计周期:一周(上周四至本周三)<br>统计对象:三个月内发行的欧美歌曲<br>统计数量:100首<br>统计算法:根据歌曲在一周内的有效播放次数,由高到低取前100名(同一歌手最多允许5首歌曲同时上榜)<br>有效播放次数:登录用户完整播放一首歌曲,记为一次有效播放;同一用户收听同一首歌曲,每天记录为1次有效播放。",
  105.         "listennum": 9800000,
  106.         "pic": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20141110194323.jpg",
  107.         "picDetail": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104128.jpg",
  108.         "pic_album": "http://imgcache.qq.com/music/photo_new/T002R300x300M000003GpN3b2UiNx0.jpg",
  109.         "pic_h5": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104015.jpg",
  110.         "pic_v11": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20141110194323.jpg",
  111.         "pic_v12": "http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_3_300_200556634.jpg",
  112.         "topID": "3",
  113.         "type": "0"
  114.     },
  115.     "total_song_num": 100,
  116.     "update_time": "2017-02-09"
  117. }
复制代码

 

  请求网络时用到的参数ID是我们在排行页面点击的item的id,在上一节了我们已经通过点击事件将它保存在全局变量里了。

  

  在编写布局文件之前我们先来看一下我们最后完成后的样子,如图

  

  微信小程序音乐播放器,音乐播放器小程序制作步骤(列表页数据)

  

 

  

  

  

  可以看到这个页面主要由两部分组成,上半部分为榜单的图片以及名字等信息,下半部分是歌曲列表。

  

  我们先从歌曲列表开始,列表的每一项由序号,歌曲名称,演唱者(多名演唱者以“|”分隔)以及专辑名称组成,所以我们的布局文件为:

  1. <view class="song-list" >
  2.     <view class="song-item" wx:for="{{songList}}" wx:key="unique" data-data="{{item.data}}" data-index="{{index}}" bindtap="musicItemTap">
  3.         <text class="song-index">{{index+1}}</text>
  4.         <text class="song-item-title">{{item.name}}</text>
  5.         <view class="song-item-text">
  6.             <block wx:for="{{item.singer}}"  wx:key="unique">
  7.                 <block wx:if="{{index!=0}}">|</block>
  8.                 {{item.name}}
  9.             </block>
  10.             ·{{item.album.name}}
  11.         </view>
  12.     </view>
  13. </view>
复制代码

 

  格式文件为:

  1. .song-list {
  2.     padding-left: 50px;
  3.     background: #000000;
  4. }
  5. .song-item {
  6.     position: relative;
  7.     padding: 10px 10px 10px 0;
  8.     border-bottom: 1px solid rgba(255,255,255, 0.5);
  9. }
  10.  
  11. .song-index {
  12.     position: absolute;
  13.     left: -40px;
  14.     width: 40px;
  15.     color: #fff;
  16.     font-size: 20px;
  17.     text-align: center;
  18.     line-height: 50px;
  19. }
  20. .song-item-title {
  21.     height: 30px;
  22.     line-height: 30px;
  23.     font-size: 16px;
  24.     white-space: nowrap;
  25.     overflow: hidden;
  26.     text-overflow: ellipsis;
  27.     color: #fff;
  28. }
  29. .song-item-text {
  30.     font-size: 14px;
  31.     color: rgba(255,255,255, .75);       //表示颜色
  32.     white-space: nowrap;
  33.     overflow: hidden;
  34.     text-overflow: ellipsis;
  35. }
复制代码

 

  这部分应该比较熟悉了,需要注意的就是多个歌手的书写形式,除了第一个歌手外,其他都在前面加上“|”就是我们要的形式了。

  

  接下来我们完成上半部分,这部分的布局代码很简单:

  1. <view class="list-top">
  2.     <view class="top-info">
  3.         <view class="top-info-inner">
  4.             <view class="top-info-text">
  5.                 <view class="top-info-title">{{topinfo.ListName}}</view>
  6.                 <view class="top-info-time">
  7.                     <text>{{update_time}}  更新</text>
  8.                 </view>
  9.             </view>
  10.             <view class="top-play" bindtap="mainTopTap"></view>
  11.         </view>
  12.     </view>
  13.     <image class="top-img"  mode="aspectFit" src="{{topinfo.pic_album}}"></image>
  14.     <view class="top-back"></view>
  15. </view>
复制代码

 

  我们在tl-top-info-inner完成了文字部分与右边的播放按钮,又在这部分之后加载了图片,这样大体的布局就完成了。但是这样做会产生一个问题:我们设置文字为白色,如果加载的图片也为白色背景,那么文字就会变的很难看清了。

  

  上一节:微信小程序小白项目开发案例之音乐播放器——列表页

  下一节:微信小程序小白项目开发案例之音乐播放器——页面渲染

推荐文章

注册小程序
注册小程序