百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

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

bigegpt 2024-08-02 10:53 3 浏览

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

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

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

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

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

属性类型必填说明onLoadfunction否生命周期回调—监听页面加载onShowfunction否生命周期回调—监听页面显示onReadyfunction否生命周期回调—监听页面初次渲染完成onHidefunction否生命周期回调—监听页面隐藏onUnloadfunction否生命周期回调—监听页面卸载

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函数,结束整个页面过程。

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

新书介绍

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


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

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




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

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

面向对象开发,面向对象思考!

相关推荐

得物可观测平台架构升级:基于GreptimeDB的全新监控体系实践

一、摘要在前端可观测分析场景中,需要实时观测并处理多地、多环境的运行情况,以保障Web应用和移动端的可用性与性能。传统方案往往依赖代理Agent→消息队列→流计算引擎→OLAP存储...

warm-flow新春版:网关直连和流程图重构

本期主要解决了网关直连和流程图重构,可以自此之后可支持各种复杂的网关混合、多网关直连使用。-新增Ruoyi-Vue-Plus优秀开源集成案例更新日志[feat]导入、导出和保存等新增json格式支持...

扣子空间体验报告

在数字化时代,智能工具的应用正不断拓展到我们工作和生活的各个角落。从任务规划到项目执行,再到任务管理,作者深入探讨了这款工具在不同场景下的表现和潜力。通过具体的应用实例,文章展示了扣子空间如何帮助用户...

spider-flow:开源的可视化方式定义爬虫方案

spider-flow简介spider-flow是一个爬虫平台,以可视化推拽方式定义爬取流程,无需代码即可实现一个爬虫服务。spider-flow特性支持css选择器、正则提取支持JSON/XML格式...

solon-flow 你好世界!

solon-flow是一个基础级的流处理引擎(可用于业务规则、决策处理、计算编排、流程审批等......)。提供有“开放式”驱动定制支持,像jdbc有mysql或pgsql等驱动,可...

新一代开源爬虫平台:SpiderFlow

SpiderFlow:新一代爬虫平台,以图形化方式定义爬虫流程,不写代码即可完成爬虫。-精选真开源,释放新价值。概览Spider-Flow是一个开源的、面向所有用户的Web端爬虫构建平台,它使用Ja...

通过 SQL 训练机器学习模型的引擎

关注薪资待遇的同学应该知道,机器学习相关的岗位工资普遍偏高啊。同时随着各种通用机器学习框架的出现,机器学习的门槛也在逐渐降低,训练一个简单的机器学习模型变得不那么难。但是不得不承认对于一些数据相关的工...

鼠须管输入法rime for Mac

鼠须管输入法forMac是一款十分新颖的跨平台输入法软件,全名是中州韵输入法引擎,鼠须管输入法mac版不仅仅是一个输入法,而是一个输入法算法框架。Rime的基础架构十分精良,一套算法支持了拼音、...

Go语言 1.20 版本正式发布:新版详细介绍

Go1.20简介最新的Go版本1.20在Go1.19发布六个月后发布。它的大部分更改都在工具链、运行时和库的实现中。一如既往,该版本保持了Go1的兼容性承诺。我们期望几乎所...

iOS 10平台SpriteKit新特性之Tile Maps(上)

简介苹果公司在WWDC2016大会上向人们展示了一大批新的好东西。其中之一就是SpriteKitTileEditor。这款工具易于上手,而且看起来速度特别快。在本教程中,你将了解关于TileE...

程序员简历例句—范例Java、Python、C++模板

个人简介通用简介:有良好的代码风格,通过添加注释提高代码可读性,注重代码质量,研读过XXX,XXX等多个开源项目源码从而学习增强代码的健壮性与扩展性。具备良好的代码编程习惯及文档编写能力,参与多个高...

Telerik UI for iOS Q3 2015正式发布

近日,TelerikUIforiOS正式发布了Q32015。新版本新增对XCode7、Swift2.0和iOS9的支持,同时还新增了对数轴、不连续的日期时间轴等;改进TKDataPoin...

ios使用ijkplayer+nginx进行视频直播

上两节,我们讲到使用nginx和ngixn的rtmp模块搭建直播的服务器,接着我们讲解了在Android使用ijkplayer来作为我们的视频直播播放器,整个过程中,需要注意的就是ijlplayer编...

IOS技术分享|iOS快速生成开发文档(一)

前言对于开发人员而言,文档的作用不言而喻。文档不仅可以提高软件开发效率,还能便于以后的软件开发、使用和维护。本文主要讲述Objective-C快速生成开发文档工具appledoc。简介apple...

macOS下配置VS Code C++开发环境

本文介绍在苹果macOS操作系统下,配置VisualStudioCode的C/C++开发环境的过程,本环境使用Clang/LLVM编译器和调试器。一、前置条件本文默认前置条件是,您的开发设备已...