分层架构

1.把网络请求抽取到services文件夹中:
封装成类，取实例对象

2.把向mv的网络请求封装到video.js里：
在调用时即可自定义 offset limit

3.抽取展示视频组件 在js文件里面，properties存放itemData接收页面传来的数据

(wxss背景图片不可以使用本地)

上拉加载更多，下拉刷新功能

跳转视频详情页

• 监听整个组件
• 监听组件根元素

内容滚动

调用scroll-view,要有固定高度 page { height: 100vh; }

轮播图

无限循环

页面内边距

直接在page里面设置

封装一个工具（获取轮播图的元素长度高度）

加入节流

export default function querySelect(selector) {
  return new Promise(resolve => {
    const query = wx.createSelectorQuery()
    query.select(selector).boundingClientRect()
    query.exec((res) => {
      resolve(res)
    })
  })
}

音乐首页

• 复用组件
• 增加网络请求

小程序中的数据共享

使用

npm install hy-event-store

重构主页推荐歌曲请求

 // this.fetchRecommendSongs()
    //发起action
    recommendStore.onState("recommendSongs",(value)=>{
      this.setData({ recommendSongs:value })
    })
    recommendStore.dispatch("fetchRecommendSongsAction")

推荐歌曲数据共享

import { HYEventStore } from "hy-event-store"
import { getPlayListDetail } from "../services/music"

const recommendStore = new HYEventStore({
  state: {
    recommendSongs: []
  },
  actions: {
    fetchRecommendSongsAction(ctx) {
      getPlayListDetail(3778678).then(res => {
        ctx.recommendSongs = res.playlist.tracks
      })
    }
  }
})

export default recommendStore

热门歌单滚动细节

抽取获取屏幕宽高的方法

App({
  globalData: {
    screenWidth: 375,
    screenHeight: 667
  },
  onLaunch() {
    // 1.获取设备的信息
    wx.getSystemInfo({
      success: (res) => {
        this.globalData.screenWidth = res.screenWidth
        this.globalData.screenHeight = res.screenHeight
      },
    })
  }
})

所有的歌单数据请求和展示

（for循环获取需要循环十次，低效）

// 发送网络请求
async fetchAllMenuList(){
  const tagRes = await getSongMenuTag()
  const tags = tagRes.tags
  //2。根据tags去获取对应的歌单
  const allPromises=[]
  for(const tag of tags){
   const promise=getSongMenuList(tag.name)
   allPromises.push(promise)
  }
  //3.获取到所有的数据之后，调用一次setData
  Promise.all(allPromises).then(res=>{
    this.setData({ songMenus: res })
  })
}

巅峰榜构建

共享巅峰榜数据

存入rankingStore中

import { HYEventStore } from "hy-event-store"
import { getPlaylistDetail } from "../services/music"

export const rankingsMap = {
  newRanking: 3779629,
  originRanking: 2884035,
  upRanking: 19723756
}
const rankingStore = new HYEventStore({
  state: {
    newRanking: {},
    originRanking: {},
    upRanking: {}
  },
  actions: {
    fetchRankingDataAction(ctx) {
      for (const key in rankingsMap) {
        const id = rankingsMap[key]
        getPlaylistDetail(id).then(res => {
          ctx[key] = res.playlist
        })
      }
    }
  }
})

export default rankingStore