理解小程序自定义组件的执行流程,有助于后期开发,本人通过以下简易代码分析自定义组件的流程,结果如下:
第一步:创建组件:
created: function () {}
第二步:属性默认值设置:
如果组件被调用时设置了组件属性,则初始化该属性的默认值。没有调用的属性不执行。
比如自定义组件user含有二个属性,分别是: memberName、memberSex
调用该组件时,只赋值了memberName,未赋值memberSex时,则只会执行memberName属性的observer函数,未赋值的memberSex属性的observer函数不会被执行。
<!-- 调用组件,以下只赋值了memberName,未赋值memberSex --> <user memberName="wm218"/> <!-- 以下代码是插件.js内,它会执行自定义组件的 properties:{ memberName:{ type: String, value: '匿名', observer: function(oldVal, newVal, changePath){ // 如果组件设置了此属性,这部份会在created之后执行,这里newVal的值是匿名,而不是wm218! } }, ... -->
第三步: 将外部数据附加到属性
attached: function () { }
在上一步中,并不能获取外部数据,即不能获取memberName的值为wm218,而在attached内可以通过:this.properties.memberName 获取外部值!
第四步:组件完成加载
ready: function(){ }
完整示例代码如下:
引用插件页代码:
<user memberName="wm218"/>
插件代码:com.js
<!-- com.js --> Component({ // 这里定义组件属性 properties:{ memberName:{ type: String, value: '', observer: function(oldVal, newVal, changePath){ console.log('初始化memberName属性的默认值!', this.properties.memberName); } }, memberSex: { type: String, value: '', observer: function (oldVal, newVal, changePath) { console.log('初始化memberSex属性的默认值!'); } } }, created: function () { console.log('组件被创建!', this.properties.memberName) }, attached: function () { console.log('外部属性数据已被附加到properties内!', this.properties.memberName) }, ready: function(){ console.log('组件已完全加载!', this.properties.memberName) } });
日志输出结果: