音频小程序开发总结

最近一年来也玩过几个小程序，都是些比较简单的demo。直到前段时间，由于公司业务需要，着手开发了一套播放音频的微信小程序，发现这里面的坑还真不少。下面就简要总结一下：

小程序存在问题

1. 手机端redirectTo跳转页面会保留原有页面的数据，再次进来不会丢失；pc端如果是redirectTo，relauch离开页面再回来，原页面数据会丢失redirectTo，relauch离开页面数据就会卸载，官方修复了这个bug
2. 微信6.7.2版本wx.getBackgroundAudioManager()获取全局音频，开发版与体验版无法在后台播放，必须要在 app.json 中配置 requiredBackgroundModes 属性："requiredBackgroundModes": ["audio"]
3. 小程序button按钮边框去不掉，可以设置button::after{border:none}
4. 小程序需要首次展示的东西最好设置为wx:if=“{{isShow}}”，防止第一次进入变量值为undefined，页面闪烁问题，例如：

data: {
  isShow: false
}

<block wx:if=“{{isShow}}”>
    <view>页面</view>
</block>
<block wx:else>
    <loading />
</block>

音频播放问题

1. 如果页面有多个音频，以id作为唯一标识
2. slider组件的bindchanging函数，不停地拖拽会出现bug，使用bindchang代替，既可以点击跳转进度，又可以拖拽跳转进度
3. wx.seekBackgroundAudio({postion: time})在手机上无法跳转至指定进度，改为获取全局播放音频audio，然后使用audio.seek(time)
4. 在同一个页面切换不同音频，如果全局音频正在播放，会先触发该音频的onStop方法，再触发点击音频的onPlay方法
5. PC端调试工具与苹果手机在音频暂停、手动停止或者自然结束之后仍会触发一次onTimeUpdate函数，注意清空这个函数，在onPlay方法中重新定义该函数

WePY遇到的问题

1. 如果页面的data是对象，只改变对象的属性值页面无法重新渲染，必须给对象重新赋值，页面才会重新渲染
2. 使用this.xx = xx更新数据时，如果每次更新的数据值没有变化，则页面不重新渲染
3. 使用WePY时，在卸载页面函数中修改数据，需要使用this.$apply()让它立即改变；另外，在异步函数内部，一定要使用this.$apply()立即改变修改的数据值

动态效果图：

sound.gif