codecamp

百度智能小程序 behaviors

定义和使用 behaviors

定义:behaviors 用于组件间代码共享,类似于一些编程语言中的“mixins”或“traits”。

  • 每个 behavior 可以包含一组属性、数据、生命周期函数和方法,组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。
  • 每个组件可以引用多个 behavior 。 同时该 behavior 也可以引用其它 behavior 。
  • behavior 需要使用 Behavior() 构造器定义。

代码示例 

在开发者工具中打开
// my-behavior.js
module.exports = Behavior({
    behaviors: [],
    properties: {
        myBehaviorProperty: {
            type: String,
            value: 'behavior'
        }
  },
  data: {
      myBehaviorData: {}
  },
  attached: function(){},
  methods: {
      myBehaviorMethod: function(){}
  }
});

组件引用时,需在 behaviors 定义段中将它们逐个列出。

代码示例

// my-component.js
var myBehavior = require('my-behavior')
Component({
    behaviors: [myBehavior],
    properties: {
        myProperty: {
            type: String,
            value: 'component'
        }
  },
  data: {
      myData: {}
  },
  attached: function(){},
  methods: {
      myMethod: function(){}
  }
});

通过上面的例子可知:

  • my-behavior 中包含有 myBehaviorProperty 属性、 myBehaviorData 数据字段、 myBehaviorMethod 方法和一个 attached 生命周期函数。
  • 在 my-component 组件定义中引入了 my-behavior.js 。这将使得 my-component 中最终包含 myBehaviorProperty 、 myProperty 两个属性, myBehaviorData 、 myData 两个数据字段,和 myBehaviorMethod 、 myMethod 两个方法。当组件触发 attached 生命周期时,会依次触发 my-behavior.js 中的 attached 生命周期函数和 my-component.js 中的 attached 生命周期函数。

字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段,对这些字段的处理方法如下:

  • 如果有同名的属性或方法,组件本身的属性或方法会覆盖 behavior 中的属性或方法;
  • 如果引用了多个 behavior,在定义段中靠后 behavior 中的属性或方法会覆盖靠前的属性或方法;
  • 如果有同名的数据字段,如果数据是对象类型,会进行对象合并,如果是非对象类型则会进行相互覆盖;
  • 生命周期函数不会相互覆盖,而是在对应触发时机被逐个调用。如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数只会被执行一次。

内置 behaviors

自定义组件可以通过引用内置的 behavior 来获得内置组件的一些行为。

代码示例 

在开发者工具中打开
Component({
    behaviors: ['swan://form-field']
});
  • 在上例中, swan://form-field 代表一个内置 behavior,它使得这个自定义组件有类似于表单控件的行为。
  • 内置 behavior 往往会为组件添加一些属性。在没有特殊说明时,组件可以覆盖这些属性来改变它的 type 或添加 observer 。

swan://form-field

解释:使自定义组件有类似于表单控件的行为。form 组件可以识别这些自定义组件,并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性:

属性名类型描述最低版本
nameString在表单中的字段名1.13.29
value任意在表单中的字段值1.13.29

swan://component-export

从基础库版本 2.0.5 开始提供支持。

解释:使自定义组件支持 export 定义段。这个定义段可以用于指定组件被 selectComponent 调用时的返回值。

未使用这个定义段时, selectComponent 将默认返回自定义组件的 this 。使用这个定义段时,将以这个定义段的函数返回值代替。

代码示例 

在开发者工具中打开
// 自定义组件的js文件
Component({
    behaviors: ['swan://component-export'],
    export() {
        return { componentField: 'componentValue' }
    }
});
<!-- 使用自定义组件时,对于自定义组件的引用模板 -->
<my-component id="custom-id" />
this.selectComponent('#custom-id') // 等于 { componentField: 'componentValue' }


百度智能小程序 组件间通信与事件
百度智能小程序 数据监听器
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }