type
status
date
slug
summary
tags
category
icon
password
URL
页面生命周期
组件生命周期
详情
1、页面级别:使用Page
关于小程序的退出:当用户点击小程序左上角关闭,或者按设备Home 键离开微信,小程序并没有直接销毁,而是触发 onHide方法进入了后台,短时间内当再次进入微信或者再次打开小程序,小程序会从后台状态进入前台,此为“热启动”。注意当小程序进入后台状态一定时间后,或者系统资源占用过高,微信会真正销毁小程序。用户第一次进入小程序或者在小程序销毁后再次进入小程序是为“冷启动”。小程序的冷启动:小程序在冷启动时会依次触发onLaunch—>onShow小程序的热启动:小程序在热启动时会触发onShow小程序关闭时:即小程序从前台进入后台时触发onHide小程序销毁时:即小程序从前台进入后台时触发onUnload
- onLoad :页面加载时
- onReady:页面所有内容加载完毕
- onShow:页面显示的时候触发
- onHide:当页面被隐藏时触发
- onUnload:当页面卸载是触发
2、封装组件内部:使用 Component
组件内的生命周期与方法
组件的生命周期 lifetimes
组件所在页面的生命周期
3、App.js
App()必须在
app.js
中调用,必须调用且只能调用一次。不然会出现无法预期的后果。属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
function | ㅤ | 否 | 生命周期回调——监听小程序初始化。 | ㅤ | |
function | ㅤ | 否 | 生命周期回调——监听小程序启动或切前台。 | ㅤ | |
function | ㅤ | 否 | 生命周期回调——监听小程序切后台。 | ㅤ | |
function | ㅤ | 否 | 错误监听函数。 | ㅤ | |
function | ㅤ | 否 | 页面不存在监听函数。 | ||
function | ㅤ | 否 | 未处理的 Promise 拒绝事件监听函数。 | ||
function | ㅤ | 否 | 监听系统主题变化 | ||
其他 | any | ㅤ | 否 | 开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问 | ㅤ |
4、生命周期图示
(1)小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。
(2)当小程序进入到后台,先执行页面 onHide 方法再执行应用 onHide方法。
(3)当小程序从后台进入到前台,先执行应用 onShow方法再执行页面 onShow 方法。
5、路由变化
在小程序中所有页面的路由全部由框架进行管理。
页面栈
框架以栈的形式维护了当前的所有页面。当发生路由切换的时候,页面栈的表现如下:
路由方式 | 页面栈表现 |
初始化 | 新页面入栈 |
打开新页面 | 新页面入栈 |
页面重定向 | 当前页面出栈,新页面入栈 |
页面返回 | 页面不断出栈,直到目标返回页 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 |
重加载 | 页面全部出栈,只留下新的页面 |
开发者可以使用
getCurrentPages()
函数获取当前页面栈。路由方式
对于路由的触发方式以及页面生命周期函数如下:
路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
初始化 | 小程序打开的第一个页面 | ㅤ | onLoad, onShow |
打开新页面 | onHide | onLoad, onShow | |
页面重定向 | onUnload | onLoad, onShow | |
页面返回 | 调用API wx.navigateBack使用组件<navigator open-type=“navigateBack”>用户按左上角返回按钮 | onUnload | onShow |
Tab 切换 | 调用API wx.switchTab使用组件 <navigator open-type=“switchTab”/>用户切换 Tab | ㅤ | 各种情况请参考下表 |
重启动 | 调用API wx.reLaunch使用组件 <navigator open-type=“reLaunch”/> | onUnload | onLoad, onShow |
Tab 切换对应的生命周期(以 A、B 页面为 Tabbar 页面,C 是从 A页面打开的页面,D 页面是从 C 页面打开的页面为例):
当前页面 | 路由后页面 | 触发的生命周期(按顺序) |
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B(再次打开) | A.onHide(), B.onShow() |
C | A | C.onUnload(), A.onShow() |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
D(从转发进入) | A | D.onUnload(), A.onLoad(), A.onShow() |
D(从转发进入) | B | D.onUnload(), B.onLoad(), B.onShow() |
Tips:
navigateTo
,redirectTo
只能打开非 tabBar页面。
switchTab
只能打开 tabBar 页面。
reLaunch
可以打开任意页面。
- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有tabBar。
- 调用页面路由带的参数可以在目标页面的
onLoad
中获取。
原文地址
- 作者:Orcatt
- 链接:https://orcatt.one/article/bbbec7ea-7792-4713-95ae-24606273dac2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。