找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序音乐播放器源码

[复制链接]
查看: 713|回复: 55
最佳答案
0 

3

主题

3

帖子

90

积分

新人求带

积分
90
 楼主| 发表于 2019-10-15 11:13:06 | 显示全部楼层 |阅读模式
代码规范
参考Airbnb/javascript

  • 代码不写分号
  • 采用let/const定义变量
  • 采用箭头函数控制this指向
  • 函数定义采用简写方式,如下示例

functionName(){
  // ...
}
  • 所有简写的对象属性放在非简写的对象属性上面
  • 即使最后一个属性或方法也加逗号,
  • 如下示例

const name = 'lpj'
{
  name,
  age: 20,
}
组件化开发
组件的设计原则

  • 高内聚
  • 低耦合
  • 单一职责
  • 避免过多参数

参考: https://baike.baidu.com/item/%E9 ... A6%E5%90%88/5227009

本项目自定义的组件
  • 歌单组件
  • 歌曲组件
  • 歌曲进度条组件
  • 歌词组件
  • 搜索组件
  • 登录按钮组件
  • 底部弹出层组件
  • 博客卡片组件
  • 博客控制组件(评论、分享)

云函数
getPlaylist

从第三方获取歌单数据并将最新数据插入到云数据库中(config.json配置定时触发器)
music
音乐相关

项目知识点以及BUG处理
tips: 小程序的背景图片不允许使用网络图片,但是允许使用本地图片和base64格式的图片

tips: 项目中常用的对于组件配合ArrayData循环渲染的方式有两种

将ArrayData从pages传递到components,components中对数据进行循环处理
参考pages/musiclist/musiclist
将数据直接在pages中进行循环处理
参考pages/playlist/playlist
BUG && Handler
  1. // 数据监听器
  2. observers: {
  3.   ['playlist.playCount'](playCount) {
  4.     this.setData({
  5.       // 以下写法会造成该处理函数的自调用式死循环
  6.       ['playlist.playCount']: this._tranNumber(playCount, 2)
  7.     })
  8.   }
  9. },
复制代码
  1. data: {
  2.   _count: 0,// 页面中直接使用该值
  3. },
  4. observers: {
  5.   ['playlist.playCount'](playCount) {
  6.     this.setData({
  7.       _count: this._tranNumber(playCount, 2)
  8.     })
  9.   }
  10. },
复制代码
自定义wx:for的默认index和item
  1. <block wx:for="{{arr}}" wx:for-index="idx" wx:for-item="data">{{idx}}:{{data}}</block>
复制代码

详解wx:key的作用代码参见pages/demo/demo

采用如下方法解决大多数手机机型在播放器页面获取当前播放的音乐的总时长的问题
  1. _setTime(){
  2.   console.log(backgroundAudioManager.duration)
  3. },
  4. backgroundAudioManager.onCanplay(() => {
  5.   if (typeof backgroundAudioManager.duration !== 'undefined') {
  6.     this._setTime()
  7.   } else {
  8.     setTimeout(()=>{
  9.       this._setTime()
  10.     }, 1000)
  11.   }
  12. })
复制代码
进度条往回拖拽然后松手的时刻,和backgroundAudioManager.onTimeUpdate二者的setData({})会产生冲突,造成进度条回闪的BUG,加锁(标志位isMoving)解决
  1. 对应代码components/progress-bar/progress-bar,搜索timeupdateFlag
复制代码

由于在用户拖拽进度条松手的一刹那仍然有一定的几率触发onChange,造成isMoving为true,进而导致无法执行onTimeUpdate内部代码,从控制台输出情况观察进度条组件的生命周期函数触发顺序,发现进度条不被拖动的时候都会触发onPlay钩子函数,为解决该BUG增加如下代码
  1. onPlay(){
  2.   isMoving = false
  3. }
复制代码

在仍在播放歌词的阶段拖拽进度条至歌曲尾声片段,就无法进入如下的高亮显示歌词并滚动歌词的逻辑,歌词的高亮和滚动状态就不会更新了,显示在页面上就是歌词卡在当前位置的效果
  1. if (currentTime <= lrcList[i].time) {
  2.   this.setData({
  3.     nowPlayingLrcIndex: i - 1,
  4.     scrollTop: (i - 1) * lyricHeight
  5.   })
  6.   break
  7. }
复制代码

添加如下判断代码解决BUG
  1. if (currentTime > lrcList[lrcList.length - 1].time) {
  2.   if (nowPlayingLrcIndex !== -1) {
  3.     this.setData({
  4.       nowPlayingLrcIndex: -1,
  5.       scrollTop: lrcList.length * lyricHeight
  6.     })
  7.   }
  8. }
复制代码
在用正则表达式匹配解析歌词的时候,有的时候获取到的歌词的时间格式不确定,如果没有匹配到歌词,就很可能是出现了新的格式的歌词时间

从播放器页面返回到歌曲列表页面并点击当前正在播放的歌曲时应该继续当前的播放进度,而不应该重新播放
  1. data:{
  2.   isSame // 表示是否为同一首歌
  3. }
  4. if (musicId === app.getPlayingMusicId()) {
  5.   this.setData({
  6.     isSame: true
  7.   })
  8. } else {
  9.   this.setData({
  10.     isSame: false
  11.   })
  12. }
复制代码
然后利用data.isSame来判断是否更新歌曲播放源
vip专享歌曲普通用户无权限播放的处理
  1. if (musicUrl == null) {
  2.   wx.showToast({
  3.     title: '当前无权限播放该歌曲,请尝试登录vip账号或购买该歌曲后再试',
  4.   })
  5. } else {
  6.   ...
  7. }
复制代码
components中的组件无法使用miniprogram文件夹根目录下的样式文件(iconfont.wxss)

三种方式解决该问题
通过在pages的页面中给组件传递样式,组件配置externalClasses:Array接收外部样式类来解决( 注意,组件对外部传入样式只可读,不可修改外部传入样式 )
组件目录下配置iconfont.wxss文件,内部写入样式,组件的样式表import该inconfont.wxss文件
通过在组件的js文件中配置如下代码使页面 wxss 样式影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面
  1. options: {
  2.   styleIsolation: 'apply-shared'
  3. }
复制代码

组件启用多插槽需配置
  1. options: {
  2.   multipleSlots: true
  3. }
复制代码

点击授权按钮通过button的开放能力来获取用户的基本信息
  1. <button open-type="getUserInfo" bindgetuserinfo="自定义回调函数"></button>
复制代码



wechat-music-master.zip (67.05 KB, 下载次数: 59)
回复

使用道具 举报

最佳答案
0 

0

主题

1895

帖子

1755

积分

专家路上

积分
1755
发表于 2019-10-17 16:49:20 | 显示全部楼层
微信小程序
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

10

帖子

100

积分

等待验证会员

积分
100
发表于 2019-11-12 13:59:34 | 显示全部楼层
谢谢大佬,感激不尽
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

56

帖子

60

积分

等待验证会员

积分
60
发表于 2019-11-16 08:49:01 | 显示全部楼层
感谢楼主的无私奉献
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

56

帖子

60

积分

等待验证会员

积分
60
发表于 2019-11-16 09:04:33 | 显示全部楼层
感谢楼主的无私奉献
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

64

帖子

64

积分

等待验证会员

积分
64
发表于 2019-11-20 10:22:33 | 显示全部楼层
好好好@@@@@@@@@
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

64

帖子

64

积分

等待验证会员

积分
64
发表于 2019-11-20 10:22:43 | 显示全部楼层
好好好@@@@@@@@@
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

64

帖子

64

积分

等待验证会员

积分
64
发表于 2019-11-20 10:22:51 | 显示全部楼层
好好好@@@@@@@@@
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

64

帖子

64

积分

等待验证会员

积分
64
发表于 2019-11-20 10:22:56 | 显示全部楼层
好好好@@@@@@@@@
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

64

帖子

64

积分

等待验证会员

积分
64
发表于 2019-11-20 10:23:02 | 显示全部楼层
好好好@@@@@@@@@
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com