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

小程序生命周期
  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

相关推荐

  1. 程序应用页面组件生命周期

    2024-01-30 16:52:01       58 阅读
  2. 程序-生命周期(2) 应用周期/页面周期

    2024-01-30 16:52:01       32 阅读
  3. 程序生命周期以及页面生命周期

    2024-01-30 16:52:01       31 阅读
  4. [程序开发] 组件生命周期

    2024-01-30 16:52:01       43 阅读
  5. 程序生命周期

    2024-01-30 16:52:01       30 阅读
  6. uni-app生命周期应用页面生命周期

    2024-01-30 16:52:01       33 阅读
  7. 程序生命周期

    2024-01-30 16:52:01       59 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-30 16:52:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-30 16:52:01       101 阅读
  3. 在Django里面运行非项目文件

    2024-01-30 16:52:01       82 阅读
  4. Python语言-面向对象

    2024-01-30 16:52:01       91 阅读

热门阅读

  1. 获取文件夹下所有文件路径

    2024-01-30 16:52:01       56 阅读
  2. 代码随想录算法训练营|day21

    2024-01-30 16:52:01       66 阅读
  3. 提高 Code Review 质量的最佳实践

    2024-01-30 16:52:01       52 阅读
  4. 【Vue】2-3、Vue 的基本使用

    2024-01-30 16:52:01       79 阅读
  5. QT 之信号槽

    2024-01-30 16:52:01       59 阅读
  6. OpenAI Gym 中级教程——环境定制与创建

    2024-01-30 16:52:01       45 阅读
  7. html css实现钟表简单移动

    2024-01-30 16:52:01       68 阅读
  8. 《设计模式的艺术》笔记 - 模板方法模式

    2024-01-30 16:52:01       59 阅读
  9. oracle版本号中的i,G,C代表什么含义

    2024-01-30 16:52:01       63 阅读
  10. Vscode移植到VS2010遇到的问题C++

    2024-01-30 16:52:01       56 阅读