小程序不能通过js操作节点样式，只能给节点添加一个
style="{{customStyle}}"达到效果
但是要给整个页面添加背景色，就需要自定义一个根节点，相应的就要给这个节点添加行内样式
由于每次添加根节点和对应样式比较麻烦，可以使用一个组件来完成
如果每次都是手动去更新每一个组件的样式比较麻烦，就需要使用订阅发布者模式
组件包含功能：
- 传入自定义class、
- 组件挂载节点时添加样式、
- 手动刷新样式（父组件使用selectComponent查找组件并调用刷新方法）
- 订阅样式变化通知
这里在订阅通知的时候需要注意书写方式，否则会出现this丢失的情况，addUiConfigDep(this.setUiConfig.bind(this)) - 取消订阅样式变化通知
样式查询模块功能
查询样式时如果样式发送变化，给所有订阅者发布通知。
主要代码
发布订阅者
class dep {
subs = new Set()
addSub (sub) {
if (!sub) return
this.subs.add(sub)
}
deleteSub (sub) {
// console.log('--deleteSub--', this.subs.has(sub))
if (this.subs.has(sub)) {
this.subs.delete(sub)
}
}
notify () {
wechat.nextTick().then(() => {
// console.log('size=', this.subs.size)
this.subs.forEach((sub) => {
sub()
})
})
}
}
创建全局实例
const uiConfigDep = new dep()
export const addUiConfigDep = (cb) => {
uiConfigDep.addSub(cb)
}
export const deleteUiConfigDep = (cb) => {
uiConfigDep.deleteSub(cb)
}
订阅（微信小程序组件）
lifetimes: {
attached () {
this.constrator = this.setUiConfig.bind(this)
addUiConfigDep(this.constrator)
},
},
取消订阅（微信小程序组件）
lifetimes: {
detached () {
deleteUiConfigDep(this.constrator)
},
},
