小程序的应用、页面、组件生命周期(超全版)

小程序生命周期
  1. 应用的生命周期
  • onLaunch: 初始化小程序完成时触发,且全局只触发一次;

  • onShow: 小程序初始化完成(启动)或从后台切换到前台显示时触发;

  • onHide: 小程序从前台切换到后台隐藏时触发(如切换到其他app中);

  • onError: 小程序发生脚本错误或者api调用失败的时候,会触发 onError 并带上错误信息;

  • onPageNotFound:小程序要打开的页面不存在的时候触发;

  • onUnhandledRejection:小程序有未处理的 Promise 拒绝的时候触发;

  • onThemeChange:系统切换主题的时候触发。

生命周期说明
onLaunch小程序初始化完成时触发,全局只触发一次
onShow小程序启动,或从后台进入前台显示时触发
onHide小程序从前台进入后台时触发
onError小程序发生脚本错误或 API 调用报错时触发
onPageNotFound小程序要打开的页面不存在时触发
onUnhandledRejection小程序有未处理的 Promise 拒绝时触发
onThemeChange系统切换主题时触发
  1. 页面的生命周期
  • onLoad: 页面加载(加载一次) 获取到导航参数,数据请求
  • onShow: 页面显示,
  • onReady: 页面加载完成(加载一次)
  • onHide: 页面隐藏
  • onUnload: 页面销毁
生命周期说明作用
onLoad生命周期回调—监听页面加载发送请求获取数据
onShow生命周期回调—监听页面显示请求数据
onReady生命周期回调—监听页面初次渲染完成获取页面元素(少用)
onHide生命周期回调—监听页面隐藏终止任务,如定时器或者播放音乐
onUnload生命周期回调—监听页面卸载终止任务

3.组件生命周期

  • created:组件实例刚刚被创建好的时候触发;

  • attached:当组件完全初始化完毕、进入页面节点树之后被触发;

  • ready:当组件在视图层布局完成之后被触发;

  • moved:在组件实例被移动到节点树另一个位置的时候被触发;

  • detached:在组件离开页面节点树之后被触发;

  • error:每当组件方法中抛出错误的时候被触发。

生命周期说明
created生命周期回调—监听页面加载
attached生命周期回调—监听页面显示
ready生命周期回调—监听页面初次渲染完成
moved生命周期回调—监听页面隐藏
detached生命周期回调—监听页面卸载
error每当组件方法抛出错误时执行

执行顺序

应用的⽣命周期执行过程

  • ⽤户⾸次打开⼩程序,触发 onLaunch(全局只触发⼀次)
  • ⼩程序初始化完成后,触发 onShow ⽅法,监听⼩程序显示
  • ⼩程序从前台进⼊后台,触发 onHide ⽅法
  • ⼩程序从后台进⼊前台显示,触发 onShow ⽅法
  • ⼩程序后台运⾏⼀定时间,或系统资源占⽤过⾼,会被销毁

⻚⾯⽣命周期的执行过程:

  • ⼩程序注册完成后,加载⻚⾯,触发 onLoad ⽅法
  • ⻚⾯载⼊后触发 onShow ⽅法,显示⻚⾯
  • ⾸次显示⻚⾯,会触发 onReady ⽅法,渲染⻚⾯元素和样式,⼀个⻚⾯只会调⽤⼀次
  • 当⼩程序后台运⾏或跳转到其他⻚⾯时,触发 onHide ⽅法
  • 当⼩程序由后台进⼊到前台运⾏或重新进⼊⻚⾯时,触发 onShow ⽅法
  • 当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚ wx.navigateBack(),触发 onUnload

当存在应用生命周期和页面周期的时候,相关的执行顺序如下:

  • 打开小程序:(App)onLaunch -> (App)onShow -> (Pages)onLoad -> (Pages)onShow -> (pages)onReady
  • 进入下一个页面:(Pages)onHide -> (Next)onLoad -> (Next)onShow -> (Next)onReady
  • 返回上一个页面:(curr)onUnload --> (pre)onShow
  • 离开小程序:(App)onHide
  • 再次进入:
    • 小程序未销毁:(App)onShow -> (Pages)onLoad -> (Pages)onShow -> (pages)onReady
    • 小程序被销毁:(App)onLaunch -> (App)onShow -> (Pages)onLoad -> (Pages)onShow -> (pages)onReady

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/654153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务攻防-开发组件安全JacksonFastJson各版本XStreamCVE环境复现

知识点 1、J2EE-组件Jackson-本地demo&CVE(数据处理) 2、J2EE-组件FastJson-本地demo&CVE(数据处理) 3、J2EE-组件XStream-本地demo&CVE(数据处理) 章节点: 1、目标判断-端口扫描…

浅谈桌面云

桌面云是一种通过网络将可伸缩、弹性的共享物理或虚拟资源池按需供应和交付桌面的云服务模式。桌面操作系统运行于共享物理或虚拟资源池,用户可使用瘦客户机端或其他任何与网络相连的设备(即终端设备,包括云终端、笔记本、普通PC、智能终端等…

脉宽调制器

1. pwm脉宽调制器 脉宽调制器: 一种硬件设备, 用于 动态调制 方波 的 一些属性, 方波的周期,频率,占空比 占空比? : 有效电平占 整个周期的比值 可以使用PWM 控制功率, 控制频率 用于 开关电源 或 逆变器 1.1 原理 PWM原理: 如图所示 本质就是一个定时器: 由原理…

【玩转Node.JS】=>(内置文件系统)fs模块

文章目录 概念:文件写入writeFile (异步写入)writeFileSync(同步写入)appendFile (异步追加写入)appendFileSync(同步追加写入)createWriteStream (文件流式写…

抗锯齿 opencv

目录 puttext line函数 puttext import cv2# 读取图像 img cv2.imread(image.jpg)# 写中文 cv2.putText(img, 中文, (50, 50), cv2.FONT_HERSHEY_SIMPLEX, 1, (255, 0, 0), 2, cv2.LINE_AA)# 显示图像 cv2.imshow(image, img) cv2.waitKey(0) cv2.destroyAllWindows() lin…

服务攻防-开发框架安全SpringBootStruts2LaravelThinkPHPCVE复现

知识点: 1、PHP-框架安全-Thinkphp&Laravel 2、J2EE-框架安全-SpringBoot&Struts2 章节点: 1、目标判断-端口扫描&组合判断&信息来源 2、安全问题-配置不当&CVE漏洞&弱口令爆破 3、复现对象-数据库&中间件&开发框架&am…

Spring Boot通过配置文件支持数据库自定义表名

直接上干货: 例如一个叫xxx的项目,yml文件里加上这段 xxxproject:db:xxxTable: xxx_dbname #自定义的数据库表名创一个Configuration类放表名和Mapper // XxxProjectAutoConfiguration.javaConfiguration MapperScan(basePackages "cn.com.xxxp…

Vue3-插槽(本质也是组件间的交流)

默认插槽 当你在父组件中,有标签需要插入子组件中显示,就需要默认插槽 具名插槽 当你在父组件中,有多个标签需要放置子组件的不同位置时,就需要具名插槽 具名-----》 v-slot:s2 作用域插槽 父组件在插槽中想要使用子组件的值&…

Less-1(sqlmap自动注入攻击)--sqli

环境准备 打开火狐浏览器,进入sqli第一关的页面 工具准备 sqlmap 参数解释 -u URL 指定目标URL进行注入测试。--dataDATA指定POST请求的数据进行注入测试--cookieCOOKIE指定用于身份验证的cookie进行注入测试-p PARAMETER指定要测试的参数--levelLEVEL设置测试的深…

你不知道的Tomcat

Tomcat基本概念 Tomcat是一个Servlet容器,也是一个web容器。我们的请求通过浏览器进入到Tomcat,Tomcat再把请求分发对应的Servlet。 Tomcat核心组件 Connector: 连接器负责处理进入Tomcat的传入连接和请求,然后将它们传递给Server服务对象中…

Qt无边框窗口拖拽和阴影

先看下效果: 说明 自定义窗口控件的无边框,窗口事件由于没有系统自带边框,无法实现拖拽拉伸等事件的处理,一种方法就是重新重写主窗口的鼠标事件,一种时通过nativeEvent事件处理。重写事件相对繁琐,我们这里推荐nativeEvent处理。注意后续我们在做win平…

MySQL知识点总结(二)——explain执行计划、SQL优化

MySQL知识点总结(二)——explain执行计划、SQL优化 explain执行计划typepossible_keyskeysextra SQL优化SQL优化的流程SQL优化技巧范围查询优化排序优化分组查询优化distinct优化分页查询优化join关联查询优化排序分页 关联查询分组 关联查询 排序in与…

手把手带你Git入门,从下载到精通,常用git命令

文章目录 Git概述什么是GitGit历史Git是什么 为什么要使用Git什么是版本控制系统 Git和SVN对比SVN集中式SVN优缺点 Git分布式Git优缺点 Git工作流程四个工作区域工作流程 Git下载与安装下载window版下载64位软件包安装Git Git基础环境配置设置用户信息查看配置信息 文件的两种状…

$.ajax()方法总结

$.ajax()方法总结 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,今天我们将深入探讨前端开发中常用的异步请求方法之一——$.ajax()方法,并总结其使用技巧和一些常见场景。 1. 什么是$.ajax()方法? $.aj…

Leetcode 3021. Alice and Bob Playing Flower Game

Leetcode 3021. Alice and Bob Playing Flower Game 1. 解题思路2. 代码实现 题目链接:3021. Alice and Bob Playing Flower Game 1. 解题思路 这一题真心很蠢,事实上就是只要 x y xy xy为奇数Alick就能赢,因此只要看在给定的 m , n m,n …

mysql中一个中文字符占几个字节,怎么验证

一,长度取决于字符集编码 在MySQL中,一个中文字符所占用的字节数取决于你使用的字符集(Character Set)。 1,对于UTF-8字符集,一个中文字符通常占3个字节; 2,而对于GBK等双字节字符集…

ES6.8.6 创建索引配置分词器、映射字段指定分词器、查询数据高亮显示分词结果(内置分词器、icu、ik、pinyin分词器)

文章目录 ES环境内置分词器,以simple分词器示例查询创建索引simple_news,修改分词器为simple插入模拟数据分词查询:返回通过分词查询到的结果、高亮分词分词匹配:写一次示例,其他分词和匹配思路基本一致第一步&#xf…

DMA 和 零拷贝技术 到 网络大文件传输优化

文章目录 DMA 控制器的发展无 DMA 控制器 IO 过程DMA 控制器 传统文件传输性能有多糟糕?如何优化文件传输性能零拷贝技术mmap writesendfileSG-DMA(The Scatter-Gather Direct Memory Access) 零拷贝技术的应用 大文件传输应该用什么方式Pag…

后台管理系统模板搭建/项目配置

1 项目初始化 一个项目要有统一的规范,需要使用eslintstylelintprettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 1.1 环境准备 1…

idea 创建 spring boot

1.创建步骤 2. 编码添加 2.1 这是自动生成的启动函数 package com.example.comxjctest4;import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication;SpringBootApplication public class Application {publi…