微信小程序_16,组件的生命周期
组件的全部生命周期函数:
小程序可用的全部生命周期如下表所示:
生命周期函数 | 参数 | 描述说明 |
---|---|---|
created | 无 | 在组件实例刚刚被创建时执行 |
attached | 无 | 在组件实例进入页面节点树时执行 |
ready | 无 | 在组件在视图层布局完成后执行 |
mooved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
detached | 无 | 在组件实例被从页面节点树移除时执行 |
error | ObjectError | 每当组件抛出错误时执行 |
组件主要的生命周期函数:
在小程序中,最重要的生命周期函数有3个,分别是created,attached,detached.它们各自的特点如下:
1.组件实例刚被创建好的时候,created生命周期函数会被触发
- 此时还不能调用setData
- 通常在这个生命周期函数中,只应该用于给组件的this添加一些自定义的属性字段
2.在组件完全初始化完毕,刚进入页面节点树后,attached生命周期函数会被触发
- 此时,this.data已被初始化完毕
- 这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
3.在组件离开页面节点树后,detached生命周期函数会被触发
- 退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
- 此时适合做一些清理性质的工作
定义组件的生命周期函数:
lifetimes节点:
在小程序中,生命周期函数可以直接定义在Component构造器的第一级参数中,可以在lifetimes字段内进行声明(这是推荐的方式,其优先级最高),示例代码如下:
Component({/*** 组件的属性列表*/properties: {},// 推荐用法:lifetimes: {// 在组件实例进入页面节点树时执行attached() {},// 在组件实例被从页面节树移除时执行detached() {}},// 以下是旧式的定义方式:// 在组件实例进入页面节点树时执行attached() {},// 在组件实例被从页面节树移除时执行detached() {},
})
新旧两种方式都存在时,会优先使用新的,往后不建议使用旧的方式了
什么是组件所在页面的生命周期函数:
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期
例如:每当触发页面的show生命周期函数的时候,我们希望能够重新生成一个随机的RGB颜色值:
在自定义组件中,组件所在的页面的生命周期函数有如下3个,分别是:
生命周期函数 | 参数 | 描述 |
---|---|---|
show | 无 | 组件所在的页面被展示时执行 |
hide | 无 | 组件所在的页面被隐藏时执行 |
resize | Object Size | 组件所在的页面尺寸变化时执行 |
pageLifetimes
组件所在页面的生命周期函数,需要定义在pageLifetimes节点中,示例代码如下:
// components/lifetimes/lifetimes.js
Component({/*** 组件的属性列表*/properties: {},pageLifetimes: {show: function () {console.log('页面被展示了');},hide: function () {console.log('页面被隐藏了');},resize: function () {console.log('页面变化了');},},
})
生成随机的RGB颜色值:
Component({pageLifetimes: {show: function () {console.log('页面被展示了,生成随机颜色');this._randomColor()},hide: function () {console.log('页面被隐藏了');},resize: function () {console.log('页面变化了');},},// 生成随机RGB颜色值:_randomColor() {this.setData({_rgb: {r: Math.floor(Math.random() * 256),g: Math.floor(Math.random() * 256),b: Math.floor(Math.random() * 256),}})}
})
运行:
这里就是组件监听了页面的状态,在每次进入页面时,生成一个随机的RGb值,
微信小程序_16,组件的生命周期相关推荐
- 【微信小程序】组件的生命周期及自定义组件
文章目录 组件的生命周期 自定义组件的生命周期函数 执行顺序 组件常用的生命周期函数 lifetimes节点 组件所在页面的生命周期函数 pageLifetimes节点 自定义组件 创建自定义组件 创 ...
- 微信小程序的组件的生命周期
一 组件全部的生命周期函数 小程序组件可用的全部生命周期如下表所示. 二 组件主要的生命周期函数 在小程序组件中,最重要的生命周期函数有 3 个,分别是 created.attached.detach ...
- 微信小程序父子组件传值问题
微信小程序父子组件传值问题 把自己碰到的问题或者学到的东西在这里总结,慢慢积累 在父子组件传值时,我发现子组件竟然拿不到父组件传过来的值. 我指的拿不到父组件的值,是指在子组件的生命周期created ...
- 微信小程序之组件 —— 微信小程序教程系列(19)
什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...
- 微信小程序--自定义组件(超详细 从新建到使用)
微信小程序–自定义组件 微信小程序官网介绍! 本文提供给急需使用自定义组件人群,以下是博主个人理解和案例!可以辅助官网来看 介绍: 从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所 ...
- 微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用 组件与模块类似,实现了功能的复用,提高开发速率,减少代码量 在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者 导航栏等 . ...
- 小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下 微信小程序自定义组件 微信小程序支持自定义组件 下方的目录 其中,components为组件目录,nodemodule ...
- 一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件 更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
最新文章
- java ojdbc 还需要装 oracle client 吗,c# 连接Oracle数据库必须安装客户端吗
- selenium的使用教程1
- 关于setTimeout和setInterval的函数参数问题
- 在vb中实现真正锁定的带自定义菜单的文本控件
- android自定义矩形框,Android中ImageCropper矩形、圆形 裁剪框的实现方法
- 问题:anaconda 中 tensorflow 与tensorflow-gpu 在tf.image.resize_images()上的区别
- Java并发AtomicIntegerArray类
- Kubernetes 小白学习笔记(27)--kubernetes的运维-Trouble Shooting方法
- WEB前端开发规范文档示例
- css绘制卡券优惠券_使用css创建一个优惠券的方法
- android studio深色模式,Xamarin 中的深色模式
- 记一次公司被勒索病毒攻击事迹,上上下下咬牙切齿
- 计算机如何连接隐藏的无线网络,笔记本电脑怎么连接隐藏的无线网wifi
- 【jzoj 4727】【NOIP2015模拟10.28B组】终章-剑之魂 {贪心}
- Fio 命令生产环境测试
- python变量名必须以字母或下划线开头不区分字母大小写_Python 变量名必须以字符或下划线开头,并且区分字母大小写。_学小易找答案...
- 电荷量Q=CU=It=Ne;左右手定则总结+安培定律 2020-3-15
- 使用声网的RTM SDK轻松给angular应用加上实时聊天功能
- 中国智能制造系统架构(IMSA模型)
- AI如何与票据交易场景结合