微信小程序生命周期详解

一、全局生命周期

微信小程序的全局生命周期指的是小程序从启动到销毁期间经历的一系列阶段和事件。全局生命周期主要在 App() 构造器中定义,包括以下几个阶段:

  1. onLaunch:小程序初始化完成时触发,全局只触发一次。
  2. onShow:小程序启动或从后台进入前台显示时触发。
  3. onHide:小程序从前台进入后台时触发。
  4. onError:小程序发生脚本错误或 API 调用失败时触发。
  5. onPageNotFound:小程序页面找不到时触发。

全局生命周期代码示例:

App({onLaunch: function () {console.log('小程序初始化完成');},onShow: function () {console.log('小程序启动或从后台进入前台显示');},onHide: function () {console.log('小程序从前台进入后台');},onError: function (msg) {console.log('小程序发生错误:', msg);},onPageNotFound: function (options) {console.log('小程序页面找不到:', options);}
})

二、页面生命周期

页面生命周期指的是小程序页面从创建到销毁期间经历的一系列阶段和事件。页面生命周期主要在 Page() 构造器中定义,包括以下几个阶段:

  1. onLoad:页面加载时触发,一个页面只会触发一次。
  2. onShow:页面显示时触发。
  3. onReady:页面初次渲染完成时触发。
  4. onHide:页面隐藏时触发。
  5. onUnload:页面卸载时触发。

页面生命周期代码示例:

Page({onLoad: function (options) {console.log('页面加载');},onShow: function () {console.log('页面显示');},onReady: function () {console.log('页面初次渲染完成');},onHide: function () {console.log('页面隐藏');},onUnload: function () {console.log('页面卸载');}
})

三、组件生命周期

组件生命周期指的是自定义组件从创建到销毁的一系列阶段和事件。组件生命周期包括以下几个阶段:

  1. created:组件实例被创建时触发。
  2. attached:组件被挂载到页面节点树时触发。
  3. ready:组件在视图层布局完成后执行。
  4. moved:组件实例被移动到节点树另一个位置时执行。
  5. detached:组件实例被从页面节点树移除时执行。

组件生命周期代码示例:

Component({lifetimes: {created: function () {console.log('组件实例被创建');},attached: function () {console.log('组件被挂载到页面节点树');},ready: function () {console.log('组件在视图层布局完成');},moved: function () {console.log('组件实例被移动到节点树另一个位置');},detached: function () {console.log('组件实例被从页面节点树移除');}}
});

四、生命周期的运行顺序

  1. 首先执行 App.onLaunch -> App.onShow
  2. 其次执行 Component.created -> Component.attached
  3. 再执行 Page.onLoad -> Page.onShow
  4. 最后执行 Component.ready -> Page.onReady

通过理解这些生命周期的运行顺序和作用,开发者可以在适当的时机执行相应的代码逻辑,从而提高小程序的性能和用户体验。

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

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

相关文章

Element UI 打包探索【3】

目录 第九个命令 node build/bin/gen-cssfile gulp build --gulpfile packages/theme-chalk/gulpfile.js cp-cli packages/theme-chalk/lib lib/theme-chalk 至此,dist命令完成。 解释why Element UI 打包探索【1】里面的why Element UI 打包探索【2】里面…

去哪儿大数据面试题及参考答案

Hadoop 工作原理是什么? Hadoop 是一个开源的分布式计算框架,主要由 HDFS(Hadoop 分布式文件系统)和 MapReduce 计算模型两部分组成 。 HDFS 工作原理 HDFS 采用主从架构,有一个 NameNode 和多个 DataNode。NameNode 负…

深度学习中的梯度下降算法:详解与实践

梯度下降算法是深度学习领域最基础也是最重要的优化算法之一。它驱动着从简单的线性回归到复杂的深度神经网络模型的训练和优化。作为深度学习的核心工具,梯度下降提供了调整模型参数的方法,使得预测的结果逐步逼近真实值。本文将从梯度下降的基本原理出…

C++ ADL参数依赖查找

自以为作为一个C老鸟,对C里面各种概念应该都比较熟悉了,但是今天看书的时候又学到了一个装逼的概念ADL,本着学C装逼装到底的精神,就把这个概念学习了一番。 ADL 的工作原理 在C中,ADL 是 Argument-Dependent Lookup …

低功耗墒情监测站产品详解 如何助力高标准农田项目发展

一、产品概述 低功耗墒情监测站是一款集成了传感、无线通信、处理与控制等物联网技术的先进设备。它利用高精度传感器实时测量土壤墒情(即土壤水分含量),并通过物联网技术将数据传输至云平台。这一创新设计无需铺设专门的通信线路&#xff0c…

VM+Ubuntu18.04+XSHELL+VSCode环境配置

前段时间换了新电脑,准备安装Linux学习环境:VM虚拟机、Ubuntu18.04操作系统、XSHELL、XFTP远程连接软件、VSCode编辑器等,打算把安装过程记录一下。 1. 虚拟机介绍 为什么要用虚拟机? 想学习Linux操作系统,一般有3种…

《Opencv》基础操作<1>

目录 一、Opencv简介 主要特点: 应用领域: 二、基础操作 1、模块导入 2、图片的读取和显示 (1)、读取 (2)、显示 3、 图片的保存 4、获取图像的基本属性 5、图像转灰度图 6、图像的截取 7、图…

【Android】ARouter的使用及源码解析

文章目录 简介介绍作用 原理关系 使用添加依赖和配置初始化SDK添加注解在目标界面跳转界面不带参跳转界面含参处理返回结果 源码基本流程getInstance()build()navigation()_navigation()Warehouse ARouter初始化init帮助类根帮助类组帮助类 completion 总结 简介 介绍 ARouter…

国内首家! 阿里云人工智能平台 PAI 通过 ITU 国际标准测评

近日,阿里云人工智能平台 PAI 顺利通过中国信通院组织的 ITU-T AICP-GA(Technical Specification for Artificial Intelligence Cloud Platform:General Architecture)国际标准和《智算工程平台能力要求》国内标准一致性测评&…

SpringBoot文件上传之秒传、断点续传、分片上传

一 文件上传的常见场景 在日常开发中,文件上传的场景多种多样。比如,在线教育平台上的视频资源上传,社交平台上的图片分享,以及企业内部的知识文档管理等。这些场景对文件上传的要求也各不相同,有的追求速度&#xff…

力扣 最长回文字串-5

最长回文字串-5 //双指针&#xff0c;暴力解法 class Solution { public:bool is(string s, int l, int r) // 判断是否为回文{while (l < r) {if (s[l] ! s[r]) {return false;}l;r--;}return true;}string longestPalindrome(string s) {int Max 0;//用来判断找出最长字…

【算法】快速求出 n 最低位的 1

Leetcode 2438. 二的幂数组中查询范围内的乘积 先展示算法具体实现 while (n) {int lowbit n & (-n);powers.push_back(lowbit);n ^ lowbit; }这段代码的核心是通过 n & (-n) 计算出 n 的 最低位的 1&#xff08;即最右边的 1&#xff09; -n 是 n 的二进制补码表…

数据抽取平台pydatax使用案例---11个库项目使用

数据抽取平台pydatax&#xff0c;前期项目做过介绍&#xff1a; 1&#xff0c;数据抽取平台pydatax介绍--实现和项目使用 项目2&#xff1a; 客户有9个分公司&#xff0c;用的ERP有9套&#xff0c;有9个库&#xff0c;不同版本&#xff0c;抽取的同一个表字段长度有不一样&…

.NET9 - Swagger平替Scalar详解(四)

书接上回&#xff0c;上一章介绍了Swagger代替品Scalar&#xff0c;在使用中遇到不少问题&#xff0c;今天单独分享一下之前Swagger中常用的功能如何在Scalar中使用。 下面我们将围绕文档版本说明、接口分类、接口描述、参数描述、枚举类型、文件上传、JWT认证等方面详细讲解。…

shiny动态生成颜色选择器并将其用于绘图

在 Shiny 中使用 uiOutput 和 renderUI 动态生成 UI 控件是一种灵活的方法。结合 uiOutput(ns("colorSelectors")) 的用法&#xff0c;可以实现动态生成颜色选择器&#xff0c;并响应用户选择进行绘图或更新显示。 代码 library(shiny) library(colourpicker)# UI …

【单点知识】基于PyTorch进行模型部署

文章目录 0. 前言1. 模型导出1.1 TorchScript1.1.1 使用 torch.jit.trace1.1.2 使用 torch.jit.script 1.2 ONNX1.2.1 导出为 ONNX 格式 1.3 导出后的模型加载1.3.1 加载 TorchScript 模型1.3.2 加载 ONNX 模型 2. 模型优化2.1 模型量化2.2 模型剪枝 3. 服务化部署3.1 Flask 部…

‌Kotlin中的?.和!!主要区别

目录 1、?.和!!介绍 2、使用场景和最佳实践 3、代码示例和解释 1、?.和!!介绍 ‌Kotlin中的?.和!!主要区别在于它们对空指针的处理方式。‌ ‌?.&#xff08;安全调用操作符&#xff09;‌&#xff1a;当变量可能为null时&#xff0c;使用?.可以安全地调用其方法或属性…

java基础知识(常用类)

目录 一、包装类(Wrapper) (1)包装类与基本数据的转换 (2)包装类与String类型的转换 (3)Integer类和Character类常用的方法 二、String类 (1)String类介绍 1)String 对象用于保存字符串,也就是一组字符序列 2)字符串常量对象是用双引号括起的字符序列。例如:&quo…

《Hello YOLOv8从入门到精通》5,颈部网络(Neck)结构、核心源码和参数调优

YOLOv8的颈部网络&#xff08;Neck&#xff09;是目标检测模型中的关键组成部分&#xff0c;它位于骨干网络&#xff08;Backbone&#xff09;和头部网络&#xff08;Head&#xff09;之间&#xff0c;主要负责进行特征融合和增强。 在YOLOv8中&#xff0c;颈部网络采用了先进…

C#里怎么样实现单向链表?

C#里怎么样实现单向链表? 数据结构,是程序基本表示方法。 不同的数据结构,就需要采用不同的算法。 在软件开发中,使用到的链表还是比较多的。不过,目前C#语言,基本上都类库, 所以需要自己创建链表的机会,基本不存在了。 但是作为理解原理,还是学习一下吧。 下面的例…