Skip to main content

小程序音乐播放器开发

一. 项目的搭建​

1.1. 创建一个新项目​

1.2. 创建项目目录结构​

1.3. 搭建tabBar页面​

二. 视频页面​

2.1. 请求基本数据和展示​

  • 网络请求进行分层结构
  • Promise -> await/async

2.2. 上拉加载更多功能​

  • 监听滚到到底部
  • 加载更多的数据
    • offset
    • [...this.data.videoList, ...res.data]
    • hasMore

2.3. 下拉刷新的功能​

  • 开启下拉刷新
  • 监听下拉刷新
  • 重置变量
    • offset = 0
    • videoList = []
    • hasMore = true
  • 请求结束后, 结束下拉刷新

三. 视频详情​

3.1. 点击Item跳转到详情​

  • video-item组件的监听点击
    • data-
  • video-item组件的内部监听
    • this.properties.itemData

3.2. 获取播放地址Video​

  • 获取播放地址
  • 使用video组件播放

3.3. 获取详情的其他数据​

  • MV详情
  • MV关联推荐视频

3.4. 滚动的页面展示​

  • page滚动
  • scroll-view滚动

四. 音乐页面​

4.1. 搜索框的展示​

  • 安装vant

    • npm install @vant/weapp
    • 构建npm

  • 演练vant的使用

  • 搭建搜索框

    • 设置属性
    • 监听点击, 跳转搜索页面

  • 重要: 覆盖vant样式

    • CSS属性
    • CSS变量

4.2. 轮播图的展示​

4.2.1. 请求轮播数据和基本展示​

4.2.2. 轮播图的基本样式调整​

  • 页面的内边距
  • 轮播图的圆角

4.2.3. 轮播图的动态计算​

  • 根据加载出来的图片, 计算轮播图的高度
  • querySelect
  • 对方法调用进行节流操作

4.3. area-header的封装​

一. 推荐歌曲​

1.1. 音乐页面请求数据和展示数据​

1.2. hy-event-store数据共享​

1.3. 推荐数据Store的共享数据​

二. 歌单展示​

2.1. 获取歌单, 展示歌单​

2.2. 滚动的样式调整​

  • width: 100% -> screenWidth -> app.globalData
  • scroll-view -> flex -> margin-right
    • dib -> display: inline-block

2.3. 封装menu-area组件​

2.4. 点击更多展示歌单页面​

  • Promise.all

1660382822342

三. 巅峰榜​

3.1. 在rankingStore请求和保存数据​

3.2. 在music页面中获取Store中数据​

3.3. 封装组件进行展示数据​

四. 歌单详情​

4.1. 排行榜数据的共享和展示​

4.2. 推荐歌曲的共享和展示​

4.3. 歌单详情的id-请求数据-展示数据​

4.4. 歌单的header的封装和展示​

1660382989572

五. 音乐页面的优化​

  • 如果没有数据, 那么先不展示对应的区域
    • wx:if的判断

一. 播放页布局​

1.0. 点击Item跳转​

1.1. 背景毛玻璃​

  • image -> 背景
  • view -> blur毛玻璃

1.2. 自定义导航栏(掌握)​

1.3. 导航栏标题和页面左右滚动​

  • Swiper/Swiper-Item 轮播图
  • 标题的点击 -> 轮播图的切换

1.4. 歌曲页面的布局​

  • album
  • info
  • lyric
  • progress
  • controls

二. 歌曲进度的控制​

2.1. 歌曲播放​

  • audioContext = wx.createInnerAudioContext()
  • src属性
  • autoplay

2.2. onTimeUpdate​

  • 改变当前的时间和sliderValue

2.3. 监听slider的点击​

  • bindchange
    • value
    • 计算currentTime
    • seek(currentTime)
    • setData({currentTime, value})

2.4. 监听slider的滑动​

  • bindchanging
    • value
    • currentTime
    • isSliderChanging

2.5. seek(time) bug处理​

  • throttle: 节流控制
    • leading: false
    • trailing: false
  • isWaiting: true

2.6. 播放和暂停功能​

三. 歌词的展示​

3.1. 请求和解析歌词​

  • 正则表达式

3.2. time匹配歌词​

  • 循环所有的歌词, 找到第一个比当前时间大的一句歌词

    • i - 1

  • index: length - 1

  • currentLyricText

  • currentLyricIndex

    • 性能优化 index === currentLyricIndex return

3.3. 歌词的文字匹配思路​

3.4. 全部歌词的展示​

一. 播放页功能​

1.1. 歌词分页展示​

  • 上下有间距
    • padding
  • 根据当前的歌词进行滚动
    • lyricIndex * 35
  • 选中某一句歌词
    • index === lyricIndex ? 'active'

1.2. 歌曲列表数据​

  • playerStore
    • playSongList
    • playSongIndex

1.3. 上一首/下一首​

  • index + 1 / -1
  • 判断边界
  • 获取当前歌曲
  • 记录最新的索引

1.4. 播放模块的切换​

  • 0: 顺序播放
  • 1: 单曲循环
  • 2: 随机播放

二. Store代码重构(选做)​

2.1. 播放歌曲的代码重构​

  • setupPlayMusic()
  • playMusicWidthSongIdAction

2.2. 播放和暂停的功能​

2.3. 播放模式的切换​

2.4. 播放新歌曲的抽取​

三. 首页的play-bar​

3.1. 界面搭建​

3.2. 交互的操作​

3.3. 动画的展示​

四. 项目打包和发布​

4.1. 分包处理​

4.2. 包的大小优化​

  • vant

4.3. 项目发布​

  • 成员管理
  • 版本管理