微信小程序-页面生命周期方法

在经过上一篇文章的介绍之后，我们知道了大体的生命周期在什么时候执行，这次主要是以代码的形式来展示一下具体的阶段执行什么生命周期方法。

首先我们编写一个代码可以从首页跳转到日志页面：

<!--index.wxml-->
<text>首页</text>
<navigator url="/pages/logs/logs">跳转到Log页面</navigator>

在日志页面当中编写监听生命周期的方法：

// logs.js
Page({
  onLoad() {
    console.log("onLoad");
  },
  onShow() {
    console.log("onShow");
  },
  onReady() {
    console.log("onReady");
  },
  onHide() {
    console.log("onHide");
  },
  onUnload() {
    console.log("onUnload");
  }
})

onLoad/onShow/onReady

这三个方法在日志页面被加载时会被调用，运行如上的首页代码，然后从首页点击 navigator 跳转到日志页面，然后就可以查看到效果了。

?> onLoad/onShow/onReady 生命周期方法当中可以做的一些事情

• onLoad/onShow：可以在这个方法当中进行发送网络请求，获取网络数据
• onShow：可以恢复之前一些状态
• onReady：可以在这个方法进行操作页面了，页面已经被渲染了

onHide

?> onHide 生命周期方法当中可以做的一些事情

• onHide：保存当前一些状态

image-20230520223247763

onUnload

?> onUnload 生命周期方法当中可以做的一些事情

• onUnload：释放资源/移除监听

image-20230520223345232

点击返回按钮返回到上一级，至于为什么就会调用 onUnload 方法这里就需要说起小程序页面之间的跳转当中其实是有一个 栈 的，当我们点击了返回按钮，我们的日志页面就会出栈，所以不在栈当中就会被销毁了。

image-20230521010149093