pp电子

登录
免费开通
产品中心
更多服务

微信小程序音乐播放器,音乐播放器小程序制作方法（列表页数据）

—— 2018 ——
01/05
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2018/1/5 0:00:00 泉源：不详 作者：未知

　　获取列表页数据

　　

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

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

  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://www.kesion.com/UploadFiles/2021-7/82/b1132703680106096502D73.jpg",
  100.         "MacListPicUrl": "http://www.kesion.com/UploadFiles/2021-7/82/b2132703680112815209TTW.jpg",
  101.         "UpdateType": "1",
  102.         "albuminfo": "QQ音乐巅峰榜·西欧专辑凭证用户收听行为自动天生 ，，集结当下最盛行的西欧新碟!:更新时间：每周五|统计周期：一周(上周五至本周四)|统计工具：一年内刊行的西欧专辑|排名数目：100张|统盘算法：凭证专辑内所有歌曲在一周内的有用播放次数总和 ，，由高到低取前100名|有用播放次数：登任命户完整播放一首歌曲 ，，记为一次有用播放;统一用户收听统一首歌曲 ，，天天最多纪录20次有用播放",
  103.         "headPic_v12": "http://www.kesion.com/UploadFiles/2021-7/82/b31327036801159401894XD.jpg",
  104.         "info": "QQ音乐巅峰榜·西欧凭证用户收听行为自动天生 ，，集结当下最盛行的西欧新歌!<br><br>更新时间：每周四22点<br>统计周期：一周(上周四至本周三)<br>统计工具：三个月内刊行的西欧歌曲<br>统计数目：100首<br>统盘算法：凭证歌曲在一周内的有用播放次数 ，，由高到低取前100名(统一歌手最多允许5首歌曲同时上榜)<br>有用播放次数：登任命户完整播放一首歌曲 ，，记为一次有用播放;统一用户收听统一首歌曲 ，，天天纪录为1次有用播放。。。。。",
  105.         "listennum": 9800000,
  106.         "pic": "http://www.kesion.com/UploadFiles/2021-7/82/b41327036801293776032UZ.jpg",
  107.         "picDetail": "http://www.kesion.com/UploadFiles/2021-7/82/b513270368014312751599M.jpg",
  108.         "pic_album": "http://www.kesion.com/UploadFiles/2021-7/82/b6132703680146096246H12.jpg",
  109.         "pic_h5": "http://www.kesion.com/UploadFiles/2021-7/82/b71327036801562524311A3.jpg",
  110.         "pic_v11": "http://www.kesion.com/UploadFiles/2021-7/82/b41327036801293776032UZ.jpg",
  111.         "pic_v12": "http://www.kesion.com/UploadFiles/2021-7/82/b8132703680160783652TOF.jpg",
  112.         "topID": "3",
  113.         "type": "0"
  114.     },
  115.     "total_song_num": 100,
  116.     "update_time": "2017-02-09"
  117. }
复制代码

 

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

　　

　　在编写结构文件之前我们先来看一下我们最后完成后的样子 ，，如图

　　

　　微信小程序音乐播放器,音乐播放器小程序制作方法（列表页数据）

　　

 

　　

　　

　　

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

　　

　　我们先从歌曲列表最先 ，，列表的每一项由序号 ，，歌曲名称 ，，演唱者(多名演唱者以“|”脱离)以及专辑名称组成 ，，以是pp电子结构文件为：

  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完成了文字部分与右边的播放按钮 ，，又在这部分之后加载了图片 ，，这样概略的结构就完成了。。。。。可是这样做会爆发一个问题：我们设置文字为白色 ，，若是加载的图片也为白色配景 ，，那么文字就会变的很难看清了。。。。。

　　

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

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


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿 ，，由于未联系到知识产权人或未发明有关知识产权的挂号 ，，若有知识产权人并不肯意我们使用 ，，若是有侵权请连忙联系。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真 ，，仅系客观性形貌 ，，如您需要相识该类商品/服务详细的资讯 ，，请您直接与该类商品/服务的提供者联系。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商 ，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异 ，，提供产品和服务 ，，助力企业向数字化转型 ，，通过科技驱动商业刷新 ，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序
上/下篇

  • 支付宝小程序开发文档方法

    支付宝小程序是继微信之后开发商家小程序的APP ，，也同时给商家带来了另一大渠道商机 ，，通过对支付宝口碑 ，，支付宝生涯号等的谋划 ，，为线下门店运营带来更优异的伺机 ，，那么关于新手...

    微信小程序运营SaaS 2018/1/8 0:00:00

  • 微信小程序音乐播放器,音乐播放器小程序制作方法（渲染页面）

    为相识决这个问题 ，，我们给图片添加一个渐变的遮罩 ，，就像图10-8那样 ，，这样抵达文字部分时 ，，配景就酿成了玄色 ，，不会影响文字的显示 ，，并且抵达了由图片究竟下列表颜色渐变的效果 ，，...

    微信小程序 2018/1/5 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序音乐播放器,音乐播放器小程序制作方法（列表页数据）