05. page

Posted 2022-11-28 Composition55555

文章目录

• • 记第一个小程序DEMO
  • • 01. 歌单详情
    • 02. 页面Page
    • • （1）基本参数
      • （2）生命周期函数
      • （3）页面操作
      • （4）右上角功能
    • 03. 应用
    • • （1）参数接收
      • （2）下拉刷新
      • （3）上拉触底

---

写在前面

• 本文写了很多官网的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