小程序应用、页面、组件生命周期

855cdf03f5ddcf59cfee5677ae9cde6d.jpeg

e741723ffb801dd97ce583cdd5a029ab.jpeg

引言

微信小程序生命周期是指在小程序运行过程中,不同阶段触发的一系列事件和函数。这一概念对于理解小程序的整体架构和开发流程非常重要。本文将介绍小程序生命周期的概念以及在不同阶段触发的关键事件,帮助开发者更好地理解和利用小程序的生命周期。

一、小程序生命周期的概念及核心的构造器

小程序生命周期是指微信小程序从启动到关闭的整个过程中,发生在不同阶段的一系列事件和函数。这些事件和函数可以被开发者用于执行特定的操作,例如初始化数据、加载页面、响应用户交互等。生命周期包括全局生命周期(App 构造器)和页面生命周期(Page 构造器)。

在微信小程序中,App 和 Page 是两个核心的构造器(Constructors),分别用于创建小程序的全局实例和页面实例。2179bac2fe34107a7908d1d0f1e2b19a.jpeg

1、App(全局实例):

App 是一个全局的构造器,用于定义整个小程序的生命周期和全局数据,类似于应用程序的入口。每个小程序都有且只有一个 App 实例。

在 App 构造器中,可以定义全局的生命周期函数(如 onLaunch、onShow、onHide)、全局数据、全局方法等。

App 对象可以用于全局数据的共享和管理,以及在整个小程序生命周期内的操作。

2、Page(页面实例):

Page 构造器用于定义小程序的页面,每个页面都需要使用 Page 构造器创建一个页面实例。一个小程序可以有多个页面。

在 Page 构造器中,可以定义页面的生命周期函数(如 onLoad、onShow、onReady、onHide、onUnload),页面数据、页面方法等。

Page 对象用于管理页面的状态、数据和行为。

二、微信小程序生命周期中的一些关键事件

微信小程序生命周期中的一些关键事件,包括打开页面、离开页面、打开小程序、切换到后台、切换到前台等情况:ce85466a6996ce768729dcd073a25544.jpeg

1、打开页面:

小程序生命周期:

onLaunch:小程序初始化完成时触发。

onShow:小程序启动,或从后台进入前台显示时触发。

页面生命周期:

onLoad:页面加载时触发。

onShow:页面显示时触发。

onReady:页面初次渲染完成时触发。

2、离开页面:

页面生命周期:

onHide:页面从前台进入后台时触发。

onUnload:页面卸载时触发,如redirectTo或navigateBack到其他页面时。

3、打开小程序:

小程序生命周期:

onShow:小程序启动,或从后台进入前台显示时触发。

页面生命周期:

onShow:页面显示时触发。

4、切换到后台:

小程序生命周期:

onHide:小程序从前台进入后台时触发。

页面生命周期:

onHide:页面从前台进入后台时触发。

5、切换到前台:

小程序生命周期:

onShow:小程序启动,或从后台进入前台显示时触发。

页面生命周期:

onShow:页面显示时触发。

这些生命周期函数的触发顺序可以帮助开发者在不同阶段执行特定的操作,如数据加载、页面渲染、清理工作等。通过合理利用这些生命周期函数,可以更好地管理小程序和页面的状态。

三、三个角度介绍生命周期

微信小程序生命周期是指在小程序运行时,不同阶段触发的一系列事件和函数。生命周期包括应用级别的(App),页面级别的(Page),以及组件级别的。这三个角度分别展示了小程序整体、页面和组件在运行过程中的状态变化和可执行的操作。

1、应用生命周期

应用生命周期指的是整个微信小程序从启动到关闭的整个过程中,App 构造器中定义的生命周期函数。这些函数提供了在小程序运行不同阶段执行特定操作的机会,使开发者能够在各个阶段处理相关逻辑。以下是微信小程序的应用生命周期:9794f6aaafbf309650a02b384910ed89.jpeg

(1)onLaunch(启动阶段):

触发时机:小程序初始化完成时触发。

作用:在小程序启动时执行一些初始化操作,获取用户信息、系统信息等。

(2)onShow(显示阶段):

触发时机:小程序启动,或从后台进入前台显示时触发。

作用:用于处理小程序进入前台时的操作,如页面刷新、数据加载等。

(3)onHide(隐藏阶段):

触发时机:小程序从前台进入后台时触发。

作用:用于处理小程序进入后台时的操作,如保存数据、清理定时器等。

(4)onError(错误阶段):

触发时机:小程序发生脚本错误或 API 调用失败时触发。

作用:用于处理小程序运行过程中出现的错误。

(5)onPageNotFound(页面不存在阶段):

触发时机:小程序找不到页面时触发。

作用:用于处理页面找不到的情况,可跳转到自定义的错误页面。

这些生命周期函数允许开发者在不同的阶段执行特定的操作,例如初始化全局数据、处理用户登录状态、进行页面跳转等。通过合理利用这些生命周期函数,开发者可以更好地管理小程序的整体状态和逻辑流程。

2、页面生命周期

微信小程序的页面生命周期是指在一个页面从创建到销毁的整个过程中,Page 构造器中定义的生命周期函数。这些函数提供了在页面不同阶段执行特定操作的机会,使开发者能够在各个阶段处理相关逻辑。以下是微信小程序的页面生命周期:2489191ae2533e2bb0124f6054406e68.jpeg

(1)onLoad(加载阶段):

触发时机:页面加载时触发,一个页面只会触发一次。

作用:用于页面初始化,获取页面参数等。

(2)onShow(显示阶段):

触发时机:页面显示时触发。

作用:用于处理页面显示时的操作,如数据加载、刷新等。

(3)onReady(初次渲染完成阶段):

触发时机:页面初次渲染完成时触发。

作用:用于执行页面渲染完成后的操作,如获取节点信息、动画效果等。

(4)onHide(隐藏阶段):

触发时机:页面从前台进入后台时触发。

作用:用于处理页面进入后台时的操作,如保存数据、清理定时器等。

(5)onUnload(卸载阶段):

触发时机:页面卸载时触发,如redirectTo或navigateBack到其他页面时。

作用:用于执行页面卸载前的操作,如清理数据、取消订阅等。

这些生命周期函数允许开发者在不同的阶段执行特定的操作,例如页面初始化、页面展示、页面渲染完成后的操作等。通过合理利用这些生命周期函数,开发者可以更好地管理页面的状态和逻辑流程。

3、组件生命周期

在微信小程序中,组件生命周期是指在一个自定义组件实例被创建、挂载、更新、卸载等不同阶段触发的一系列生命周期函数。以下是微信小程序自定义组件的生命周期函数:bea74ab3b0e6e09b805f7c8408b635a5.jpeg

(1)created(创建阶段):

触发时机:组件实例被创建时触发。

作用:用于组件实例创建时的初始化操作,通常在这里可以设置组件的初始数据。

(2)attached(挂载阶段):

触发时机:组件被挂载到页面节点树时触发。

作用:在组件被插入到页面节点树时执行的操作,可以进行一些 DOM 操作。

(3)ready(就绪阶段):

触发时机:组件布局完成,也就是组件的位置和尺寸已经计算好时触发。

作用:用于执行一些在组件布局完成后的操作,通常用于获取节点信息等。

(4)moved(移动阶段):

触发时机:组件被移动到另外一个位置时触发。

作用:在组件被移动到另一个位置时执行的操作。

(5)detached(卸载阶段):

触发时机:组件实例被从页面节点树中移除时触发。

作用:在组件被销毁前执行的操作,可以进行一些清理工作,如取消订阅、清理定时器等。

这些生命周期函数为开发者提供了在组件不同阶段执行特定操作的机会,使得开发者能够更好地管理组件的状态和行为。在实际开发中,可以利用这些生命周期函数来进行组件的初始化、数据绑定、事件处理等操作。

结语

小程序生命周期从应用、页面到组件,形成了一个层层嵌套的结构。这三个层次的生命周期分别管理了整个小程序、单个页面和自定义组件的运行时序,为开发者提供了灵活而有力的控制和操作机会。通过深入理解小程序生命周期,开发者能够更好地优化程序性能、管理数据状态,从而提升用户体验。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/705951.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人工智能大学课程-ChatGPT生成

抖动的声音:dilo_Abel 视频号:dilo_Abel的个人空间-dilo_Abel个人主页-哔哩哔哩视频 年级课程名称推荐书籍书籍内容描述说明大一年级计算机科学导论"Computer Science: An Overview" by J. Glenn Brookshear介绍计算机科学的基本概念、原理和…

Maven jar 的查找及依赖版本确定

关于 jar 的查找,及使用版本的确定,及依赖的版本确认,避免 jar 冲突或版本不兼容 在使用 maven 构建项目时,需要的 jar 可以通过在 https://mvnrepository.com/ 可以找到部分需要的依赖,这里以查找 mybatis 依赖为例&…

torch.nn.embedding的介绍和用法

nn.Embedding 是 PyTorch 中的一个神经网络层,它主要用于将离散的、高维的数据(如词索引)转换为连续的、低维的空间中的稠密向量表示。 在自然语言处理(NLP)中,这个层通常用于实现词嵌入(Word E…

axios封装

一、axios是什么特性基本使用二、为什么要封装三、如何封装设置接口请求前缀设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结 一、axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支…

shell和go实现:防火墙放行所有端口,唯独拦截80端口

shell 1.防火墙放行所有端口&#xff0c;唯独拦截80端口 1.1拦截 mkdir -p /data/shellscat > /data/shells/02nginx_close.sh <<-EOF #!/bin/bash# 检查Linux系统版本 linux_version$(cat /etc/redhat-release)# 根据Linux系统版本选择相应的防火墙开启命令和保存…

python入门介绍

目录 内存 外存&#xff08;硬盘等&#xff09;区别 显卡&#xff1a; python的优缺点 内存 外存&#xff08;硬盘等&#xff09;区别 内存的存储空间小&#xff0c;外存的存储空间大内存的访问速度快&#xff0c;外存的访问速度慢内存比外存成本更高内存上的数据容易丢失&…

MongoDB - writeConcern

writeConcern 是 MongoDB 提供的一个功能&#xff0c;用于控制写操作的确认级别&#xff0c;以确保数据的持久性和一致性。在分布式环境中&#xff0c;写入操作可能会面临网络延迟、节点故障等情况&#xff0c;writeConcern 允许您指定在写入数据时所需的确认级别&#xff0c;以…

ZTE E8820V2重启偶现5G wifi丢失问题

使用ZTE E8820V2设备时,发现设备在多次重启过程中会出现5G wifi信号丢失的情况。 1. 现象日志 使用老毛子固件,具体丢失时会出现相关log: 2. 问题原因: GPIO#19 是 PCIE reset 外,GPIO#26 也要 reset。 3. 解决方法: E8820V2/rt-n56u/trunk$ git diff linux-3.4.x…

Aethir推出其首次去中心化AI节点售卖

Aethir&#xff0c;去中心化GPU云基础设施领导者&#xff0c;宣布其备受期待的节点销售。Aethir是一家企业级的以AI和游戏为重点的GPU即服务提供商。Aethir的去中心化云计算基础设施使GPU提供商能够与需要NVIDIA的H100芯片提供强大AI/ML任务支持的企业客户相连接。 此外&#x…

BUU [CISCN2019 华东南赛区]Web4

BUU [CISCN2019 华东南赛区]Web4 题目描述&#xff1a;Click to launch instance. 开题&#xff1a; 点击链接&#xff0c;有点像SSRF 使用local_file://协议读到本地文件&#xff0c;无法使用file://协议读取&#xff0c;有过滤。 local_file://协议&#xff1a; local_file…

JavaWeb 自己给服务器安装SQL Server数据库遇到的坑

之前买的虚拟主机免费送了一个SQL Server数据库&#xff0c;由于服务器提供商今年下架我用的那款虚拟主机产品&#xff0c;所以数据库也被收回了。我买了阿里云云服务器&#xff0c;但是没有数据库&#xff0c;于是自己装了一个SQL Server数据库&#xff0c;总结一下遇到的坑。…

小程序画布(二维地图线)

首先开始是想用小程序兼容openlayers的&#xff0c;但是了解到用不了&#xff0c;那就用画布来解决 实际效果如下 wxml中代码 <canvas id"trackDesignCanvas" //指定 id 的 Canvas 组件class"orbit-canvas-main" type"2d" …

安卓平板主板_安卓平板电脑主板MTK联发科|高通|紫光展锐方案

安卓平板电脑主板选择了MTK联发科方案&#xff0c;并且可以选配高通或者紫光展锐平台方案&#xff0c;为用户提供更强劲的性能和定制化的服务。主板搭载了联发科MT6771处理器&#xff0c;采用12nm制程工艺&#xff0c;拥有八核Cortex-A73Coretex-A53架构&#xff0c;主频为2.0G…

Nest.js权限管理系统开发(七)用户注册

创建user模块 先用nest的命令创建一个 user 模块&#xff0c; nest g res user 实现user实体 然后就生成了 user 模块,在它的实体中创建一个用户表user.entity.ts&#xff0c;包含 id、用户名、密码,头像、邮箱等等一些字段&#xff1a; Entity(sys_user) export class Us…

【底层学习】HashMap源码学习

成员变量 // 默认初始容量 就是16 static final int DEFAULT_INITIAL_CAPACITY 1 << 4; // aka 16// 最大容量 static final int MAXIMUM_CAPACITY 1 << 30;// 默认加载因子0.75 static final float DEFAULT_LOAD_FACTOR 0.75f;// 树化阈值&#xff08;链表转为…

IT廉连看——C语言——结构体

IT廉连看——C语言——结构体 一、结构体的声明 1.1 结构的基础知识 结构是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量。 1.2 结构的声明 struct tag {member-list; }variable-list; 例如描述一个学生&#xff1a;typedef struct Stu…

SQL Server添加用户登录

我们可以模拟一下让这个数据库可以给其它人使用 1、在计算机中添加一个新用户TeacherWang 2、在Sql Server中添加该计算机用户的登录权限 exec sp_grantlogin LAPTOP-61GDB2Q7\TeacherWang -- 之后这个计算机用户也可以登录数据库了 3、添加数据库的登录用户和密码&#xff0…

进程与线程之线程

首先exec函数族是进程中的常用函数&#xff0c;可以利用另外的进程空间执行不同的程序&#xff0c;在之前的fork创建子进程中会完全复制代码数据段等&#xff0c;而exec函数族则可以实现子进程实现不同的代码 int execl(const char *path, const char *arg, ... …

Qt之字符串查找

去掉空格 OString类的成员雨数 trimmed&#xff08;&#xff09;会去掉字符申首尾的空格&#xff0c;而成员函数simplified&#xff08;&#xff09;不仅 去掉宇符申首尾的空格&#xff0c;中间连续的空格也用一个空格符来替换。比如&#xff1a; OString str1"Are you O…

C++拿几道题练练手吧

第 1 题 【 问答题 】 • 最短路径问题 平面上有n个点(n<100)&#xff0c;每个点的坐标均在-10000~10000之间。其中的一些点之间有连线。 若有连线&#xff0c;则表示可从一个点到达另一个点&#xff0c;即两点间有通路&#xff0c;通路的距离为两点间的直线距离。现在的任务…