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

news2025/1/23 12:11:37

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.coloradmin.cn/o/1474666.html

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

相关文章

Github 2024-02-25开源项目日报 Top10

根据Github Trendings的统计,今日(2024-02-25统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目5Jupyter Notebook项目2TypeScript项目2非开发语言项目1HTML项目1C项目1Dart项目1 Python - 100天…

SSM SpringBoot vue物资管理系统

SSM SpringBoot vue物资管理系统 系统功能 登录注册 个人中心 财务管理 商品类别管理 供应商信息管理 商品信息管理 进货入库管理 销售出库管理 商品盘点管理 开发环境和技术 开发语言:Java 使用框架: SSM(Spring SpringMVC Mybaits)或SpringBoot Mybaits 前…

【学习总结】什么是弹性负载均衡? LB和ELB的区别

[Q&A] 什么是 LB (Load Balancer) 负载均衡器: 这是一个广泛的概念,泛指任何用于在网络流量进入时进行分配以实现服务器集群间负载均衡的设备或服务。传统的负载均衡器可以是硬件设备,也可以是软件解决方案,其基本目标是将客…

国创证券:机器人概念掀涨停潮 迈赫股份、丰立智能等多股涨停

机器人概念26日盘中走势活跃,到发稿,中亚股份、中威电子、迈赫股份、丰立智能、东杰智能等多股涨停,机器人、巨能股份、本川智能、江苏北人等涨超12%。 消息面上,人形机器人方面,据媒体报道,特斯拉近日通过…

【监督学习之支持向量机(SVM)】

曾梦想执剑走天涯,我是程序猿【AK】 目录 简述概要知识图谱基本原理支持向量线性SVM与非线性SVM优化问题软间隔与正则化SVM的应用实现 简述概要 了解监督学习-支持向量机(SVM) 知识图谱 支持向量机(Support Vector Machine&…

【已解决】用ArcGIS处理过的数据在QGIS中打开发生偏移怎么办?| 数据在ArcGIS中打开位置正常,在QGIS中偏移

1. 问题描述 栅格或者矢量数据用ArcGIS打开时位置正确(可以和其他数据对应上)。但是用QGIS打开后发现位置不对 2. 问题的原因 因为该数据用了ArcGIS自定义的坐标系,QGIS不支持,识别有误。因此在数据QGIS中的坐标系参数有误&a…

基于FPGA的9/7整数小波变换和逆变换verilog实现,包含testbench

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 9/7整数小波变换原理 4.2 逆变换过程 5.算法完整程序工程 1.算法运行效果图预览 将测试结果导入到matlab显示 2.算法运行软件版本 vivado2019.2,matlab2022a 3.部分核心程…

深度学习 精选笔记(4)线性神经网络-交叉熵回归与Softmax 回归

学习参考: 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增),以达到集多方教程的精华于一文的目的。 ③非常推荐上面(学习参考&#x…

postman访问k8s api

第一种方式: kubectl -n kubesphere-system get sa kubesphere -oyaml apiVersion: v1 kind: ServiceAccount metadata:annotations:meta.helm.sh/release-name: ks-coremeta.helm.sh/release-namespace: kubesphere-systemcreationTimestamp: "2023-07-24T07…

影像仪激光扫描功能,无缝连接2D/3D混合测量

在现代工业生产领域,影像仪用于质量控制和产品检测,是一个不可或缺的工具。它通过高精度的成像和图像处理技术,可以及时发现产品的缺陷和异常,以保证产品质量的稳定性和一致性。 影像仪的重要性及其面临的挑战 在工业生产方面&a…

免杀实战-EDR对抗

文章目录 杀软分析BOF.NET 杀软分析 x64dgb简单调试发现该edr在r3环对ntdll.dll和kernel32.dll关键函数均存在hook,这里硬盘读取原来的dll进行重新加载,原理如图 loader // dllmain.cpp : 定义 DLL 应用程序的入口点。 #include "pch.h" #in…

矩阵的范数 matrix norm Frobenius norm 弗罗贝尼乌斯 范数

1,矩阵范数的定义 矩阵的范数,matrix norm即矩阵的模;它把一个矩阵空间变成为赋范线性空间; 从一个矩阵空间映射到非负实数的函数 满足以下条件: 1,严格的正定性。对于 , 则 ; and if , must ; 2&…

Element UI中 el-tree 组件 css 实现横向溢出滚动实现

限制 el-tree 的父容器宽度为 100px 之后 el-tree 组件内数据溢出后隐藏,不出现滚动条 、overflow 为 auto 也无效 overflow 无效是因为 el-tree 宽度 也是 100px 本来也就没有溢出 给 el-tree 添加样式 width: fit-content; min-width: -webkit-fill-available; …

【Nginx笔记02】通过Nginx服务器转发客户端的WebSocket接口到后端服务

这篇文章,主要介绍如何通过Nginx服务器转发客户端的WebSocket接口到后端服务【知识星球】。 目录 一、Nginx配置WebSocket 1.1、Nginx配置内容 1.2、客户端请求地址 1.3、创建WebSocket测试工程 1.4、启动测试 1.5、WebSocket超时问题 1.5.1、设置超时时间 …

一键生成任意前端项目

开始 方式一:根据数据库结构一键生成 方式二:根据(.sql, .java, .txt)描述文件单页面生成 总结 话不多说,作为后端开发人员,不爱写前端代码,但又不得不需要一个系统的管理端来配置些数据等等…

架构设计:生产消费模型

1. 引言 在现代软件系统中,处理大量数据和消息是一项重要的任务。生产消费模型作为一种经典的并发模式,在解决数据生产和消费之间的关系上发挥着关键作用。该模型通过有效地管理生产者和消费者之间的通信和数据流动,实现了系统组件之间的解耦…

【论文阅读】基于人工智能目标检测与跟踪技术的过冷流沸腾气泡特征提取

Bubble feature extraction in subcooled flow boiling using AI-based object detection and tracking techniques 基于人工智能目标检测与跟踪技术的过冷流沸腾气泡特征提取 期刊信息:International Journal of Heat and Mass Transfer 2024 级别:EI检…

【寸铁的刷题笔记】图论、bfs、dfs

【寸铁的刷题笔记】图论、bfs、dfs 大家好 我是寸铁👊 金三银四,图论基础结合bfs、dfs是必考的知识点✨ 快跟着寸铁刷起来!面试顺利上岸👋 喜欢的小伙伴可以点点关注 💝 🌞详见如下专栏🌞 &…

2024年新提出的算法|鹦鹉优化器(Parrot optimizer):算法及其在医疗问题中的应用

本期介绍一种基于训练后鹦鹉关键行为的高效优化方法——鹦鹉优化器(Parrot Optimizer, PO)。该成果于2024年2月发表在中科院2区top SCI期刊Computers in Biology and Medicine(IF7.7) 1、简介 鹦鹉优化器(PO)是一种受训练有素的…

RocketMQ学习笔记(2)—— 集成SpringBoot

前置知识&#xff1a; RocketMQ学习笔记&#xff08;1&#xff09;—— 基础使用-CSDN博客 7.集成SpringBoot 以上所述功能均是通过RocketMQ的原生API实现的&#xff0c;除此之外SpringBoot对于一些功能进行了封装&#xff0c;使用更加方便 7.1 producer 依赖 <!-- rock…