小程序组件化方案02

缘由

本章节以button组件为例,串讲组件定制过程。

一、通过基类,实例组件

1
2
3
4
5
const component = new Component({
scope: `$wux.button.${id}`,
data: options,
methods: { /*somethings*/
})

通过基类,实例化组件,大括号下的字典,就是传给基类的options。其中data,就是基类中的options.datamethods就是基类中的options.methods

二、初始化data数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
setDefaults() {
return {
className: undefined,
position: `bottomRight`,
backdrop: !1,
buttons: [],
buttonClicked() {},
callback() {},
}
},
const options = Object.assign({
animateCss: undefined,
visible: !1,
}, this.setDefaults(), opts)

上述代码中,opts,就是外界可配置的属性。其中可包含funtion类型变量,buttonClicked

三、初始化methods方法

记得我们在基类章节中所说嘛,对于options中存在的function,我们需要在methods中重写一遍。在data中,其实该组件是支持配置点击buttonfunction的,所以我们在methods中,也需要定义该方法。

1
2
3
4
5
6
buttonClicked (e) {
const index = e.currentTarget.dataset.index
if (options.buttonClicked(index, options.buttons[index]) === true) {
this.close()
}
},

上述代码,就是定义在methods下的function,其中options.buttonClicked(index, options.buttons[index]),其实就是在调用data中或者说外界配置的buttonClicked

四、wxml文件编写

目前主流的wxminicode组件化方案,都是采用template模式。我们在基类章节中,已经分析过组件的属性和方法,已经注入到page中。所以,wxml大可,直接使用。由于存在一个页面,使用同一组件多次的情况,所以在外界初始化组件过程中,需要传入一个id参数,该参数加上组件定义的命名空间,就构成了唯一标识符。

补充

主流小程序组件化方案,有赞微信官方美味不用等……

坚持原创技术分享,您的支持将鼓励我继续创作!