pwindy  
在完成任务的同时,还需要不断“复盘”,不论你多么的忙,都需要留下时间思考,可以思考哪些地方做的好,哪些地方我们可以改进,应该如何改进,注重总结才是王道

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 vs hidden

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属性里面的音乐链接值。

6.2.组件中代码实现

posted on 2022-04-15 11:50  pwindy  阅读(81)  评论(0)    收藏  举报