【微信小程序】详解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 种同名时的处理规则:

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

关于详细的覆盖和组合规则,大家可以参考微信小程序官方文档给出的说明:小程序官方文档文章来源地址https://www.toymoban.com/news/detail-422738.html

总结

  1. 能够创建并引用组件 全局引用、局部引用、usingComponents
  2. 能够知道如何修改组件的样式隔离选项 options -> styleIsolation( isolated, apply-shared, shared)
  3. 能够知道如何定义和使用数据监听器 observers
  4. 能够知道如何定义和使用纯数据字段 options -> pureDataPattern
  5. 能够知道实现组件父子通信有哪 3 种方式 属性绑定、事件绑定、this.selectComponent(’ id或class选择器’)
  6. 能够知道如何定义和使用behaviors 调用 Behavior() 构造器方法

到了这里,关于【微信小程序】详解behaviors,如何使用behaviors的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 behaviors

    behaviors 是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中。 每个组件可以引用多个 behavior,behavior 也可以引用其它 behavior。 调

    2024年02月09日
    浏览(25)
  • 微信小程序behavior

    概念:用与小程序中组件间代码共享的特性,类似于一些编程语言的 “mixins”, “traits” 1、每一个behavior 可以包含一些属性,数据,生命周期函数,方法 2、在组件中引用它时,它的属性,数据和方法会被合并到组件中,生命周期函数也会在对应的时机被调用 3、每个组件可

    2024年02月09日
    浏览(29)
  • 微信小程序文本组件text使用详解-微信小程序系统学习攻略​

    也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。 在微信小程序中,组件 text 用来显示文本,基本使用代码如下: 1 基本样式设置 基本使用还是比较简单的,下面咱们来论述一下文本样式的设置,首先是给他设置一个 class 然后在对应的 wxss 文件中编写

    2023年04月13日
    浏览(35)
  • 微信小程序(详解及简单使用)

    目录 1.结构分布 1.框架全局文件 1.1.pages( 页面路径列表 ) 1.2.window( 全局的默认窗口表现 ) 1.3.tabBar( 底部 tab 栏的表现 )  2.使用view进行页面布局 3.组件的使用 3.1基础组件 3.1.1 icon 3.1.2 progress 3.1.3 text      3.2表单组件 3.2.1.button 3.2.2.checkbox 3.2.3.checkbox-group 3.2.4.radio 3.

    2024年02月02日
    浏览(23)
  • 微信小程序使用npm引入三方包详解

    1 前言 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装第三方包。 此文档要求开发者们对 npm 有一定的了解,因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm,请翻阅 官方 npm 文档 进行学习。 2 微信小程序npm环境搭建

    2024年02月11日
    浏览(31)
  • 微信小程序使用 npm 包,举例图文详解

    下载安装,配置npm环境变量,不懂得可以上网查教程,本文不再描述 1、初始化 package.json 2、勾选允许使用 npm(新版微信小程序开发工具忽略这一步) 3、下载 npm 包 4、构建 npm 不清楚的可以往下看详解 1、初始化 package.json 在小程序开发工具\\\"终端\\\"输入: 执行命令成功后自动

    2023年04月09日
    浏览(38)
  • 微信小程序如何使用SCSS

    微信小程序开发者工具集成了 vscode 编辑器,可以使用 vscode 中众多的插件,为我们开发微信小程序提供了极大的便利。我们可以借助 easysass 插件实现在微信开发中使用 sass,安装步骤如下。 1,在 vscode 中安装 easysass 插件。 2,导入已安装的vscode扩展 接下来打开微信开发者工

    2024年02月12日
    浏览(35)
  • 微信小程序如何使用websocket

    在智能手机时代,无不体现着小程序的必要性。WeChat小程序作为目前最受欢迎的小程序平台之一,已成为很多人的首选开发平台。那么如何使用websocket来开发一个WeChat小程序呢?今天我们就来一起探讨一下。 首先,让我们回顾一下WebSocket的基本概念。WebSocket是一种在单个TC

    2024年02月05日
    浏览(32)
  • 微信小程序使用van-steps详解

    vant官网代码如下 问题1:官网代码用在小程序上无效果 这里发现小程序的vant包里有 steps 没有step 因此官网写法无效。 解决方法 正确写法如下所示 页面wxml js 最终效果 问题2:steps数组中如何设置其他字段 (1)找到vant的包 (2)找到steps的index.wxml文件 (3)下面红框里是ste

    2024年02月16日
    浏览(29)
  • 微信小程序新版渲染引擎Skyline的使用详解

    今年年初,在官方文档上看到小程序团队要推出一款性能逼近原生的渲染引擎Skyline,就一直在关注。刚好最近打算做一款新的阅读小程序,作为一名独立开发者,对于性能和用户体验的追求是永无止境的,于是我决定用纯Skyline打造这款小程序。 当然,这个项目里面所用到的

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包