小程序学习笔记(三)

组件与页面之间的通讯传值:

自定义组件可以触发任意事件,引用组件的页面可以监听自定义的事件。如:

//组件test.wxml
<button id="tapMe" bindtap="tapMe" class="tapMe">点击我</button>
//组件 test.js
methods:{
tapMe:function(e){
this.triggerEvent('zlevent' {name:'Aaron' , target: e });
}
}
//引用组件 page.json
{
"usingComponents": {
"my-component": "/components/test"
}
}
//引用组件页面 page.wxml
<my-comment bindzlevent="myEvent"></my-comment>
//引用组件 page.js
myEvent:function(e){
console.log(e); //e.detail == 组件传递的两个属性,即:name target
}

 

组件的主要生命周期:(均无参数)

created:当组件刚刚被创建好时, 调用created, 这时,this.data就是组件定义的data, 此时还不能进行setData, 只适用于给组件添加一些自定义的属性字段。

attached:组件完全初始化完毕, 开始进入节点树以后, 触发detached,大部分组件的初始化工作都在这里完成。

detached: 组件离开页面节点树以后被触发,

代码示例:

lifetimes: {
created: function() {
console.log(111, this);
},
attached: function() {
this.data.name = "loaded";
this.setData({
test: 13
});
console.log(123, this.data);
},
detached: function() {
console.log(321);
},
},

组件在页面的生命周期:(除了resize以外均无参数)

show:组件所在的页面被展示是触发

hide: 组件所在的页面被隐藏时

resize:组件所在的页面被调整尺寸时

代码示例:


pageLifetimes: {
show: function() {
console.log('pagelife show ');
},
hide: function() {
console.log('pagelife hide ');
},
resize: function(e) {
console.log('pagelife resize ',e);
},
},

组件的行为(behaviors):

behavior 是用于组件之间代码共享的特性, 类似PHP的traits。每个behavior有自己的属性组,方法和生命周期, 组件引用behavior时, 会与组件的属性,方法合并到一真, 生命周期也会在适当的时候应用, 组件可以引用多个behavior,behavior可以引用其它behavior。用Behavior进行构造 。 代码示例:


//mybehavior.js
module.export = Behavior({
properties:{
myBehaviorProperty:{
type : String
}
},
data : {
myBehaviorData:[]
}, 
methods : {
myBehaviorMethod : function(){

}
}
});

//mycomponent.js
var myBehavior = require('mybehavior.js');
Component({
behaviors : [myBehavior],
properties:{
myComponentProperty:{
type : String
}
},
data:{
myComponentData : []
},
attached:function(){},
methods:{
myComponentMethod : function(){}
}
});

上面的代码,组件使用myBehavior以后, 会有两个方法(myComponentMethod ,myBehaviorMethod ),两个属性(myComponentProperty,myBehaviorProperty)和两个data数据 (myComponentData ,myBehaviorData), 当组件触发attached时, 会先执行myBehavior中的attached,再执行myComponent中的attached 。

 

字段,属性的覆盖规则和组合规则

1 、如果存在相同的属性和方法,组件本身的属性,方法将会覆盖behavior内的属性、方法。指定引用的behavior的列表的,靠后的behavior中的属性、方法覆盖前面的。

2、 如果有相同的数据字段, 并且是对象类型的数据字段, 会进行合并。否则将会进行覆盖 。

3、 生命周期不会进行覆盖,在适当的触发时期,被依次触发。 如果一个behavior被一个组件多次引用,它定义的生命周期只会被执行一次。

0

发表评论

邮箱地址不会被公开。