您现在的位置是:首页 >技术杂谈 >【微信小程序】详解behaviors,如何使用behaviors网站首页技术杂谈

【微信小程序】详解behaviors,如何使用behaviors

大熊李子 2023-06-07 00:00:02
简介【微信小程序】详解behaviors,如何使用behaviors

在这里插入图片描述

一,behaviors

1.1什么是 behaviors?

behaviors 是小程序中, 用于实现组件间代码共享的特性 ,类似于 Vue.js 中的 “mixins”。

1.2behaviors 的工作方式

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

1.3创建 behavior

调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用:在根目录下新建一个behaviors文件夹在文件夹下创建一个my-behavior.js

1.4导入并使用 behavior

在组件中,使用 require() 方法导入需要的 behavior, 挂载后即可访问 behavior 中的数据或方法

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

列入我们想要在test5中使用my-behavior

在test5中:

// components/test5/test5.js
//1.使用require() 导入需要的自定义behavior模块
const myBehavior = require('../../behaviors/my-behavior')

在test5.wxml 使用behavios中定义的数据

<!--components/test5/test5.wxml-->
<view>子组件中,count值是:{{count}}</view>
<button bindtap="addCount">+1</button>
<view>在behavior中定义的用户名是:{{username}}</view>
Component({
//2. 将导入的behavior 实例对象,挂载到behaviors数组节点中,即可生效
behaviors:[myBehavior],

})

1.5 behavior 中所有可用的节点

可用的节点类型是否必填描述
propertiesObject Map同组件的属性
dataObject同组件的数据
methodsObject同自定义组件的方法
detachedFunction生命周期函数
behaviorsString Array引入其它的 behavior
createdFunction生命周期函数
attachedFunction生命周期函数
readyFunction生命周期函数
movedFunction生命周期函数

同名字段的覆盖和组合规则
组件和它引用的 behavior 中 可以包含同名的字段 ,此时可以参考如下 3 种同名时的处理规则:

  1. 同名的数据字段 (data)
  2. 同名的属性 (properties) 或方法 (methods)
  3. 同名的生命周期函数

关于详细的覆盖和组合规则,大家可以参考微信小程序官方文档给出的说明:小程序官方文档

总结

  1. 能够创建并引用组件 全局引用、局部引用、usingComponents
  2. 能够知道如何修改组件的样式隔离选项 options -> styleIsolation( isolated, apply-shared, shared)
  3. 能够知道如何定义和使用数据监听器 observers
  4. 能够知道如何定义和使用纯数据字段 options -> pureDataPattern
  5. 能够知道实现组件父子通信有哪 3 种方式 属性绑定、事件绑定、this.selectComponent(’ id或class选择器’)
  6. 能够知道如何定义和使用behaviors 调用 Behavior() 构造器方法
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。