主要问题汇总

Posted 2021-06-12 星辰大海组

日期	实现哪种功能	运用的新知识点	问题难点	解决办法	使用到的API
2021/5/12	窗口配置、轮播图的实现	swiper参数的使用/iconfont字体图标的使用	如何直接引用iconfont网站中的图标	将iconfont选中的图标统一加到项目中，由于提供的是css文件小程序识别不了，复制连接在url中打开，将源码复制到文件wxss中即可直接调用。并在全局app.wxss中import声明。
2021/5/14	服务器的搭建/接口的调用	用服务器去调用相应的接口	服务器的使用	首先要下载node.js然后在服务器文件夹中cmd，然后安装node，再启动服务器。

日期	实现哪种功能	运用的新知识点	问题难点	解决办法	使用到的API
2021/5/25	（歌曲播放篇开始）把当前歌曲id传给歌曲详情页	路由跳转传参，query参数	如何把当前音乐id从歌曲推荐页传给歌曲详情页	封装一个点击事件函数，里面使用路由跳转的形式，把id传给歌曲详情页，（url: \'/pages/songDetail/songDetail?musicId=\' + song.id,）onload函数的option参数，是专门用于接收路由跳转的参数的，所以songDetail页面是能接收到id的，再把musicId动态更新到data中，然后songDetail页根据id值查找详情信息显示到页面上。
2021/5/26	音乐播放暂停功能	定义一个isPlay标识，判定音乐是否在播放，初始值为false，音乐播放为true。	封装音乐播放暂停功能函数	绑定一个点击事件，里面调用musicControl()功能函数。封装控制播放暂停的功能函数musicControl(isPlay, musicId,musicLink)，首先判断isPlay的值，为true，音乐播放，onload中创建BackgroundAudioManager实例，填写src、title属性，如果false，调用pause()方法。	BackgroundAudioManager.pause()
2021/5/27	解决系统任务栏控制音乐播放状态显示不一致的问题	创建BackgroundAudioManager实例，调用播放暂停停止方法，onPlay（），onPause（），onStop（）方法	如果用户操作系统任务栏控制音乐暂停/播放按钮，页面不知道，导致页面显示是否播放的状态和真实的音乐播放状态不一致	通过创建控制全局背景音频的实例去监视音乐播放、暂停和停止的功能	BackgroundAudioManager：全局唯一的背景音频管理器。
2021/5/28	getApp解决页面销毁音乐播放状态问题	定义全局变量和全局变量的引用	如何解决页面销毁音乐播放状态的问题	定义全局变量globalData，传入两个参数isMusicPlay、musicId，如果当前页面音乐是在播放（isMusicPlay：true），并且全局musicId和当前musicId一致，修改当前页面播放状态为true。获取全局musicId可以去监听事件onPlay（）函数中拿，然后（isMusicPlay：true），onPause()、onStop()里面把(isMusicPlay：false）。
2021/5/29	页面通信完整实现（实现切歌的功能）	实现两个页面之间的通信，npm install pubsub-js，订阅方: PubSub.subscribe(事件名，事件的回调)，是接收数据的一方；发布方: PubSub.publish(事件名，提供的数据)，是提供数据的一方	实现两个页面间的通信	歌曲详情页点击上一首pre，下一首next的图标，需要传递标识给推荐歌单页，推荐歌单页先判定类型，然后如果是next，则当前index+1，如果是pre，则index-1，有了index的值，我们就能找到当前音乐的musicId，然后回传给歌曲详情页。歌曲详情页接收musicId值，调用音乐详情功能函数，控制当前音乐自动播放，然后取消订阅这次musicId。
2021/5/30	进度条动态实现	监听音乐实时播放的进度	显示实时进度条；将ms显示成分钟：秒	首先用BackgroundAudioManager.onTimeUpdate()方法监听背景音频播放进度更新，音乐实时播放的时间currentTime从this.backgroundAudioManager.currentTime里面取，这里单位是s，需要转为ms，npm install moment,然后调用moment().format(\'mm:ss\')，格式化为分钟：秒的形式。总时长durationTime从封装的音乐详情功能函数中取，放到data中。currentTime/durationTime=当前正在播放进度条的宽度/进度条总宽度，所以我们要动态显示的进度条宽度 = currentTime/durationTime * 进度条总宽度。动态更新到data中，供wxml页面使用。	BackgroundAudioManager.onTimeUpdate(function callback)
2021/5/31	音乐播放结束自动切换到下一首（歌曲播放篇完结）	监听背景音频自然播放结束	监听背景音频自然播放结束，自动切换为下一首，并且自动播放	这里需要使用BackgroundAudioManager.onEnded（）方法监听音乐是否播放结束，里面只需要发布一个next消息给歌曲推荐页即可，然后再写一个订阅musicId事件，获取音乐详情，自动播放。最后把实时进度条的宽度设置为0，歌曲开始播放时间为00：00。	BackgroundAudioManager.onEnded(function callback)