写在前面
- 本文写了很多官网的API的相关知识点,可略过直接到官网查看
记第一个小程序DEMO
- 名称:仿网易云音乐小程序
- 接口:网易云音乐NodeJS版 API
- 内容:主要实现轮播图、歌单推荐、排行榜、歌单显示、歌曲播放、歌词显示这几部分功能,其它暂未作考虑
-
本文主要内容:实现首页歌单详情页
(
请忽略样式、布局)
歌单详情部分没有新的标签,所以这里滤过布局部分,直接处理请求部分
歌曲点击后,还需要进入歌曲播放界面
01. 歌单详情
(可略过代码部分)
-
请求
注:
- 这里的处理是:需要什么数据,就取出什么数据
- 在处理歌单更新时间时,新定义了一个方法来处理
- 在处理歌曲作者时,因为涉及到多个作者,所以这里对其进行了拼接
// 根据id获取排行榜详情 async getRankDetail(id) { let res = await request('/playlist/detail', { id: id }) let rankList = [] if (res.code == 200) { // 歌单基本信息 let { coverImgUrl, description, name, playCount, updateTime, creator } = res.playlist let { avatarUrl, nickname } = creator updateTime = this.handleTime(updateTime) // 赋值操作 this.setData({ playlist: { pic: coverImgUrl, des: description, name: name, playCount: playCount, avatar: avatarUrl, nickName: nickname, // updateTime: `${month}月${day}日更新`, updateTime, }, }) // 设置页面标题 wx.setNavigationBarTitle({ title: name, }) // 获取排行榜歌曲 let { tracks } = res.playlist // 暂存数据 let tracksArr = [] // 从歌曲中取出我们想要的数据 if (tracks) { // 遍历 tracks.forEach(element => { // 歌曲作者,可以有多个,需要拼接 let authorArr = [] if (element.ar) { for (let item of element.ar) { authorArr.push(item.name) } } let musicAuthor = authorArr.join('/') // 歌曲名+歌曲id let musicName = element.name let musicId = element.id // 歌曲别名 let musicAlias = element.alia[0] || null // 将歌曲数据存入歌曲数组中 tracksArr.push({ musicName, musicId, musicAlias, musicAuthor, }) }) } // 赋值操作 this.setData({ tracks: tracksArr, }) } }, // 处理时间 handleTime(time) { let date = new Date(time) let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() return `${year}年${month}月${day}日` }, // 歌曲点击事件 musicTap(val) { let id = val.currentTarget.dataset.music.musicId wx.navigateTo({ url: '/pages/music/music?id=' + id, success: () => { console.log('成功传入') }, fail: () => { console.log('路由失败') }, }) },
然后,这里详细介绍一下,页面参数
02. 页面Page
详见官网Page
(1)基本参数
data
:页面初始数据,类似Vue组件中的data- 但不同的是,小程序的data就是一个对象
(2)生命周期函数
onLoad
:页面加载时,触发这个函数onShow
:页面显示时,触发这个函数onReady
:页面初次渲染完成时,触发这个函数- 表示页面已准备妥当,可以进行交互了
onHide
:页面隐藏时,触发这个函数- 通过
wx.navigateTo
切换到其它页面
- 通过
onUnload
:页面卸载时,触发这个函数- 通过
wx.redirectTo
和wx.navigateBack
到其它页面
- 通过
- 触发顺序:
onLoad
、onShow
、onReady
(3)页面操作
onPullDownRefresh
:下拉刷新操作onReachBottom
:上拉触底操作onPageScroll
:页面滚动触发事件onResize
:页面尺寸改变触发事件onTabItemTap
:在tab页面点击tab时触发事件
(4)右上角功能
onShareAppMessage
:转发onShareTimeline
:转发到朋友圈onAddToFavorites
:收藏
在这个页面中,我们需要接收页面传参,还添加了下拉刷新和触底触底加载更多操作(
并没有实现,只是简单添加了一个刷新事件)
03. 应用
(1)参数接收
-
这里,我们需要接收上一个页面传递过来的参数,需要在
onLoad()
中进行处理 -
onLoad(options)
接收一个options
参数,这个参数对象包含了所有页面路径中的参数page({ onLoad(options){ console.log(options) } })
(2)下拉刷新
- 使用下拉刷新,需要现在JSON配置文件中进行配置——
"enablePullDownRefresh": true,
- 在全局配置,需要在
”window"
字段中添加 - 在局部配置,可以直接添加
- 在全局配置,需要在
- 处理完数据刷新后,需要使用
wx.stopPullDownRefresh()
以停止当前页面的下拉刷新 - 另外,也可以使用
wx.startPullDownRefresh()
函数主动触发下拉刷新
(3)上拉触底
- 使用上拉触底,需要配置触发距离——
"onReachBottomDistance": 10
- 位置同下拉刷新
- 值为
number