behaviors定义和使用 behaviorsbehaviors 是用于组件间代码共享的特性,类似于一些编程语言中的“mixins”或“traits”。每个 behavior 可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。behavior 需要使用 Behavior() 构造器定义。代码示例:// my-behavior.jsmodule.exports = Behavior({ behaviors: [], properties: { myBehaviorProperty: { type: String } }, data: { myBehaviorData: {} }, attached: function(){}, methods: { myBehaviorMethod: function(){} }})组件引用时,在 behaviors 定义段中将它们逐个列出即可。代码示例:// my-component.jsvar myBehavior = require(‘my-behavior’)Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: {} }, attached: function(){}, methods: { myMethod: function(){} }})在上例中, my-component 组件定义中加入了 my-behavior ,而 my-behavior 中包含有 myBehaviorProperty 属性、 myBehaviorData 数据字段、 myBehaviorMethod 方法和一个 attached 生命周期函数。这将使得 my-component 中最终包含 myBehaviorProperty 、 myProperty 两个属性, myBehaviorData 、 myData 两个数据字段,和 myBehaviorMethod 、 myMethod 两个方法。当组件触发 attached 生命周期时,会依次触发 my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数。字段的覆盖和组合规则组件和它引用的 behavior 中可以包含同名的字段,对这些字段的处理方法如下:如果有同名的属性或方法,组件本身的属性或方法会覆盖 behavior 中的属性或方法,如果引用了多个 behavior ,在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法;如果有同名的数据字段,如果数据是对象类型,会进行对象合并,如果是非对象类型则会进行相互覆盖;生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数只会被执行一次。内置 behaviors自定义组件可以通过引用内置的 behavior 来获得内置组件的一些行为。代码示例:Component({ behaviors: [‘wx://form-field’]})在上例中, wx://form-field 代表一个内置 behavior ,它使得这个自定义组件有类似于表单控件的行为。内置 behavior 往往会为组件添加一些属性。在没有特殊说明时,组件可以覆盖这些属性来改变它的 type 或添加 observer 。wx://form-field使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件,并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性。属性名类型描述最低版本nameString在表单中的字段名1.6.7value任意在表单中的字段值1.6.7组件间关系定义和使用组件间关系有时需要实现这样的组件:<custom-ul> <custom-li> item 1 </custom-li> <custom-li> item 2 </custom-li></custom-ul>这个例子中, custom-ul 和 custom-li 都是自定义组件,它们有相互间的关系,相互间的通信往往比较复杂。此时在组件定义时加入 relations 定义段,可以解决这样的问题。示例:// path/to/custom-ul.jsComponent({ relations: { ‘./custom-li’: { type: ‘child’, // 关联的目标节点应为子节点 linked: function(target) { // 每次有custom-li被插入时执行,target是该节点实例对象,触发在该节点attached生命周期之后 }, linkChanged: function(target) { // 每次有custom-li被移动后执行,target是该节点实例对象,触发在该节点moved生命周期之后 }, unlinked: function(target) { // 每次有custom-li被移除时执行,target是该节点实例对象,触发在该节点detached生命周期之后 } } }, methods: { _getAllLi: function(){ // 使用getRelationNodes可以获得nodes数组,包含所有已关联的custom-li,且是有序的 var nodes = this.getRelationNodes(‘path/to/custom-li’) } }, ready: function(){ this._getAllLi() }})// path/to/custom-li.jsComponent({ relations: { ‘./custom-ul’: { type: ‘parent’, // 关联的目标节点应为父节点 linked: function(target) { // 每次被插入到custom-ul时执行,target是custom-ul节点实例对象,触发在attached生命周期之后 }, linkChanged: function(target) { // 每次被移动后执行,target是custom-ul节点实例对象,触发在moved生命周期之后 }, unlinked: function(target) { // 每次被移除时执行,target是custom-ul节点实例对象,触发在detached生命周期之后 } } }})注意:必须在两个组件定义中都加入relations定义,否则不会生效。关联一类组件有时,需要关联的是一类组件,如:<custom-form> <view> input <custom-input></custom-input> </view> <custom-submit> submit </custom-submit></custom-form>custom-form 组件想要关联 custom-input 和 custom-submit 两个组件。此时,如果这两个组件都有同一个behavior:// path/to/custom-form-controls.jsmodule.exports = Behavior({ // …})// path/to/custom-input.jsvar customFormControls = require(‘./custom-form-controls’)Component({ behaviors: [customFormControls], relations: { ‘./custom-form’: { type: ‘ancestor’, // 关联的目标节点应为祖先节点 } }})// path/to/custom-submit.jsvar customFormControls = require(‘./custom-form-controls’)Component({ behaviors: [customFormControls], relations: { ‘./custom-form’: { type: ‘ancestor’, // 关联的目标节点应为祖先节点 } }})则在 relations 关系定义中,可使用这个behavior来代替组件路径作为关联的目标节点:// path/to/custom-form.jsvar customFormControls = require(‘./custom-form-controls’)Component({ relations: { ‘customFormControls’: { type: ‘descendant’, // 关联的目标节点应为子孙节点 target: customFormControls } }})relations 定义段relations 定义段包含目标组件路径及其对应选项,可包含的选项见下表。选项类型是否必填描述typeString是目标组件的相对关系,可选的值为 parent 、 child 、 ancestor 、 descendantlinkedFunction否关系生命周期函数,当关系被建立在页面节点树中时触发,触发时机在组件attached生命周期之后linkChangedFunction否关系生命周期函数,当关系在页面节点树中发生改变时触发,触发时机在组件moved生命周期之后unlinkedFunction否关系生命周期函数,当关系脱离页面节点树时触发,触发时机在组件detached生命周期之后targetString否如果这一项被设置,则它表示关联的目标节点所应具有的behavior,所有拥有这一behavior的组件节点都会被关联抽象节点这个特性自小程序基础库版本 1.9.6 开始支持。在组件中使用抽象节点有时,自定义组件模版中的一些节点,其对应的自定义组件不是由自定义组件本身确定的,而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。例如,我们现在来实现一个“选框组”(selectable-group)组件,它其中可以放置单选框(custom-radio)或者复选框(custom-checkbox)。这个组件的 wxml 可以这样编写:<!– selectable-group.wxml –><view wx:for=”{{labels}}”> <label> <selectable disabled=”{{false}}”></selectable> {{item}} </label></view>
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务