【功能上新】小程序自定义组件observers正式发布!

简介: 【功能上新】小程序自定义组件observers正式发布!

“在原有的开发过程中,想要做数据观测,需要在自定义组件的生命周期中加入一些字段,来说明我希望观测哪一个,整个操作比较麻烦,通过自定义组件的observers功能,就可以解决这个问题。”

在5月支付宝开发者日上,支付宝开发者日讲师元凛曾经预告过小程序自定义组件的数据变化观测器(observers)功能,现在正式发布!



解决什么问题?

假设你接到一个诉求,需要在小程序的入口页判断用户是否为新人或者特殊身份用户,以展示对应的专属福利页面,这时候就需要调用身份判断的接口,再展示页面。

以前自定义组件想要实现根据字段变化,动态调用接口,只能通过如derivedDataFromProps / didUpdate来判断,加字段去判断处理,开发过程比较难受。



而现在,而现在只要在observers中很简单地去定义我们观测的字段就行。

怎么使用?



如上图所示,我们可以通过观测X/Y的值,让Z随着X/Y的值变化而调整,或者b.c的变化。

我们也支持b.**的写法,就是当b发生时变化时,就会触发你想处理的一些逻辑,当c变化时也会触发。

如果需要观测所有子数据字段的变化,可以使用通配符 **。

Component({
  options: {
    observers: true,
  },
  observers: {
    '**': function() {
      // 每次 setData 都触发
    },
  },
})


同时,数据变化观测器也适用于小程序页面

更详细的接入流程见开发文档

注意事项:
数据变化观测器从小程序基础库版本 2.8.1 开始支持。
数据变化观测器观测的是 setData 涉及到的数据字段,即使这些数据字段的值没有发生变化,数据监听器依然会被触发。
如果在数据变化观测器函数中使用 setData 设置本身观测的数据字段,可能会导致死循环,需要特别留意。
特别地,当观测的字段为**时,观测器对应入参的值将是 {...this.props, ...this.data}。应尽量避免观测 **,会导致性能受影响。
正常情况下,属性或内部数据的变化都会触发对应字段的观测器函数。但同名字段(字段在属性内与内部数据同时存在),则此时只有 setData 会触发对应字段的观测器。因此,应尽量避免属性和内部数据拥有同名字段。
对于同名字段,可使用生命周期函数 deriveDataFromProps 判断属性是否发生变化。


目录
相关文章
|
10天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
2月前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
69 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
114 1
微信小程序:轻松实现时间轴组件
|
3月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
4月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
816 1
|
4月前
|
存储 自然语言处理 小程序
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
156 0
微信小程序多语言切换神器:简繁体切换功能完全指南
|
4月前
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
119 0
微信小程序:自定义关注公众号组件样式