微信小程序音樂播放器,音樂播放器小程序制作步驟（列表頁數(shù)據(jù)）

2018-01-05

導(dǎo)讀：我們先來完成點擊排行里的項目所跳轉(zhuǎn)的排行列表。...

　　獲取列表頁數(shù)據(jù)

　　我們先來完成點擊排行里的項目所跳轉(zhuǎn)的排行列表。

　　首先我們還是先編寫一下網(wǎng)絡(luò)請求的函數(shù)。

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
}

復(fù)制代碼

　　返回的JSON格式數(shù)據(jù)為：

{
"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音樂巔峰榜·歐美專輯根據(jù)用戶收聽行為自動生成，集結(jié)當(dāng)下最流行的歐美新碟!:更新時間：每周五|統(tǒng)計周期：一周(上周五至本周四)|統(tǒng)計對象：一年內(nèi)發(fā)行的歐美專輯|排名數(shù)量：100張|統(tǒng)計算法：根據(jù)專輯內(nèi)所有歌曲在一周內(nèi)的有效播放次數(shù)總和，由高到低取前100名|有效播放次數(shù)：登錄用戶完整播放一首歌曲，記為一次有效播放;同一用戶收聽同一首歌曲，每天最多記錄20次有效播放",
"headPic_v12": "http://y.gtimg.cn/music/common//upload/iphone_order_channel/20160224140905.jpg",
"info": "QQ音樂巔峰榜·歐美根據(jù)用戶收聽行為自動生成，集結(jié)當(dāng)下最流行的歐美新歌! 更新時間：每周四22點 統(tǒng)計周期：一周(上周四至本周三) 統(tǒng)計對象：三個月內(nèi)發(fā)行的歐美歌曲 統(tǒng)計數(shù)量：100首 統(tǒng)計算法：根據(jù)歌曲在一周內(nèi)的有效播放次數(shù)，由高到低取前100名(同一歌手最多允許5首歌曲同時上榜) 有效播放次數(shù)：登錄用戶完整播放一首歌曲，記為一次有效播放;同一用戶收聽同一首歌曲，每天記錄為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"
}

復(fù)制代碼

　　請求網(wǎng)絡(luò)時用到的參數(shù)ID是我們在排行頁面點擊的item的id，在上一節(jié)了我們已經(jīng)通過點擊事件將它保存在全局變量里了。

　　在編寫布局文件之前我們先來看一下我們最后完成后的樣子，如圖

　　微信小程序音樂播放器,音樂播放器小程序制作步驟（列表頁數(shù)據(jù)）

　　可以看到這個頁面主要由兩部分組成，上半部分為榜單的圖片以及名字等信息，下半部分是歌曲列表。

　　我們先從歌曲列表開始，列表的每一項由序號，歌曲名稱，演唱者(多名演唱者以“|”分隔)以及專輯名稱組成，所以我們的布局文件為：

<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>

復(fù)制代碼

　　格式文件為：

.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;
}

復(fù)制代碼

　　這部分應(yīng)該比較熟悉了，需要注意的就是多個歌手的書寫形式，除了第一個歌手外，其他都在前面加上“|”就是我們要的形式了。

　　接下來我們完成上半部分，這部分的布局代碼很簡單：

<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>

復(fù)制代碼

　　我們在tl-top-info-inner完成了文字部分與右邊的播放按鈕，又在這部分之后加載了圖片，這樣大體的布局就完成了。但是這樣做會產(chǎn)生一個問題：我們設(shè)置文字為白色，如果加載的圖片也為白色背景，那么文字就會變的很難看清了。

　　上一節(jié)：微信小程序小白項目開發(fā)案例之音樂播放器——列表頁

　　下一節(jié)：微信小程序小白項目開發(fā)案例之音樂播放器——頁面渲染

第二部分：如何開通一個小商店