微信小程序开发入门与实战(组件生命周期)

简介: 微信小程序开发入门与实战(组件生命周期)

自定义组件 - 纯数据字段


1、什么是纯数据字段


  1. 概念:纯数据字段指的是那些不用于界面渲染的 data 字段。
  2. 应用场景:例如有些情况下,某些 data 中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

好处:纯数据字段有助于提升页面更新的性能。

options:{
pureDataPattern:/^_/  },
/***组件的属性列表*/properties: {
  },
/***组件的初始数据*/data: {
_rgbValue:{
r:0,
g:0,
b:0      },
funllColor:'0,0,0' },

2、使用规则


在 Component 构造器的 options 节点中,指定 pureDataPattern 为一个正则表达式,字段名符合这个正则表达式的字段将成为纯数据字段

代码如 👇

options:{
pureDataPattern:/^_/},
/***组件的属性列表*/properties: {
},
/***组件的初始数据*/data: {
_rgbValue:{
r:0,
g:0,
b:0    },
funllColor:'0,0,0'},

3、使用纯数据字段改造数据监听器案例


lifetimes:{
created(){
console.log("created");
  },
attached(){
console.log("attached");
  }
},

自定义组件 - 组件的生命周期


1、组件全部的生命周期函数


小程序组件可用的全部生命周期如下表所示:

image.png

2、组件主要的生命周期函数


在小程序组件中,最重要的生命周期函数有 3 个,分别是 created、attached、detached 。它们各自的特点

如下:

① 组件实例刚被创建好的时候,created 生命周期函数会被触发


此时还不能调用 setData

通常在这个生命周期函数中,只应该用于给组件的 this 添加一些自定义的属性字段

② 在组件完全初始化完毕、进入页面节点树后, attached 生命周期函数会被触发

此时, this.data 已被初始化完毕

这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)

③ 在组件离开页面节点树后, detached 生命周期函数会被触发

退出一个页面时,会触发页面内每个自定义组件的 detached 生命周期函数

此时适合做一些清理性质的工作

3、lifetimes 节点


在小程序组件中,生命周期函数可以直接定义在 Component 构造器的第一级参数中(淘汰),可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)。

代码如 👇

Component({
lifetimes:{
created(){
console.log("created");
    },
attached(){
console.log("attached");
    }
  },
)

最后



image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png

相关文章
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
145 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
1342 11
技术小白如何利用DeepSeek半小时开发微信小程序?
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
微信小程序开发全流程:从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者,涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
1209 11
让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
本文介绍如何通过DeepSeek计算机视觉技术,赋予小程序“看懂世界”的能力。从构建视觉感知系统、训练专属视觉词典到创造会思考的界面,详细讲解了实现智能相册、植物识别器和老旧照片修复等功能的步骤。最后探讨性能优化与安全合规要点,展望未来视觉智能应用的无限可能。
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
170 0
在线课堂+工具组件小程序uniapp移动端源码
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
253 12
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
197 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等