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

Posted 2022-11-15

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

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

 

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

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

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

属性	类型	必填	说明
onLoad	function	否	生命周期回调—监听页面加载
onShow	function	否	生命周期回调—监听页面显示
onReady	function	否	生命周期回调—监听页面初次渲染完成
onHide	function	否	生命周期回调—监听页面隐藏
onUnload	function	否	生命周期回调—监听页面卸载

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等函数同层级。

属性	类型	必填	说明
onPullDownRefresh	function	否	监听用户下拉动作
onReachBottom	function	否	页面上拉触底事件的处理函数
onShareAppMessage	function	否	用户点击右上角转发
onShareTimeline	function	否	用户点击右上角转发到朋友圈
onAddToFavorites	function	否	用户点击右上角收藏
onPageScroll	function	否	页面滚动触发事件的处理函数
onResize	function	否	页面尺寸改变时触发
onTabItemTap	function	否	当前是 tab 页时，点击 tab 时触发

其中在测试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函数，结束整个页面过程。

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

 

新书介绍

以下是本人3月份出版的新书，拜托多多关注！

 

本书利用Python 的标准GUI 工具包tkinter，通过可执行的示例对23 个设计模式逐个进行说明。这样一方面可以使读者了解真实的软件开发工作中每个设计模式的运用场景和想要解决的问题；另一方面通过对这些问题的解决过程进行说明，让读者明白在编写代码时如何判断使用设计模式的利弊，并合理运用设计模式。

对设计模式感兴趣而且希望随学随用的读者通过本书可以快速跨越从理解到运用的门槛；希望学习Python GUI 编程的读者可以将本书中的示例作为设计和开发的参考；使用Python 语言进行图像分析、数据处理工作的读者可以直接以本书中的示例为基础，迅速构建自己的系统架构。

 

---

 

觉得本文有帮助？请分享给更多人。

关注微信公众号【面向对象思考】轻松学习每一天！

面向对象开发，面向对象思考！