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

news2024/9/20 16:49:15

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.coloradmin.cn/o/2056082.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++学习笔记----4、用C++进行程序设计(一)---- 什么是面向对象的程序设计

也许你看到这个题目的时候,就觉得这篇博文不用看了,难道这就是题目劝退了观众。我看到过一些程序,是由面向过程的传统程序修改过来了,只是将原来的函数变成了类的成员函数,其他几乎没有什么变化,可以说是换…

使用一致性哈希解决哈希分片负载均衡的扩展性问题

声明:本文的图全部源于:小林coding 上来咱先说,一致性哈希是应对分布式系统的算法 假设有一个负载均衡问题,也就是大批流量来请求,那怎么分配这些流量? 随机?还是挨个轮询? 这都…

文心快码帮你解大厂面试题:在给定两个不定长的单向链表,如何实现两个链表的加和?

【大厂面试真题】系列,带你攻克大厂面试真题,秒变offer收割机! ❓今日问题:Java G1 GC中,region是什么意思?有哪些不同的region类型? ❤️一起看看文心快码Baidu Comate给出的答案吧&#xff01…

java 重新认识重载与重写

一、概念 1、重载(Overloading): 是指在同一个类中,可以有多个同名方法,但这些方法的参数类型、参数个数、参数顺序至少有一个不同。返回类型可以相同也可以不同。每个重载的方法都需要有一个独特的参数类型列表。 2、 重写&#…

35岁被裁员,难道是程序员的结局吗?

声明:此篇为 ai123.cn 原创文章,转载请标明出处链接:https://ai123.cn/2179.html 作为一名35岁的Java工程师,技术更新快得就像坐火箭一样,咱们的技术可能一不留神就落伍了。再加上年纪大了,体力可能跟不上挑…

AMD加大资金布局,全力追赶英伟达

AMD正在加紧布局,以缩小与AI芯片领域领军者英伟达的差距。随着AI技术的飞速发展,AMD近日宣布了一笔重磅收购计划,这家芯片巨头正加速进入AI硬件市场,希望通过此次收购进一步扩大市场份额。 49亿美元收购ZT Systems 本周&#xff…

CUDA-MODE课程笔记 第7课: Quantization Cuda vs Triton

我的课程笔记,欢迎关注:https://github.com/BBuf/how-to-optim-algorithm-in-cuda/tree/master/cuda-mode CUDA-MODE课程笔记 第7课: Quantization Cuda vs Triton 适配课件详细解读 作者课件可以在这里找到:https://github.com/cuda-mode/l…

前端宝典十:webpack性能优化最佳实践

Webpack 内置了很多功能。 通常你可用如下经验去判断如何配置 Webpack: 想让源文件加入到构建流程中去被 Webpack 控制,配置 entry;想自定义输出文件的位置和名称,配置 output;想自定义寻找依赖模块时的策略&#xff…

上门预约O2O系统源码开发

随着互联网技术的飞速发展,O2O(Online To Offline)模式已成为连接线上与线下的重要桥梁,尤其在同城服务领域展现出了巨大的潜力。上门预约服务作为O2O模式的一种典型应用,正逐渐改变着人们的生活方式。 一、O2O模式概述…

Spring Boot发送邮件带附件功能怎么实现?

SpringBoot发送邮件带附件的步骤?如何优化Spring性能? 发送电子邮件是一个常见的需求,而随着业务需求的增加,发送带有附件的邮件变得尤为重要。AokSend将探讨如何在Spring Boot中实现发送邮件并附加文件的功能。 Spring Boot发送…

使用SSMS连接和查询 SQL Server 实例

简介 SQL Server Management Studio 是用于管理SQL Server基础架构的集成环境。Management Studio提供用于配置、监视和管理SQL Server实例的工具。 此外,它还提供了用于部署、监视和升级数据层组件(如应用程序使用的数据库和数据仓库)的工具以生成查询和脚本。 官方…

Win 11用户全面中招,微软强制更新致性能下降45%

一觉醒来,微软又准备给大伙儿来波友情关怀送温暖了。 外媒爆料,在接下来的 Win 11 24H2 版本中,微软将默认自动为用户开启 BitLocker 磁盘加密…… 来源:computerworld 资深搞机佬都知道,微软对于用户数据保护一直有…

【Java】对象与toString()方法

1.前言 了解toString之前,要先明白Object类是什么,Object是所有对象的父类。在Object类当中含有toString()方法,因此所有的对象也都包含有一个toString()方法。 2.toString 2.1 方法调用 toString()方法主要的作用,是对类与对象的…

为IntelliJ IDEA安装插件

安装插件 插件是开发工具的扩展程序,通常由第三方提供,当安装了插件后,原开发工作的菜单、按钮等开发环境可能会发生变化,例如出现了新的菜单项,或出现了新的按钮,甚至一些全新的编码方式,通常…

创客匠人老蒋:流量是个伪命题,做好这件事是打造IP最好避坑方式

怎么样做好一个创始人的IP?流量低是否可以与创客合作陪跑服务? 在老蒋创客圈第63期对话标杆直播连麦中,老蒋与受邀嘉宾【惢众身心成长家园平台】创办人王辉老师进行了一场深度且具有启发性的交流。 老蒋指出,打造IP不仅要“做自己…

通过tqdm实现进度条打印训练过程信息

tqdm使用方法 from tqdm import tqdmdef fit_one_epoch(...):train_loop tqdm(train_loader, descTrain)for xx in enumerate(train_loop):...train_loop.set_description(fEpoch [{epoch 1}/{config.epochs}])train_loop.set_postfix({loss_bev_seg_emb: {0:1.2f}.format(l…

Leetcode—164. 最大间距【中等】(struct)

2024每日刷题&#xff08;157&#xff09; Leetcode—164. 最大间距 直接法实现代码 class Solution { public:int maximumGap(vector<int>& nums) {int n nums.size();if(n 1) {return 0;}ranges::sort(nums);int diff -1;int pre nums[0];for(int i 1; i &l…

java编程 斐波拉契数列算法集锦【斐波拉契数列】【Fibonacci sequence】

斐波那契数列&#xff08;Fibonacci sequence&#xff09;&#xff0c;又称黄金分割数列&#xff0c;是一个非常经典的递归问题。 斐波那契数列&#xff0c;这是一个广为人知的概念&#xff0c;在数学上定义为这样一个数列&#xff1a;0、1、1、2、3、5、8、13、21、34、……即…

场外个股期权是不是个股期权?场外个股期权和个股期权的区别

今天带你了解场外个股期权是不是个股期权&#xff1f;场外个股期权和个股期权的区别。场外个股期权是指在沪深交易所之外交易的个股期权&#xff0c;其本质是一种金融衍生品&#xff0c;允许投资者在股票交易场所外以特定价格买进或卖出证券。 个股期权作为一种重要的投资工具…

【机器学习】线性回归与逻辑回归的极致解析:从数学理论到实战案例

文章目录 1. 引言Python 代码示例 2. 线性回归2.1 线性回归的基本概念线性回归的定义数学表达式及模型假设 2.2 线性回归的工作原理最小二乘法&#xff08;Ordinary Least Squares, OLS&#xff09;梯度下降法在线性回归中的应用多元线性回归与一元线性回归的区别与联系 2.3 线…