微信小程序音樂播放器,音樂播放器小程序制作步驟（列表頁數據）
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音樂巔峰榜·歐美根據用戶收聽行為自動生成，集結當下最流行的歐美新歌!<br><br>更新時間：每周四22點<br>統計周期：一周(上周四至本周三)<br>統計對象：三個月內發行的歐美歌曲<br>統計數量：100首<br>統計算法：根據歌曲在一周內的有效播放次數，由高到低取前100名(同一歌手最多允許5首歌曲同時上榜)<br>有效播放次數：登錄用戶完整播放一首歌曲，記為一次有效播放;同一用戶收聽同一首歌曲，每天記錄為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完成了文字部分與右邊的播放按鈕，又在這部分之后加載了圖片，這樣大體的布局就完成了。但是這樣做會產生一個問題：我們設置文字為白色，如果加載的圖片也為白色背景，那么文字就會變的很難看清了。
上一節：微信小程序小白項目開發案例之音樂播放器——列表頁
下一節：微信小程序小白項目開發案例之音樂播放器——頁面渲染
第二部分：如何開通一個小商店
您可能感興趣: 小程序制作
掃碼免費領取運營資料包
