专栏首页C++核心准则原文翻译微信小程序生命周期学习笔记-页面篇

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

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

当我们新建一个页面时,打开该页面的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函数,结束整个页面过程。

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

本文分享自微信公众号 - 面向对象思考(OOThinkingDalian),作者:面向对象思考

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序生命周期学习笔记-组件

    生命周期包含应用生命周期、页面生命周期和组件生命周期。现在我们来学习组件的生命周期。

    面向对象思考
  • C++核心准则C.52:合理使用继承的构造函数

    C.52: Use inheriting constructors to import constructors into a derived class th...

    面向对象思考
  • C++核心准则C.170: 如果感觉需要重载lambda表达式,使用泛型lambda表达式​

    You cannot overload by defining two different lambdas with the same name.

    面向对象思考
  • 【专业技能】前端开发眼里的页面

    拿到效果图时,有这么几步,就我了解的情况做一下分享,不一定全部都是科学,但可以部分借鉴。 我先说一下,熟练后拿到效果图时这样的一个状态: ? http...

    程序员互动联盟
  • hugo-页面变量

    caoayu
  • CMS-需求分析

    CMS (Content Management System)即内容管理系统,不同的项目对CMS的定位不同,比如:一个在线教育网 站,有些公司认为CMS系统是对...

    cwl_java
  • 14个UI精美功能强大的Android应用设计模板

    由于狂热的开发者社区和移动设备的日益普及,Android的商业应用程序成为一个不断增长的市场。

    奔跑的小鹿
  • 2.4.1、Google Analytics高级应用——查看页面上下级

    在GA中查看上下级页面有默认参数:先前页面路径和后续页面路径,但出来的结果往往是前后相等的,错误的,如图2-48所示:

    GA小站
  • 记一次老项目中的跨页面通信问题和前端实现文件下载功能

    由于本文介绍的主要还是基于javascript,不涉及任何框架方面的问题(如果想研究vue,react,angular方面的技术问题,可以移步我的其他文章),所...

    徐小夕
  • 微信小程序面试

    如何实现下拉刷新 app.json或者页面的json中配置enablePullDownRefresh为true 使用onPullDownRefresh 函数...

    达达前端

扫码关注云+社区

领取腾讯云代金券