微信小程序生命周期

简介: 微信小程序生命周期

小程序生命周期包含了三个部分?

应用级别生命周期 (整个APP的生命周期)
页面级别生命周期(单个页面page的生命周期)
组件级别生命周期(组件component的生命周期)

应用级别的生命周期 - App的生命周期

必须在 app.js 中调用,必须调用且只能调用一次。

  • onLaunch: 小程序初始化完成时触发,全局只触发一次。
  • 云开发的初始化 方便其他页面直接调用云开发的SDK
  • 发送请求获取用户的个人信息 方便其他页面使用
  • 获取本地存储数据 方便其他页面使用
  • onShow:小程序启动或切前台显示时触发
  • 重新启动定时器 继续定时执行功能
  • 重新触发异步 获取新的数据
  • 重新启动播放器等
  • onHide:小程序从前台进入后台时触发
  • 当暂停定时器
  • 暂停视频音频的播放
  • onError:小程序发生脚本错误或 API 调用报错时触发。
  • 收集错误信息 发送到后台 进行错误日志的记录
  • 弹出窗口提示用户
  • onPageNotFound:小程序要打开的页面不存在时触发。

监听报错,弹出窗口提示用户

监听报错,重新跳转页面

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

用在统一捕获处理 可以在该生命周期中处理错误情况 ,一般是由于异步代码出错导致的

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

让小程序可以跟着主题的切换 也改变小程序的UI风格,使之体验更好!

页面级别的生命周期 - 页面(page)的生命周期

1.onLoad:页面加载时执行,只执行一次;

2.onShow:页面展示时执行,执行多次;

3.onReady:页面初次渲染时执行,只执行一次;

4.onHide:页面从前台进入后台时执行;

5.onUnload:页面卸载时执行

注意🛑

当切换页面需要多次渲染数据改变状态,建议在onShow中使用,当只需初始化一次的时候,可在onLoad或者onReady中使用。当需要清除定时器时,可在onUnload中使用。

执行顺序

onLoad --> onShow --> onReady --> onHide

组件(component)的生命周期

created(重要):组件实例刚刚被创建好时触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

attached(重要):在组件完全初始化完毕、进入页面节点树后被触发

此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。

ready:在组件的视图层布局完成后执行

moved:在组件实例被移动到节点树另一个位置时执行

detached(重要):在组件离开页面节点树后被触发

error:每当组件方法抛出错误时执行

总结生命周期执行流程

  1. 打开小程序
    (App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onReady
  2. 切换页面:
    (Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady
  3. 返回上一个页面
    (curr)onUnload --> (pre)onShow
  4. 离开小程序
    (App)onHide


相关文章
|
6月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
6月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
4月前
|
小程序
跨端技术问题之为什么在微信小程序中静态转义出didUpdate生命周期可靠程度低
跨端技术问题之为什么在微信小程序中静态转义出didUpdate生命周期可靠程度低
|
1月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
62 4
|
1月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
69 1
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
145 0
|
4月前
|
JavaScript 小程序 前端开发
【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页(含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)
【微信小程序-原生开发】实用教程04-启动/欢迎/首屏广告页(含倒计时、添加文字、rpx、定义变量和函数、读取变量、修改变量、wx.reLaunch 页面跳转、生命周期 onReady等)
140 0
|
6月前
|
小程序
小程序和页面生命周期详解
小程序和页面生命周期详解
56 0
|
6月前
|
小程序 API
微信小程序 生命周期
微信小程序 生命周期
|
6月前
|
小程序 UED 开发者
微信小程序——生命周期
微信小程序——生命周期
51 0

热门文章

最新文章