【小程序】013 自定义歌曲列表组件

相关内容思维导图：

如果图片被压缩，请点击歌曲列表组件musiclist

前面，我们完成了歌单列表的显示。

现在，我们通过自定义歌曲列表组件实现点击歌单列表时显示对应歌单详情列表信息。

1、绑定相关事件

点击相关歌曲时其实是点击了组件playlist，点击事件绑定goToMusicList函数进行跳转页面

// components/playlist/playlist.wxml

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

跳转到新建的页面（以相对路径方式）

需要指定跳转哪个歌单，我们歌单有唯一标识specialId（根据小伙伴自己后端接口设置的标识而定）

通过?playlistId=${ this.properties.playlist.specialId }`的方式传入歌曲参数playlistId

${ this.properties.playlist.specialId }与${ this.data.playlist.specialId }都可行，在组件底层中data与properties对象合并在一起了

通过es6的模板字符串的方式将变量${ }拼接入字符串，注意是反引号``包裹字符串（在键盘按键Ecs下方）

goToMusicList() { // 跳转链接 并传入参数，在目标页面中的 onLoad 方法的 options 参数接收传入的参数 wx.navigateTo({ url: `../../pages/musiclist/musiclist?playlistId=${ this.properties.playlist.specialId }` }); },

在目标页面pages/musiclist/musiclist.js中的 onLoad 方法的 options 参数接收传入的参数playlistId，并根据该参数指向的歌单信息渲染歌曲列表

3、在中pages/musiclist/musiclist.js的onLoad 方法使用云函数

使用云函数music，且传递playlistId参数，设置路由musiclist

4、云函数music中路由musiclist需要向服务端发送请求

故而需要安装request-promise

安装命令

npm install --save request

npm install --save request-promise

安装成功

引入request-promise

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

定义访问URL

const BASE_URL = '访问的服务器'

根据歌单 specialId 获取歌曲列表

app.router('musiclist', async (ctx, next) => { // 向服务器发送请求 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)

向服务器发送请求是异步操作

JSON.parse(res))将字符串转换成对象

赋值给ctx.body事实上将playlistId指向的歌曲列表数据返回给了小程序，并以res获取相关对象

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

设置数组存放指定获取的歌单内容

data: { musiclist: [], // 歌单对应的歌曲集合 coverImgInfo: {} // 歌单封面信息 },

6、补完miniprogram/pages/musiclist/musiclist.js调用云函数的定义

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是歌单对应的歌曲集合

res.result.playlist.coverImgUrl是歌单封面图片地址

res.result.playlist.name是歌单对应的名字

7、在miniprogram\pages\musiclist\musiclist.wxml中写好歌单封面标签

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

循环遍历传入的musiclist数组显示歌曲列表

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

musiclist-index用来显示序号且从1开始，故而{{ index + 1 }}

music-alia中判断是否有别名，通过判断别名的长度是否为0进行显示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是防止文字过长超过父标签剩余空间（溢出）从而破坏弹性布局

JavaScript JSON 小程序

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。