微信小程序开发入门与实战(Behaviors使用)
2023-09-11 14:19:57 时间
@作者 : SYFStrive
@博客首页 : HomePage
📜: 微信小程序
📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗
📌:觉得文章不错可以点点关注 👉:专栏连接🔗
💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞
👉 微信小程序(🔥)
目录
自定义组件 - behaviors
1、什么是 behaviors
behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。
2、behaviors 的工作方式
每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中。每个组件可以引用多个 behavior,behavior 也可以引用其它 behavior。
3、创建 behavior
调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象,供所有的组件使用如 👇
module.exports=Behavior({
data:{
username:'xiaoming'
},
properties:{},
methods:{
}
})
4、导入并使用 behavior
在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据或方法
如 👇
const behaviors=require("../../behaviors/behavios")
// components/text4/text4.js
Component({
behaviors:[behaviors],
})
5、behavior 中所有可用的节点
可用的节点 | 类型 | 是否必填 | 描述 |
---|---|---|---|
properties | Object Map | 否 | 同组件的属性 |
data | Object | 否 | 同组件的数据 |
methods | Object | 否 | 同自定义组件的方法 |
behaviors | String Array | 否 | 引入其它的 behavior |
created | Function | 否 | 生命周期函数 |
attached | Function | 否 | 生命周期函数 |
ready | Function | 否 | 生命周期函数 |
moved | Function | 否 | 生命周期函数 |
detached | Function | 否 | 生命周期函数 |
6、同名字段的覆盖和组合规则
组件和它引用的 behavior 中可以包含同名的字段,此时可以参考如下 3 种同名时的处理规则:
① 同名的数据字段 (data)
② 同名的属性 (properties) 或方法 (methods)
③ 同名的生命周期函数
Behaviors官方教程链接
总结
① 能够创建并引用组件
- 全局引用、局部引用、usingComponents
② 能够知道如何修改组件的样式隔离选项
- options 👉 styleIsolation( isolated, apply-shared, shared)
③ 能够知道如何定义和使用数据监听器
- observers
④ 能够知道如何定义和使用纯数据字段
- options 👉 pureDataPattern
⑤ 能够知道实现组件父子通信有哪3种方式
- 属性绑定、事件绑定、this.selectComponent(’ id或class选择器’)
⑥ 能够知道如何定义和使用behaviors
- 调用 Behavior() 构造器方法
最后
本文到这里就结束了,大佬们的支持是我持续更新的最大动力,希望这篇文章能帮到大家💪
下篇文章再见ヾ( ̄▽ ̄)ByeBye
相关文章
- .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块
- 微信小程序 - 点击导航栏标签切换变色(导航栏当前hover样式)
- Vue - PC 端列表下拉页面触底加载分页数据,监听浏览器屏幕触底事件,类似uni-app微信小程序的onReachBottom()页面触底生命周期函数(监听屏幕触底事件,实现懒加载效果)
- 用Python发送通知到企业微信,实现消息推送
- 《微信小程序:开发入门及案例详解》—— 1.2 接入流程
- 《微信小程序:开发入门及案例详解》—— 1.4 小结
- 《微信小程序:开发入门及案例详解》—— 3.2 浮动和定位
- 《微信小程序:开发入门及案例详解》—— 3.3 Flex布局
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的
- 微信小程序基础
- 史诗手册!微信小程序新手自学入门宝典!你想要的都在这里
- 《微信小程序开发入门精要》——第1章,第1.6节开发第一个微信小程序
- 《微信小程序开发入门精要》——第2章,第2.1节水平排列
- 《微信小程序开发入门精要》——第2章,第2.5节水平排列对齐方式
- 微信小程序开发入门01
- 微信小程序:在父组件中修改子组件的样式
- 微信小程序入门(六)
- 微信小程序入门(四)
- 微信小程序入门(三)
- 微信小程序开发入门与实战(数据、事件、条件)
- 微信几千好友是怎么来的?
- 微信小程序项目入门实战(App)基础篇-Array老师-专题视频课程