微信小程序生命周期学习笔记-页面篇

小程序的生命周期分三类：应用生命周期、页面生命周期、组件生命周期。现在我们来学习一下页面的生命周期。

当我们新建一个页面时，打开该页面的js文件，我们就可以看到如下的内容（只截取了一部分):

其中onLoad、onReady、onShow等，均为页面生命周期的函数。如同生命周期的定义，页面生命周期也是一类函数。应用生命周期的主体是app（应用），而页面生命周期的主体是page（页面）。

在学习页面生命周期时，我们可以比对着应用生命周期来学习。

我们主要研究以下五个生命周期函数：

onLoad

微信开放文档：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

这里需要注意的是，页面的onLoad是在一个页面开始加载到卸载这个页面（有关于卸载，稍后我们就会讲到）之中是一次，不同于app.onLaunch，onLoad在整个小程序的运行中可以不止一次，例如我反复进入（加载）并退出（卸载）同一个页面，这个页面的onLoad函数就会被调用多次。

不妨写个代码测试一下。

我们在这个新建的页面的js文件中，在onLoad函数中加一个和之前我们测试onLaunch函数时一样的代码：

onLoad: function (options) {
    console.log("Load");
}

测试页面要比测试整个小程序稍微复杂一些，我们需要模拟从进入页面到退出页面的全过程，所以我们需要在我们的小程序初始页面创建一个导航标签，指向我们新建的页面。

我们假设我们的新页面名称为new，它的路径是：../new/new。我们新建的导航按钮的名称为NewPage。

（当然new和NewPage是随便起的名字，可以按照自己的习惯来为他们命名。）

我们在初始页面的wxml文件中做一个指向新建页面的导航标签如下：

<navigator url = "../new/new">NewPage</navigator>

再次编译后，点击初始页面中的NewPage，我们就可以跳转到新建的页面了，在加载页面的同时console中也有“Load”字符串输出。

onShow

页面生命周期和应用生命周期的onShow基本一致，都是出现一次执行一次。这里的出现和应用生命周期中所描述的出现也一致，消失后（可以退出，也可以切后台）再出现（可以加载，也可以从后台切回前台），就会执行一次onShow。

和应用生命周期的onShow一样，onLoad执行的时候onShow也会执行。同样，onLoad会先于onShow执行。

这里只提供测试代码：

onShow: function () {
    console.log("Show");
}

大家可以自己去测试一下。

onReady

Ready，结束。它的作用是监听页面初次渲染完成。渲染，简单理解就是将页面的内容显示在屏幕上的过程。渲染结束即为Ready，这一点是比较好理解的。我们同样用一段代码来测试他的触发条件：

onReady: function () {
    console.log("Ready");
}

大家可以去尝试一下。“Ready”字符串是在页面渲染结束之后输出的。如果页面需要渲染的内容少，那么看起来不会太明显。我们可以尝试向页面里面加很多内容或者图片，给页面一定的渲染时间。

onLoad、onShow的执行先后顺序我们已经研究过了，那么onReady如何呢？

我们可以从加载页面的过程角度，结合我们的生活实际猜想：

当网速较慢时，我们使用浏览器加载网页的时候，通常是网页先出现（Show），然后网页的内容一点点在屏幕上出现（Ready）。通过这个生活实际我们可以猜想，onShow的执行时间应当早于onReady。

我们可以在onShow和onReady函数中同时加入输出语句，点入页面观察console，发现结果与我们的猜想相符，即onShow早于onReady。

所以时间点从先到后的排序是：

onLoad onShow onReady

onHide

有了前面的应用生命周期的学习，又有了前面app.onShow和page.onShow函数的比较，那么app.onHide和page.onHide的区别也很好理解了。这里不进行过多叙述。如果前面的内容理解了，那么这里不用测试，你的心中或许也有了答案。

大家不妨自己试一试，仿照之前给出的样例写一下测试代码，自己测一测onHide的触发条件。

onUnload

上文介绍onLoad时我们提到了一个词：卸载。这个词我们经常说，例如“我想卸载xxx软件。”页面的卸载，我们可以把它想成“页面的加载”的反义词，这样一想，或许你就能想通了。有加载则有卸载，小小页面也想有始有终。

如何卸载一个页面？最简单的方式：退出这个页面。简单理解，即为后续操作不是一定要返回这个页面的，那就要卸载，来省去一点被占用的内存。

退出页面的方法主要有两种：

a.重定向至其他页面(redirect)

b.返回至上一个或多个页面(navigateBack)

举例说明：

假如我们从A页面通过某种方式进入到了B页面，退出B页面后回到了A页面。

1.在进入B页面时，A页面没有被卸载，因为在退出页面的过程中，一定要回到A页面。

2.A页面进入B页面不是重定向过程。

了解了卸载后，我们来测试一下onUnload的触发条件。

onUnload: function () {
    console.log("Unload");
}

大家可以在新建页面中再做一个navigator标签，指向另外一个页面，测试一下，通过navigator标签进入另一个页面时“Unload”字符串是否会在console输出。

其他的页面监视函数

这里只对这些函数做一个列举，测试方法在前面已经重复多次，希望读者可以自己尝试测试并学习。

这些函数均与onLoad、onShow等函数同层级。

其中在测试onResize函数时，需要启用屏幕旋转支持。本节不对此进行详细描述，详见微信开放文档：响应显示区域变化

https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html#在手机上启用屏幕旋转支持

页面生命周期小结

这是微信开放文档中“页面生命周期”中的一张图片，此处引用。学过页面生命周期之后，我们就可以读懂这张图了。

这里再带大家阅读这张图上的信息，带大家复习一下页面生命周期的相关内容。

1.左侧为手机端，右侧为小程序端。

2.小程序端创建页面。小程序端创建结束后（即加载结束）执行onLoad和onShow函数。之后等待手机端成功进入页面。

3.手机端进入页面后向小程序端发送已经进入页面的信息，小程序端接受后，向手机端发送页面信息。

4.手机端接受页面信息并渲染在页面上，需要一定时间。渲染结束后，向小程序端发送渲染结束的信息，小程序端接受该信息后，执行onReady函数。

5.onReady函数执行结束后，开始进行小程序端的操作。小程序端不断向手机端发送信息，手机端不断接受，每一次接受信息都要对页面进行渲染。渲染期间手机端不能正常操作，所以图中用Rerender这个词来形容（rend是分裂，render即为分裂的地方，rerender可以理解成再次分裂的意思）

6.在小程序的页面被切至后台或被换到下一个页面时执行onHide函数，此时小程序的页面依然存在。再度被切回前台或回到该页面（总而言之，就是显示在屏幕上了）时，执行onShow函数。

7.退出该页面时，对数据进行消除（destroy），然后执行onUnload函数，结束整个页面过程。

学过页面生命周期之后，我们便了解了一些小程序是如何知道你把它分享到了朋友圈，你把它切到了后台……相信大家对小程序的页面，甚至是所有的网页的这种原理都有了进一步的理解。