【愚公系列】2022年02月微信小程序-Component组件

文章目录

一、Component
- 1.组件的属性
- 2.组件的通用属性和方法
- 3.组件定义
- 3.页面使用组件

一、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.组件定义

代码语言：javascript复制

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) {}
  }
})

代码语言：javascript复制

<!-- 组件 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>

代码语言：javascript复制

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

3.页面使用组件

代码语言：javascript复制

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

代码语言：javascript复制

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

编程算法数据库一体机TData java 小程序

0 人点赞

【愚公系列】2022年02月 微信小程序-Component组件

文章目录

一、Component

1.组件的属性

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

3.组件定义

3.页面使用组件

【愚公系列】2022年02月微信小程序-Component组件