【小程序】013 自定義歌曲列表組件

相關(guān)內(nèi)容思維導(dǎo)圖：

如果圖片被壓縮，請點(diǎn)擊歌曲列表組件musiclist

前面，我們完成了歌單列表的顯示。

現(xiàn)在，我們通過自定義歌曲列表組件實(shí)現(xiàn)點(diǎn)擊歌單列表時顯示對應(yīng)歌單詳情列表信息。

1、綁定相關(guān)事件

點(diǎn)擊相關(guān)歌曲時其實(shí)是點(diǎn)擊了組件playlist，點(diǎn)擊事件綁定goToMusicList函數(shù)進(jìn)行跳轉(zhuǎn)頁面

// components/playlist/playlist.wxml

2、組件playlist.js下method：{}中定義goToMusicList方法

跳轉(zhuǎn)到新建的頁面（以相對路徑方式）

需要指定跳轉(zhuǎn)哪個歌單，我們歌單有唯一標(biāo)識specialId（根據(jù)小伙伴自己后端接口設(shè)置的標(biāo)識而定）

通過?playlistId=${ this.properties.playlist.specialId }`的方式傳入歌曲參數(shù)playlistId

${ this.properties.playlist.specialId }與${ this.data.playlist.specialId }都可行，在組件底層中data與properties對象合并在一起了

通過es6的模板字符串的方式將變量${ }拼接入字符串，注意是反引號``包裹字符串（在鍵盤按鍵Ecs下方）

goToMusicList() { // 跳轉(zhuǎn)鏈接 并傳入?yún)?shù)，在目標(biāo)頁面中的 onLoad 方法的 options 參數(shù)接收傳入的參數(shù) wx.navigateTo({ url: `../../pages/musiclist/musiclist?playlistId=${ this.properties.playlist.specialId }` }); },

在目標(biāo)頁面pages/musiclist/musiclist.js中的 onLoad 方法的 options 參數(shù)接收傳入的參數(shù)playlistId，并根據(jù)該參數(shù)指向的歌單信息渲染歌曲列表

3、在中pages/musiclist/musiclist.js的onLoad 方法使用云函數(shù)

使用云函數(shù)music，且傳遞playlistId參數(shù)，設(shè)置路由musiclist

4、云函數(shù)music中路由musiclist需要向服務(wù)端發(fā)送請求

故而需要安裝request-promise

安裝命令

npm install --save request

npm install --save request-promise

安裝成功

引入request-promise

const rp = require('request-promise');

定義訪問URL

const BASE_URL = '訪問的服務(wù)器'

根據(jù)歌單 specialId 獲取歌曲列表

app.router('musiclist', async (ctx, next) => { // 向服務(wù)器發(fā)送請求 ctx.body = await rp(`${ BASE_URL }/playlist/detail?id=${ parseInt(event.playlistId) }`) .then(res => JSON.parse(res)); });

若不想使用es6反引號：BASE_URL + “/playlist/detail?id=”+ parseInt(event.playlistId)

向服務(wù)器發(fā)送請求是異步操作

JSON.parse(res))將字符串轉(zhuǎn)換成對象

賦值給ctx.body事實(shí)上將playlistId指向的歌曲列表數(shù)據(jù)返回給了小程序，并以res獲取相關(guān)對象

5、小程序端頁面miniprogram/pages/musiclist/musiclist.js

設(shè)置數(shù)組存放指定獲取的歌單內(nèi)容

data: { musiclist: [], // 歌單對應(yīng)的歌曲集合 coverImgInfo: {} // 歌單封面信息 },

6、補(bǔ)完miniprogram/pages/musiclist/musiclist.js調(diào)用云函數(shù)的定義

wx.cloud.callFunction({ name: 'music', data: { $url: 'musiclist', playlistId: options.playlistId } }).then(res => { const pl = res.result.playlist; this.setData({ musiclist: pl.tracks, coverImgInfo: { coverImgUrl: pl.coverImgUrl, coverImgName: pl.name } })

res.result.playlist.tracks是歌單對應(yīng)的歌曲集合

res.result.playlist.coverImgUrl是歌單封面圖片地址

res.result.playlist.name是歌單對應(yīng)的名字

7、在miniprogram\pages\musiclist\musiclist.wxml中寫好歌單封面標(biāo)簽

{{ index + 1 }} {{ item.name }} {{ item.alia.length == 0 ? '' : item.alia[0] }} {{ item.ar[0].name }} - {{ item.al.name }}

循環(huán)遍歷傳入的musiclist數(shù)組顯示歌曲列表

musiclist-container采用flex彈性盒子布局

musiclist-index用來顯示序號且從1開始，故而{{ index + 1 }}

music-alia中判斷是否有別名，通過判斷別名的長度是否為0進(jìn)行顯示item.alia.length == 0

/* components/musiclist/musiclist.wxss */

.musiclist-container { display: flex; padding: 14rpx 20rpx; align-items: center; border-bottom: 1rpx solid #eee; } .musiclist-index { font-size: 34rpx; width: 80rpx; } .musiclist-info { flex-grow: 1; width: 0; } .music-name, .musiclist-singer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .musiclist-name { font-size: 30rpx; } .musiclist-alia { font-size: 28rpx; } .musiclist-singer { font-size: 24rpx; } .playing view, .playing text { font-family: Arial, Helvetica, sans-serif; color: #d81e06; }

.musiclist-info { flex-grow: 1; width: 0; }中width: 0是防止文字過長超過父標(biāo)簽剩余空間（溢出）從而破壞彈性布局

JavaScript JSON 小程序

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。