微信小程序中使用音频组件以及wx:if和hidden的区别
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
区别:
wx:if 是遇 true 显示,hidden 是遇 false 显示。
wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。
所以如果频繁切换的话,用 wx:if 将会消耗更多资源,因为每次呈现的时候他都会渲染,每次隐藏的时候,他都会销毁。
如果切换并不频繁的话,用 wx:if 相对来说较好些,因为它会避免初始就一下渲染那么多。
在我的业务上需要根据不同的种类来挂载不同的组件,使用hidden更为适合
1.在视图层根据数据获取到的类型参数来判断隐藏与否
2.在三个组件内部wxml文件最外层写上hidden="{{hidden}}"
3.在三个组件js的properties写上hidden:Boolean,当前全部组件继承了classicBeh,所以只需要在classicBeh的properties写上hidden:Boolean就能使全部组件生效
.
页面骨架中绑定一个onPlay事件,绑定playing变量实现两个播放图标的切换
要在页面中播放音乐首先要实例化背景音乐管理器这一个对象
在组件方法中添加onplay函数实现业务逻辑
这样一个基本的播放页面就完成了,接着在页面切换的时候需要关闭音乐播放组件:
添加一个detached方法,改方法会在页面组件实例从节点树中移除时执行,在移除时关闭这个音乐
现在并不会实现效果,切换页面后音乐还是在播放。
通过上面分析hidden和wx:if的区别可以发现使用hidden的时候根本不会生效,因为hidden只是单纯的显示和隐藏
接着改变v-music组件的条件渲染方式,从hidden改为wx:if,使用wx:if切换的时候会完全执行组件的生命周期,因此不但音乐会关闭播放,播放按钮(playing)的状态也会被设置成false
接下来完善一下音乐播放组件,因为实际的业务需求是播放的音乐 在切换时并不会关闭,而且当前播放音乐如果切换回来,播放按钮需要修改成继续播放:
首先在方法里添加一个函数:
然后在attached生命周期里调用这个函数即可
接下来解决用音乐总控开关操控时候和音乐页面播放按钮不一致的bug:
定义一个总控开关函数,在4个播放时间中的回调函数里执行前面写好的 this._recoverStatus()即可:
同样的在attached(组件被挂载)生命周期里调用:
最后给音乐组件添加一个播放时候旋转的动画效果:
样式:
页面: