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

—— 2018 ——

01/05

00:00

来源：

作者：未知

栏目：小程序开发

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

　　获取列表页数据

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

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

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://www.kesion.com/UploadFiles/2021-7/82/b1132703680106096502D73.jpg",
"MacListPicUrl": "http://www.kesion.com/UploadFiles/2021-7/82/b2132703680112815209TTW.jpg",
"UpdateType": "1",
"albuminfo": "QQ音乐巅峰榜·欧美专辑根据用户收听行为自动生成，集结当下最流行的欧美新碟!:更新时间：每周五|统计周期：一周(上周五至本周四)|统计对象：一年内发行的欧美专辑|排名数量：100张|统计算法：根据专辑内所有歌曲在一周内的有效播放次数总和，由高到低取前100名|有效播放次数：登录用户完整播放一首歌曲，记为一次有效播放;同一用户收听同一首歌曲，每天最多记录20次有效播放",
"headPic_v12": "http://www.kesion.com/UploadFiles/2021-7/82/b31327036801159401894XD.jpg",
"info": "QQ音乐巅峰榜·欧美根据用户收听行为自动生成，集结当下最流行的欧美新歌! 更新时间：每周四22点 统计周期：一周(上周四至本周三) 统计对象：三个月内发行的欧美歌曲 统计数量：100首 统计算法：根据歌曲在一周内的有效播放次数，由高到低取前100名(同一歌手最多允许5首歌曲同时上榜) 有效播放次数：登录用户完整播放一首歌曲，记为一次有效播放;同一用户收听同一首歌曲，每天记录为1次有效播放。",
"listennum": 9800000,
"pic": "http://www.kesion.com/UploadFiles/2021-7/82/b41327036801293776032UZ.jpg",
"picDetail": "http://www.kesion.com/UploadFiles/2021-7/82/b513270368014312751599M.jpg",
"pic_album": "http://www.kesion.com/UploadFiles/2021-7/82/b6132703680146096246H12.jpg",
"pic_h5": "http://www.kesion.com/UploadFiles/2021-7/82/b71327036801562524311A3.jpg",
"pic_v11": "http://www.kesion.com/UploadFiles/2021-7/82/b41327036801293776032UZ.jpg",
"pic_v12": "http://www.kesion.com/UploadFiles/2021-7/82/b8132703680160783652TOF.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完成了文字部分与右边的播放按钮，又在这部分之后加载了图片，这样大体的布局就完成了。但是这样做会产生一个问题：我们设置文字为白色，如果加载的图片也为白色背景，那么文字就会变的很难看清了。

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

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

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序

上/下篇

支付宝小程序开发文档步骤

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

微信小程序运营SaaS 2018/1/8 0:00:00
微信小程序音乐播放器,音乐播放器小程序制作步骤（渲染页面）

为了解决这个问题，我们给图片添加一个渐变的遮罩，就像图10-8那样，这样到达文字部分时，背景就变成了黑色，不会影响文字的显示，而且达到了由图片到底下列表颜色渐变的效果，...

微信小程序 2018/1/5 0:00:00