您现在的位置是:首页 >技术杂谈 >【微信小程序】详解behaviors,如何使用behaviors网站首页技术杂谈
【微信小程序】详解behaviors,如何使用behaviors
简介【微信小程序】详解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 中所有可用的节点
可用的节点 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object Map | 否 | 同组件的属性 |
data | Object | 否 | 同组件的数据 |
methods | Object | 否 | 同自定义组件的方法 |
detached | Function | 否 | 生命周期函数 |
behaviors | String Array | 否 | 引入其它的 behavior |
created | Function | 否 | 生命周期函数 |
attached | Function | 否 | 生命周期函数 |
ready | Function | 否 | 生命周期函数 |
moved | Function | 否 | 生命周期函数 |
同名字段的覆盖和组合规则
组件和它引用的 behavior 中 可以包含同名的字段 ,此时可以参考如下 3 种同名时的处理规则:
- 同名的数据字段 (data)
- 同名的属性 (properties) 或方法 (methods)
- 同名的生命周期函数
关于详细的覆盖和组合规则,大家可以参考微信小程序官方文档给出的说明:小程序官方文档
总结
- 能够创建并引用组件 全局引用、局部引用、usingComponents
- 能够知道如何修改组件的样式隔离选项 options -> styleIsolation( isolated, apply-shared, shared)
- 能够知道如何定义和使用数据监听器 observers
- 能够知道如何定义和使用纯数据字段 options -> pureDataPattern
- 能够知道实现组件父子通信有哪 3 种方式 属性绑定、事件绑定、this.selectComponent(’ id或class选择器’)
- 能够知道如何定义和使用behaviors 调用 Behavior() 构造器方法
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。