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

2018-01-05

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

　　获取列表页数据

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

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

function getTopListInfo(id,callback){
var data = {
g_tk: 5381,
uin: 0,
format: 'json',
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
platform: 'h5',
needNewCode: 1,
tpl: 3,
page: 'detail',
type: 'top',
topid: id,
_: Date.now()
};
wx.request({
url: 'http://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg',
data: data,
header: {
'Content-Type': 'application/json'
},
success: function (res) {
if (res.statusCode == 200) {
callback(res.data);
} else {
}
}
});
}
module.exports = {
...
getTopListInfo:getTopListInfo
}

复制代码

　　返回的JSON格式数据为：

{
"color": 14729248,
"comment_num": 1859,
"cur_song_num": 100,
"date": "2017_6",
"song_begin": 0,
"songlist": [
{
"Franking_value": "1",
"cur_count": "1",
"data": {
"albumdesc": "",
"albumid": 1829744,
"albummid": "003GpN3b2UiNx0",
"albumname": "Run Up",
"alertid": 100002,
"belongCD": 1,
"cdIdx": 0,
"interval": 203,
"isonly": 1,
"label": "0",
"msgid": 14,
"pay": {
"payalbum": 0,
"payalbumprice": 0,
"paydownload": 1,
"payinfo": 1,
"payplay": 0,
"paytrackmouth": 1,
"paytrackprice": 200,
"timefree": 0
},
"preview": {
"trybegin": 0,
"tryend": 0,
"trysize": 0
},
"rate": 7,
"singer": [
{
"id": 38150,
"mid": "001J99OK2689F4",
"name": "Major Lazer"
},
{
"id": 177284,
"mid": "002R2h8l05rVWb",
"name": "PARTYNEXTDOOR"
},
{
"id": 20710,
"mid": "003kJN1r16tgOt",
"name": "Nicki Minaj"
}
],
"size128": 3251944,
"size320": 8129528,
"size5_1": 0,
"sizeape": 0,
"sizeflac": 0,
"sizeogg": 4972861,
"songid": 200556634,
"songmid": "003kPDEH3fSvh8",
"songname": "Run Up",
"songorig": "Run Up",
"songtype": 0,
"strMediaMid": "00191A2Z3qTVEr",
"stream": 0,
"switch": 636675,
"type": 0,
"vid": ""
},
"in_count": "2",
"mb": "",
"old_count": "1",
"singer2": {
"Fgenre": "0",
"Fsinger_id": "177284",
"Fsinger_mid": "002R2h8l05rVWb",
"Fsinger_name": "PARTYNEXTDOOR",
"Ftype": "0"
},
"singer3": {
"Fgenre": "0",
"Fsinger_id": "20710",
"Fsinger_mid": "003kJN1r16tgOt",
"Fsinger_name": "Nicki Minaj",
"Ftype": "1"
},
"vid": {
"Fmv_id": "",
"Fstatus": "",
"Fvid": ""
}
},
...
"topinfo": {
"ListName": "巅峰榜·欧美",
"MacDetailPicUrl": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104205.jpg",
"MacListPicUrl": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104155.jpg",
"UpdateType": "1",
"albuminfo": "QQ音乐巅峰榜·欧美专辑根据用户收听行为自动生成，集结当下最流行的欧美新碟!:更新时间：每周五|统计周期：一周(上周五至本周四)|统计对象：一年内发行的欧美专辑|排名数量：100张|统计算法：根据专辑内所有歌曲在一周内的有效播放次数总和，由高到低取前100名|有效播放次数：登录用户完整播放一首歌曲，记为一次有效播放;同一用户收听同一首歌曲，每天最多记录20次有效播放",
"headPic_v12": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20160224140905.jpg",
"info": "QQ音乐巅峰榜·欧美根据用户收听行为自动生成，集结当下最流行的欧美新歌! 更新时间：每周四22点 统计周期：一周(上周四至本周三) 统计对象：三个月内发行的欧美歌曲 统计数量：100首 统计算法：根据歌曲在一周内的有效播放次数，由高到低取前100名(同一歌手最多允许5首歌曲同时上榜) 有效播放次数：登录用户完整播放一首歌曲，记为一次有效播放;同一用户收听同一首歌曲，每天记录为1次有效播放。",
"listennum": 9800000,
"pic": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20141110194323.jpg",
"picDetail": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104128.jpg",
"pic_album": "http://imgcache.qq.com/music/photo_new/T002R300x300M000003GpN3b2UiNx0.jpg",
"pic_h5": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20140519104015.jpg",
"pic_v11": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20141110194323.jpg",
"pic_v12": "http://y.gtimg.cn/music/common/upload/iphone_order_channel/toplist_3_300_200556634.jpg",
"topID": "3",
"type": "0"
},
"total_song_num": 100,
"update_time": "2017-02-09"
}

复制代码

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

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

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

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

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

<view class="song-list" >
<view class="song-item" wx:for="{{songList}}" wx:key="unique" data-data="{{item.data}}" data-index="{{index}}" bindtap="musicItemTap">
<text class="song-index">{{index+1}}</text>
<text class="song-item-title">{{item.name}}</text>
<view class="song-item-text">
<block wx:for="{{item.singer}}" wx:key="unique">
<block wx:if="{{index!=0}}">|</block>
{{item.name}}
</block>
·{{item.album.name}}
</view>
</view>
</view>

复制代码

　　格式文件为：

.song-list {
padding-left: 50px;
background: #000000;
}
.song-item {
position: relative;
padding: 10px 10px 10px 0;
border-bottom: 1px solid rgba(255,255,255, 0.5);
}
.song-index {
position: absolute;
left: -40px;
width: 40px;
color: #fff;
font-size: 20px;
text-align: center;
line-height: 50px;
}
.song-item-title {
height: 30px;
line-height: 30px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #fff;
}
.song-item-text {
font-size: 14px;
color: rgba(255,255,255, .75); //表示颜色
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

复制代码

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

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

<view class="list-top">
<view class="top-info">
<view class="top-info-inner">
<view class="top-info-text">
<view class="top-info-title">{{topinfo.ListName}}</view>
<view class="top-info-time">
<text>{{update_time}} 更新</text>
</view>
</view>
<view class="top-play" bindtap="mainTopTap"></view>
</view>
</view>
<image class="top-img" mode="aspectFit" src="{{topinfo.pic_album}}"></image>
<view class="top-back"></view>
</view>

复制代码

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

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

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

第二部分：如何开通一个小商店