一、Component

1.组件的属性

定义段| 类型 | 是否必填| 描述| 最低版本

-------- | ----- | ----- | ----- | -----

properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表

data | Object | 否 | 组件的内部数据，和 properties 一同用于组件的模板渲染

observers | Object| 否 | 组件数据字段监听器，用于监听 properties 和 data 的变化，参见 数据监听器 | 2.6.1

methods | Object | 否 | 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件间通信与事件

behaviors | String Array| 否 | 类似于 mixins 和 traits 的组件间代码复用机制，参见 behaviors

created | Function| 否 | 组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData )

attached | Function | 否 | 组件生命周期函数-在组件实例进入页面节点树时执行)

ready | Function | 否 | 组件生命周期函数-在组件布局完成后执行)

moved | Function | 否 | 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)

detached | Function | 否 | 组件生命周期函数-在组件实例被从页面节点树移除时执行)

relations | Object| 否 | 组件间关系定义，参见 组件间关系

externalClasses | String Array| 否 | 组件接受的外部样式类，参见 外部样式类

options | Object Map| 否 | 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）

lifetimes | Object| 否 | 组件生命周期声明对象，参见 组件生命周期| 2.2.3

pageLifetimes| Object | 否 | 组件所在页面的生命周期声明对象，参见 组件生命周期 | 2.2.3

definitionFilter | Function| 否 | 定义段过滤器，用于自定义组件扩展，参见 自定义组件扩展| 2.2.3

2.组件的通用属性和方法

属性名| 类型 | 描述

-------- | -----| -----

is | String | 组件的文件路径

id | String| 节点 id

dataset | String | 节点 dataset

data| Object | 组件数据，包括内部数据和属性值

properties | Object | 组件数据，包括内部数据和属性值（与 data 一致）

router | Object| 相对于当前自定义组件的 Router 对象

pageRouter | Object | 相对于当前自定义组件所在页面的 Router 对象

方法名 |参数 |描述 |最低版本

-------- | -----| -----| -----

setData |Object newData |设置 data 并执行视图层渲染

hasBehavior |Object behavior| 检查组件是否具有 behavior （检查时会递归检查被直接或间接引入的所有 behavior）

triggerEvent |String name, Object detail, Object options |触发事件，参见 组件间通信与事件

createSelectorQuery|| 创建一个 SelectorQuery 对象，选择器选取范围为这个组件实例内

createIntersectionObserver || 创建一个 IntersectionObserver 对象，选择器选取范围为这个组件实例内

createMediaQueryObserver || 创建一个 MediaQueryObserver 对象 |2.11.1

selectComponent| String selector |使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被 wx://component-export 影响）

selectAllComponents |String selector |使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组（会被 wx://component-export 影响）

selectOwnerComponent || 选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被 wx://component-export 影响）| 2.8.2

getRelationNodes |String relationKey |获取这个关系所对应的所有关联节点，参见 组件间关系

groupSetData |Function callback |立刻执行 callback ，其中的多个 setData 之间不会触发界面绘制（只有某些特殊场景中需要，如用于在不同组件同时 setData 时进行界面绘制同步） 2.4.0

getTabBar ||返回当前页面的 custom-tab-bar 的组件实例，详见自定义 tabBar| 2.6.2

getPageId ||返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内 |2.7.1

animate |String selector, Array keyframes, Number duration, Function callback |执行关键帧动画，详见动画 |2.9.0

clearAnimation |String selector, Object options, Function callback |清除关键帧动画，详见动画 |2.9.0

setUpdatePerformanceListener |Object options, Function listener |清除关键帧动画，详见动画| 2.12.0

3.组件定义

Component({  // behavior1.js  // module.exports = Behavior({  //   behaviors: [require('behavior2.js')],  //   definitionFilter(defFields, definitionFilterArr) {},//定义段过滤器，用于自定义组件扩展。  // })  //类似于mixins和traits的组件间代码复用机制  behaviors: [require('behavior1.js')],  //组件的对外属性，是属性名到属性设置的映射表  properties: {    myProperty: { // 属性名      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个      observer: function (newVal, oldVal) {} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'    },    myProperty2: String // 简化的定义方式  },  //组件的数据  data: {    A: [{      B: 'init data.A[0].B'    }]  }, // 私有数据，可用于模版渲染  relations: {}, //组件间关系定义  externalClass: [], //组件接受的外部样式类  //一些选项  options: {    multipleSlots: true // 在组件定义时的选项中启用多slot支持  },  lifetimes: {    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名    created: function () {}, //在组件实例刚刚被创建时执行，注意此时不能调用 setData    attached: function () {}, //在组件实例进入页面节点树时执行    ready: function () {}, //在组件布局完成后执行    moved: function () {}, //在组件实例被移动到节点树另一个位置时执行    detached: function () {}, //在组件实例被从页面节点树移除时执行    error: function () {      // 页面被展示    },    show: function () {      // 页面被展示    },    hide: function () {      // 页面被隐藏    },    resize: function (size) {      // 页面尺寸变化    }  },  pageLifetimes: {    // 组件所在页面的生命周期函数    created: function () {}, //在组件实例刚刚被创建时执行，注意此时不能调用 setData    attached: function () {}, //在组件实例进入页面节点树时执行    ready: function () {}, //在组件布局完成后执行    moved: function () {}, //在组件实例被移动到节点树另一个位置时执行    detached: function () {}, //在组件实例被从页面节点树移除时执行    error: function () {      // 页面被展示    },    show: function () {      // 页面被展示    },    hide: function () {      // 页面被隐藏    },    resize: function (size) {      // 页面尺寸变化    }  },  //组件的方法，包括(事件响应函数)和(任意的自定义方法)  methods: {    onMyButtonTap: function () {      this.setData({        // 更新属性和数据的方法与更新页面数据的方法类似        myProperty: 'Test'      })    },    _myPrivateMethod: function () {      // 内部方法建议以下划线开头      this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'      this.applyDataUpdates() //更新数据    },    _propertyChange: function (newVal, oldVal) {}  }})

<!-- 组件 custom-component.wxml --><custom-component>  <view>{{myProperty}}</view>  <button bindtap='onMyButtonTap'>Button</button>  <view>{{A[0].B}}</view>  <button bindtap='_myPrivateMethod'>_myPrivateMethod</button></custom-component>

{  "component": true,  "usingComponents": {}}

3.页面使用组件

{  "usingComponents": {    "my-component": "/components/custom-component"  }}

<!-- 页面的 WXML --><my-component my-property="example" />