背景:
一个捐步的小程序、类似H5的活动。产品经理说要在加背景音乐,每个页面都需要开关控制。吓得我赶紧查阅了一下小程序api。
还好,api是支持背景音乐的:。传送门:https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html
解决:
1.播放问题:既然api有了,那就不用担心播放的问题,只需要在app.js的componentDidShow()加入这段代码就可以了。
小程序api中复制
2.接下来就是播放的组件问题,需要做一个开关,而且每个页面都需要。但是小程序每个页面都是独立的,也就是说如果我把开关做成组件化,每个页面都需要引入这个组件,但是小程序每次打开页面,相当于就是重新new一个组件。那么怎么控制状态呢?第一时间想到的就是用状态管理,用状态管理去控制组件的开关。
在app.js中新建 backgroundAudioManager
开关的 actions
组件关键代码
以上就是关键代码,亲测有效。非常简单,就是利用Redux的管理。需要注意的就是,要把appjs中的backgroundAudioManager,放到一个公共常量中,我是把它放到 taro中,在需要用到的时候再引入即可。有帮助的话给个赞吧~~~