微信小程序开发（第四期）：自定义组件的创建引用、组件样式隔离、数据监听器、监听器案例、纯数据字段 && 组件的生命周期函数、 自定义插槽 、组件通信技术、behaviors共享、同名子弹覆盖规则

最新推荐文章于 2024-08-19 15:51:24 发布
最新推荐文章于 2024-08-19 15:51:24 发布
阅读量620 收藏 11
点赞数 15
分类专栏： 微信小程序开发 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forever_hopeful/article/details/137427188
版权

文章目录

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

一、创建自定义组件

在这里插入图片描述

二、局部引用组件

在这里插入图片描述

三、 全局引用组件

在这里插入图片描述

四、全局引用和局部引用的应用场景

在这里插入图片描述

  • 单个页面使用局部引用，多个页面使用全局引用。

五、组件和页面的区别

在这里插入图片描述

六、 组件样式的隔离

在这里插入图片描述

样式隔离注意点
  • 只有 class 选择器才有样式隔离
    在这里插入图片描述

七、修改组件样式隔离选项

在这里插入图片描述

  • 参数如下:

在这里插入图片描述

八、自定义组件 - 数据、方法、属性

8.1 data - 数据

在这里插入图片描述

8.2 methods - 方法

在这里插入图片描述

8.3 properties - 属性

在这里插入图片描述

九、data 和 properties 的区别

在这里插入图片描述

十、setData修改 properties的数据

在这里插入图片描述

十一、 数据监听器

1. 什么是数据监听器

在这里插入图片描述

2. 数据监听器的基本使用

在这里插入图片描述

3. 监听对象属性的变化

在这里插入图片描述

十二 监听器案例

1. 案例效果

在这里插入图片描述

2. 渲染组件UI 结构

在这里插入图片描述

3. 按钮的事件处理函数

在这里插入图片描述

4. 监听对象属性值的变化

  • 这样就能实现值改变，视图发生变化
    在这里插入图片描述
5. 监听对象属性中所有属性值的变化（代码优化）

在这里插入图片描述

十三、纯数据字段

1. 什么是从数纯数据字段在这里插入图片描述
2. 使用规则

在这里插入图片描述

3. 纯数据字段的使用及代码改造

在这里插入图片描述

  • 这样 rgb就是纯数据字段，不会被页面渲染和逻辑处理，提高页面渲染的性能。

十四、组件的生命周期函数

1. 生命周期函数

在这里插入图片描述

2. 主要的生命周期函数

在这里插入图片描述

3. ilfetimes 节点
  • 采用新的方式进行定义生命周期函数

在这里插入图片描述

十五、组件所在页面的生命周期函数

1. 什么是组件所在页面的生命周期函数

在这里插入图片描述

2. pageLifetimes 节点

在这里插入图片描述

3. 生成随机色

在这里插入图片描述

  • 方法调用
    在这里插入图片描述

十六、 自定义组件 - 插槽

1. 什么是 插槽

在这里插入图片描述

单插槽的使用

在这里插入图片描述

3. 启用多个插槽

在这里插入图片描述

4. 使用多个插槽

在这里插入图片描述

在这里插入图片描述

十七、组件通信

1. 组件通信的三种方式

在这里插入图片描述

2. 属性绑定

在这里插入图片描述

  • 子组件进行使用
  • 在这里插入图片描述
3. 事件绑定 通信

在这里插入图片描述

步骤一：

在这里插入图片描述

步骤二：在这里插入图片描述
步骤三：

在这里插入图片描述

步骤四：

在这里插入图片描述

4. 组件实例通信

在这里插入图片描述

十八、behaviors

1. 什么是 behaviors

在这里插入图片描述

2. behaviors 工作方式

在这里插入图片描述

3. 创建 behaviors 共享

在这里插入图片描述

4. 导入 behaviors 并使用

在这里插入图片描述

  • 可用节点如下：

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

总结

在这里插入图片描述

脱发使我稳重
关注
专栏目录
微信小程序（组件的数据监听）
一点一滴
12-23 2万+
// component/my-obs/my-obs.js Component({ /** * 组件的属性列表 */ properties: { dataA:{ type:String, value:'xxxxx', observer:function(newVal,oldVal,change){ console.lo...
微信小程序开发基础知识5----自定义组件
weixin_46027901的博客
07-05 1544
*** 组件的初始数据*/data:{count:0})数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的watch 侦听器。'字段A，字段B':function(字段A的新值，字段B的新值){})概念：纯数据字段指的是那些不用于界面渲染的 data 字段。应用场景:例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。
微信小程序数据监听
Hassan的小博客!
10-12 4025
微信小程序数据监听 类似于vue的watch *人狠话不多，直接代码搞起* 在app.js里定义方法，供全局使用 app.js //设置监听器 setWatcher(data, watch) { Object.keys(watch).forEach(v => { let key = v.split('.'); // 将watch中的属性以'...
【微信小程序】自定义组件 - 数据监听器
最新发布
weixin_40874076的博客
08-19 645
*** 组件的属性列表*/},/*** 组件的初始数据*/data: {rgb:{r:0,g:0,b:0},},/*** 组件的方法列表*/methods: {changR(){})},changG(){})},changB(){})},},})})
微信小程序监听
Smile_sunshine11的博客
08-07 2132
在开发小程序的过程中遇到需要监听值变化，从而执行下一步操作。 某个页面需要监听参数变化，需要在app.js中设置监听器 watch:function(content,obj){ Object.keys(obj).forEach(key => { this.observer(content.data,key,content.data[key],function(value){ obj[key].call(content,value) }) }) },...
微信小程序——事件监听
TianXuab的博客
09-12 5212
在微信小程序中，事件监听是一种机制，用于捕获和处理用户触发的各种交互事件。通过事件监听，开发人员可以编写相应的代码来响应用户的操作，例如点击、滑动、输入等。事件监听的基本原理是将事件与特定的元素或组件关联起来，并绑定相应的回调函数，当该事件被触发时，回调函数会被执行。在小程序中，常见的事件包括tap（点击事件）、slide（滑动事件）、input（输入事件）等。为了实现事件监听，开发人员需要按照以下步骤进行操作：在模板文件（WXML）中，通过给元素或组件添加事件绑定属性，如bindtap。
微信小程序之数据监听器
qq_44821064的博客
06-20 1325
上文介绍了自定义组件中的data,properties,methods节点！接下来我们将使用监听器来监听数据的变化，而做出相应的变化！下面的实验是 n1+n2 = sum 其中用监听器监听n1 和n2的数据变化，当n1，n2改变的时候，sum的值也相应的改变！下面的内容是在data节点中的一个对象rgb 通过改变其中的属性，其建立的wxss样式也跟着改变。即按下创建的3个按钮R, G, B,上方的方框的底色也跟着改变！对象中的属性较少的话 也可以用上图中所示的 具体到每个对象中的属性！
小程序开发-自定义组件及组件的样式规则_自定义组件 - 数据、方法和属性 _数据监听器_纯数据字段_组件的生命周期_插槽_父子组件之间的通信_behaviors
qq_45811054的博客
03-27 1289
小程序开发-自定义组件及组件的样式规则_自定义组件 - 数据、方法和属性 _数据监听器_纯数据字段_组件的生命周期_插槽_父子组件之间的通信_behaviors
微信小程序 四 组件的运用 组件的创建和引用、组件的样式、组件的数据与方法和属性、数据监听器（及他的案例）、纯数据字段、组件和组件所在页面的生命周期、插槽、父子组件之间同、behaviors
m0_55170432的博客
07-07 369
1.0 该次学习的总结 能够创建并引用组件 全局引用、局部引用、usingComponents 能够知道如何修改组件的样式隔离选项 options -> styleIsolation（ isolated, apply-shared, shared） 能够知道如何定义和使用数据监听器 observers 能够知道如何定义和使用纯数据字段 options -> pureDataPattern 能够知道实现组件父子通信有哪3种方式 属性绑定、事件绑定、this.selectComp
小程序 | 自定义组件 + 组件的创建和使用 + 自定义组件数据，方法和属性 + 数据监听器 + 纯数据字段 + 组件的生命周期 + 组件所在页面的生命周期+插槽+父子组件间通信+behaviors
不爱吃菜的菜菜的博客
10-05 506
组件的创建与引用 创建组件 引用组件 局部引用组件 全局引用组件 全局引用 VS 局部引用 组件和页面的区别 自定义组件的样式 组件样式隔离 组件样式隔离的注意点 修改组件的样式隔离选项 自定义组件中的数据、方法和属性 data 数据 methods 方法 properties 属性 data 和 properties 的区别 使用 setData 修改 properties 的值 数据监听器 数据监听器的基本用法 监听对象属性的变化 监听对象中所有属性的变化 案例 纯数据字段 什么是纯数据字段 使用规则
【微信小程序开发】自定义tabBar案例（定制消息99+小红心）_微信小程序 van-tabbar-item 动态设置info
2401_84182271的博客
04-17 1300
其实我们都需要配置好tabBar的，不管是不是自定义都需要在app.json的tarBar节点配置，我们可以自定义配置文件可以tarBar节点配置好完整属性，查看效果在细调，然后我们在创建自定义文件，编写代码，然后将我们刚刚配置的list节点放入的index.js的data中在index.wxml通过循环遍历改list数据实现效果，这种流程有几个好处在版本不兼容时等一些特殊情况，还是能基本显示效果，不用同时两处配置，在app.json节点配置list复制到index.js的data。
微信小程序实现watch监听
11-20
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：监听属性 watch。 虽然watch的滥用会导致性能不佳，但在一些情况下我们还是需要watch，使得代码更加简洁、逻辑更加清晰(其实就是嫌麻烦…)。 小程序实现 类似vue 一样的watch 监听数据 将方法注册到app.js 中也可以使用高级一点的写法 使用装饰器模式将小程序page 重写挂在到生命周期函数上或者挂在页面this 上每次就不需要重新在调用初始化一次。本文对装饰器模式不做介绍这是个思路。等待下次实现 setWatcher(page) { let data = page.data; // 获取pa
微信小程序的数据监听器
实践求真知
09-09 7975
微信小程序
微信小程序实现数据监听
php的绯闻女友
09-02 1080
Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 }, data: { // 这里是一些组件内部数据 //content: 'sdcedc', //主件的数据显示权比behavior高 src:"/image/register-image/a.jpg", ok:false, no:false, pswOk:false, pswNo:false, disa.
微信小程序事件监听方法
A12536365214的博客
07-29 6010
在微信小程序中，事件监听是通过在WXML文件中使用属性来实现的。bind。
微信小程序 - 监听globalData
CSU_Zipple的博客
03-10 4622
参考文章： https://www.cnblogs.com/BestMePeng/p/xcx_watch_globaldata.html 前言 由于项目上线在即，发现了项目设计上的缺陷。项目的所有公用数据都存放在globalData中，想据此实现一个类似Vuex的状态管理程序。由于小程序的页面渲染需要手动触发，因此可以考虑实现一个对globalData的监听程序。 代码 在app.js中 watc...
微信小程序全局变量监听
weixin_59720627的博客
03-29 1218
微信小程序实现全局变量监听，多页面间数据传输。
微信小程序开发实用技巧：自定义组件与换肤方案
在微信小程序开发中，掌握一些实用技巧能够提高开发效率并满足特定需求。本文将重点介绍自定义组件的使用方法以及如何实现“一键换肤”功能。 1. 自定义组件的使用： - 创建组件：在项目结构中，通过右键新建一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值