微信小程序开发：自定义组件-behaviors

1、什么是behaviors

behaviors是小程序中，用于实现组件间代码共享的特性，类似于vue的"mixins"。

2、behaviors的工作方式

每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。

每个组件可以引用多个behavior,behavior也可以引用其它behavior。

2、创建behaviors

调用Behavior(Object object)方法即可创建一个共享的behavior实例对象，供所有的组件使用:
例如，可以在项目根目录创建一个behaviors文件夹，里面存放所有的behaviors文件

behaviors.js文件代码如下

//调用Behavior()方法，创建实例对象
//并使用madule.exports将behavior实例对象共享出去
module.exports = Behavior({//私有数据节点data:{username:'张三'},//属性节点properties:{},//事件处理函数和自定义方法节点methods:{}//其他节点
})

4、导入并使用behaviors

在组件中，使用require()方法导入需要的 behavior，挂载后即可访问behavior中的数据或方法，示例代码如下:

在需要引入behaviors的js文件中引入

//1．使用require()导入需要的自定义behavior模块
const myBehaviors = require("../../behaviors/my-behavior")
Component({//2．将导入的 behavior实例对象，挂载到 behaviors 数组节点中，即可生效behaviors:[myBehaviors]//组件的其他节点..
})

在wxml文件中输出试试

<view>在behaviors中定义的用户名是：{{username}}</view>

成功输出behaviors中的username

5、beahviors中所有可用的节点

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

组件和它引用的 behavior中可以包含同名的字段，此时可以参考如下3种同名时的处理规则:
①同名的数据字段(data)

②同名的属性(properties)或方法(methods)

③同名的生命周期函数

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

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

微信小程序开发：自定义组件-behaviors相关推荐

微信小程序配置自定义组件代码按需注入 lazyCodeLoading
微信小程序配置自定义组件代码按需注入 lazyCodeLoading 官方网址在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...
微信小程序的自定义组件（2）
文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...
微信小程序（自定义组件）
文章目录自定义组件创建自定义组件引用组件组件和页面的区别自定义组件的样式样式隔离修改样式隔离选项组件的data和methods 组件的properties 数据监听使用纯数据字段提升 ...
四十八、微信小程序开发系统组件
@Author:Runsen Hello,现在中午,结果写完到了下午.还是再复习学习下小程序的组件,以后开发项目就有了强大的基础.来吧,不学习就是辣鸡. 文章目录组件 scroll-view swi ...
微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段个人认为,自定义组件是区分菜鸟与高手的分水岭第一篇先介绍小程序自定义组件的基本使用自定义组件的使用可以分为如下几个步骤创建组件 ...
微信小程序开发：组件
文章目录小程序中组件的分类常用的视图容器组件 view组件的基本使用 scroll-view组件的基本使用 swiper组件常用的基础内容组件 button按钮的基本使用 image组件的基本使 ...
微信小程序之自定义组件的使用、介绍、案例分享
微信小程序自定义组件介绍自定义组件发开文档类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 自定义组件的使用 1. 创建组件(js,json,wxml,wx ...
微信小程序之自定义组件(微信小程序完结)
微信小程序自定义组件类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 1.1 创建自定义组件类似于页面,一个自定义组件由 json, wxml, wxss ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
微信小程序开发自定义按钮实现分享转发功能
文章目录前言一.详细步骤前言微信小程序,默认的分享功能是通过右上角的 "···" 按钮调用的,那么如何通过自定义按钮调用呢?本文将给出具体方法. 一.详细步骤我采用了mp ...

微信小程序开发：自定义组件-behaviors

微信小程序开发：自定义组件-behaviors相关推荐

最新文章

热门文章