当前位置: 首页 > news >正文

【微信小程序】自定义组件 - behaviors

1. 什么是 behaviors

在这里插入图片描述

2. behaviors 的工作方式

在这里插入图片描述

3. 创建 behavior

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用:
在这里插入图片描述

4. 导入并使用 behavior

在这里插入图片描述
在这里插入图片描述

5. behavior 中所有可用的节点

在这里插入图片描述

6. 同名字段的覆盖和组合规则*

在这里插入图片描述

关于详细的覆盖和组合规则,大家可以参考微信小程序官方文档给出的说明:
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html

附:官方文档-behaviors

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

每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behaviorbehavior 也可以引用其它 behavior

详细的参数含义和使用请参考 Behavior 参考文档。

组件中使用

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

代码示例:

在开发者工具中预览效果

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

在上例中, my-component 组件定义中加入了 my-behavior

my-behavior 结构为:

// my-behavior.js
module.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String}},data: {myBehaviorData: {}},attached: function(){},methods: {myBehaviorMethod: function(){}}
})
  • 属性:myBehaviorProperty
  • 数据字段:myBehaviorData
  • 方法:myBehaviorMethod
  • 生命周期函数:attachedcreatedready

这将使 my-component 最终结构为:

  • 属性:myBehaviorPropertymyProperty
  • 数据字段:myBehaviorDatamyData
  • 方法:myBehaviorMethodmyMethod
  • 生命周期函数:attachedcreatedready

当组件触发生命周期时,上例生命周期函数执行顺序为:

  1. [my-behavior] created
  2. [my-component] created
  3. [my-behavior] attached
  4. [my-component] attached
  5. [my-behavior] ready
  6. [my-component] ready

详细规则参考 同名字段的覆盖和组合规则

同名字段的覆盖和组合规则

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

  • 如果有同名的属性 (properties) 或方法 (methods):
    1. 若组件本身有这个属性或方法,则组件的属性或方法会覆盖 behavior 中的同名属性或方法;
    2. 若组件本身无这个属性或方法,则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法;
    3. 在 2 的基础上,若存在嵌套引用 behavior 的情况,则规则为:引用者 behavior 覆盖 被引用的 behavior 中的同名属性或方法。
  • 如果有同名的数据字段 (data):
    • 若同名的数据字段都是对象类型,会进行对象合并;
    • 其余情况会进行数据覆盖,覆盖规则为: 引用者 behavior > 被引用的 behavior靠后的 behavior > 靠前的 behavior。(优先级高的覆盖优先级低的,最大的为优先级最高)
  • 生命周期函数和 observers 不会相互覆盖,而是在对应触发时机被逐个调用:
    • 对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;
    • 对于同种生命周期函数和同字段 observers ,遵循如下规则:
      • behavior 优先于组件执行;
      • 被引用的 behavior 优先于 引用者 behavior 执行;
      • 靠前的 behavior 优先于 靠后的 behavior 执行;
    • 如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数和 observers 不会重复执行。
http://www.lryc.cn/news/429115.html

相关文章:

  • Linux ubuntu 24.04 安装运行《帝国时代3》免安装绿色版游戏,解决 “Could not load DATAP.BAR”等问题
  • Springboot 图片
  • LIMS实验室管理系统如何实现数据自动采集
  • 全自动商用油炸锅介绍:
  • CE修改器的简单使用
  • element-plus el-cascader懒加载怎么指定对应的label和value。最后一级怎么判断?
  • pdf查看密码
  • 从bbl和overleaf版本解决Arxiv提交后缺失参考文献Citation on page undefined on input line
  • Flutter【01】状态管理
  • (转载)使用zed相机录制视频
  • C/C++中奇妙的类型转换
  • 嵌入式AI快速入门课程-K510篇 (第三篇 环境搭建及开发板操作)
  • C++第三十九弹---C++ STL中的无序容器:unordered_set与unordered_map使用详解
  • 数学建模起步感受(赛前15天)
  • 【YOLO5 项目实战】(4)红外目标检测
  • 游泳耳机哪个牌子好?角逐必选榜的4大王者游泳耳机测评解析!
  • 鹤岗房全国蔓延,现在要不要买房?
  • Flink程序部署与提交
  • 了解Android
  • Tomcat学习进阶
  • 【C++】————智能指针
  • GT IP中CC序列(Clock Correction Sequence)的周期性
  • grafana pod 无法启动 Only one datasource per organization can be marked as default
  • 你是如何克服编程学习中的挫折感的?(-@-^-0-)
  • 大数据技术之Zookeeper(1)
  • 鸿蒙学习(四):泛型空安全模块导入导出
  • 无人机(Unmanned Aerial Vehicle, UAV)视觉感知论文汇总
  • 【ORACLE】 ORA-01691: Lob 段无法通过 8192 (在表空间 XXX_SPACE 中) 扩展
  • Java之静态代理与动态代理的区别
  • 公司内网监控软件有哪些?(2024年10款最新款推荐内网监控软件)