1.多组件样式的复用
当几个不同的组件的页面样式大致一样的情况下,可以利用公共组件common.wxss,通过import来引入。
2.多组件js文件复用---behaviors
在多组件之间,存在相同的属性、数据字段、方法、生命周期函数。
这个时候基于可以应用behaviors来把可以通用的部分提取出来。
官网参考---https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
3.hidden在组件中的用法
3.1.在组件中,hidden只是简单的控制组件的显示与隐藏
3.2.在组件中,hidden不会触发组件的detached/attached/ready/created等生命周期函数,但是wx:if可以做到
3.3.比较hidden和wx:if在组件中的使用区别
wx:if:wx:if
之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。同时 wx:if
也是惰性的,如果在初始渲染条件为 false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
hidden:hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
区别:一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。
官网解释参考---https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html#wx:if%20vs%20hidden
4.背景音乐播放---音控总开关
const bgm = wx.getBackgroundAudioManager()
4.1.bgm.onPlay( function callback ) 播放
4.2.bgm.onPause( function callback ) 暂停
4.3.bgm.onEnded( function callback ) 自然播放结束
4.3.bgm.onStop( function callback ) 停止
tips:function callback为回调函数
bgm.onPlay( () => { this._recoverStatus() })
5.在页面中运用背景音乐播放器的思路和代码展现
5.1.思路
在全局的app.js中设置两个全局变量
gPlayStationId:每个页面对应的id,默认值为-1
gPlayStationOnoff:布尔值。当前是否有播放背景音乐,有播放为true,没有播放为false。默认值为false

5.2.页面上代码实现
6.在组件中运用背景音乐播放器的思路和代码展现
const bgm = wx.getBackgroundAudioManager()
6.1.思路
在组件的attached生命周期中判断当前bgm的src属性值(音乐链接值),是否为组件properties属性里面的音乐链接值。