【微信小程序】-- 生命周期(二十八)

news2025/7/15 11:44:03

请添加图片描述

  • 💌 所属专栏:【微信小程序开发教程】

  • 😀 作  者:我是夜阑的狗🐶

  • 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘

文章目录

  • 前言
  • 一、生命周期
      • 1、什么是生命周期
      • 2、生命周期的分类
      • 3、生命周期函数
      • 4、生命周期函数的分类
      • 5、应用的生命周期函数
      • 6、页面的生命周期函数
  • 总结


前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第28篇文章;
  今天开始学习微信小程序的第15天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。


一、生命周期

  前面通过案例详细了解上拉触底整个实现过程。那么接下来就来学习小程序中生命周期,只要大致了解一下。话不多说,让我们原文再续,书接上回吧。

请添加图片描述

1、什么是生命周期

  生命周期(Life Cycle)是指一个对象从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。在小程序中,可以把每个小程序运行的过程,也概括为生命周期
  小程序的启动,表示生命周期的开始,小程序的关闭,表示生命周期的结束,而其中的过程就可以称为小程序的生命周期。

2、生命周期的分类

  在小程序中,生命周期分为两类,分别是:

生命周期说明
应用特指小程序从启动 -> 运行 -> 销毁的过程。
页面顾名思义就是说小程序中,每个页面的创建 -> 渲染 -> 销毁的过程。

  其中,页面的生命周期范围较小,应用程序的生命周期范围较大,一个应用程序的生命周期可以包含很多个页面生命周期。

3、生命周期函数

  生命周期函数:是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行,这一点十分重要,对后续的开发过程中业务逻辑处理很有帮助。
  生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,可以在 onLoad 生命周期函数中初始化页面的数据。
  注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

4、生命周期函数的分类

  小程序中的生命周期函数分为两类,分别是:

生命周期说明
应用特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数。
页面特指小程序中,每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数。

5、应用的生命周期函数

  小程序的应用生命周期函数需要在 app.js 中进行声明。

函数说明
onLaunch当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。参数也可以使用 wx.getLaunchOptionsSync 获取。
onShow当小程序启动,或从后台进入前台显示,会触发 onShow。也可以使用 wx.onAppShow 绑定监听。
onHide当小程序从前台进入后台,会触发 onHide。也可以使用 wx.onAppHide 绑定监听。
onError当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息。也可以使用 wx.onError 绑定监听。

  在实际开发过程中,可以在 onLaunch 函数中对小程序中的数据进行初始化,比如读取本地存储里面的数据加载到小程序中。
  通过下面栗子来学习一下onLaunch、onShow 和 onHide这三个函数,具体代码如下:

app.js

App({
  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {
    console.dir("onLaunch");
  },

  /**
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
    console.dir("onShow");
  },

  /**
   * 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () {
    console.dir("onHide");
  },
})

  通过点击微信开发者工具中的切后台按钮可以切换小程序的前后台,可以来看一下运行效果:

在这里插入图片描述

6、页面的生命周期函数

  小程序的页面生命周期函数需要在页面的 .js 文件中进行声明,执行顺序也是从上到下,总共有五个:

函数说明
onLoad页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow页面显示/切入前台时触发。
onReady页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
onHide页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。
onUnload页面卸载时触发。如 wx.redirectTowx.navigateBack 到其他页面时。

  注意:对界面内容进行设置的 API 如 wx.setNavigationBarTitle ,请在onReady之后进行。在开发过程中,页面数据的初始化 一般都会在 onLoad 里进行处理。


总结

  感谢观看,这里就是生命周期的介绍,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

在这里插入图片描述

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉

更多专栏订阅:

  • 😀 【LeetCode题解(持续更新中)】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记(华为云)】
  • 🦄 【程序错误解决方法(建议收藏)】
  • 🚀 【软件安装教程】



订阅更多,你们将会看到更多的优质内容!!

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

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

相关文章

VRRP多网关负载分担实验

1、VRRP专业术语 VRRP备份组框架图如图14-1所示: 图14-1:VRRP备份组框架图 VRRP路由器(VRRP Router):运行VRRP协议的设备,它可能属于一个或多个虚拟路由器,如SwitchA和SwitchB。虚拟路由器(Virtual Router):又称VRR…

Windows安装Qt与VS2019添加QT插件

一、通过Qt安装包方式http://download.qt.io/archive/qt/5.12/5.12.3/.安装可以就选中这个MSVC 2017 64-bit,其他就暂时不用了二、通过vs2019安装Qt插件方式方法1下面这种方式本人安装不起来,一直卡住下不下来。拓展->管理拓展->联机->搜索Qt&a…

【计算机视觉 自然语言处理】什么是多模态?

文章目录一、多模态的定义二、多模态的任务2.1 VQA(Visual Question Answering)视觉问答2.2 Image Caption 图像字幕2.3 Referring Expression Comprehension 指代表达2.4 Visual Dialogue 视觉对话2.5 VCR (Visual Commonsense Reasoning) 视觉常识推理…

让你眼前一亮的不是流行软件,而是这五款小众软件

让你眼前一亮的软件,不一定是市面上最流行的。今天,我将推荐给你五款非常小众,但是十分好用的软件。它们功能强大,使用起来也非常方便,而且经过我个人的测试,确保质量有保障。如果你用完后觉得不好用&#…

Java VisualVM 安装 Visual GC 插件图文教程

文章目录1. 通过运行打开 Java VisualVM 监控工具2. 菜单栏初始视图说明3. 工具插件菜单说明4. 手工安装插件5. 重启监控工具查看 Visual GC1. 通过运行打开 Java VisualVM 监控工具 首先确保已安装 Java 环境,如此处安装版本 JDK 1.8.0_161 C:\Users\niaonao>j…

从零开始学GeoServer源码十一(如何解决No Multipart-config for Servlet错误)

目录前言1.现象2.排查问题3.找到问题4.解决问题5.总结前言 本文起源于我们遇到的一个问题,本来 GeoServer 使用的好好的,但是有天突然发现,无法在 GeoServer 中上传样式的 sld 文件了,报错 “No Multipart-config for Servlet” …

【Python安装配置教程】

Python由荷兰数学和计算机科学研究学会的吉多范罗苏姆于1990年代初设计,作为一门叫做ABC语言的替代品。Python提供了高效的高级数据结构,还能简单有效地面向对象编程。Python语法和动态类型,以及解释型语言的本质,使它成为多数平台…

一篇普通的bug日志——bug的尽头是next吗?

文章目录[bug 1] TypeError: method object is not subscriptable[bug 2] TypeError: unsupported format string passed to numpy.ndarray.__format__[bug 3] ValueError:Hint: Expected dtype() paddle::experimental::CppTypeToDataType<T>::Type()[bug 4] CondaSSLE…

javaweb网上宠物商城管理系统分前后台(源码+数据库+开题报告+ppt+文档)

一、 系统运行环境 硬件配置&#xff1a;2.4G以上处理器&#xff0c;4G以上内存&#xff0c;250G以上硬盘空间&#xff1b; 操作系统&#xff1a;Windows XP、Windows 7或更高版本&#xff1b; 数据库&#xff1a;MySQL&#xff1b; Web服务器&#xff1a;Tomcat 7.0&#xff…

标准信号转高电压高电流输出放大转换器0-5v/0-24v转4-20mA/0-500mA

概述导轨安装DIN11HVI 系列模拟信号隔离放大器是一种将输入信号隔离放大、转换成按比例输出的直流信号混合集成厚模电路。产品广泛应用在电力、远程监控、仪器仪表、医疗设备、工业自控等需要直流信号隔离测控的行业。此系列产品内部采用了线性光电隔离技术相比电磁隔离具有更好…

Java中异常(异常的处理方式(JVM默认的处理方式、自己处理(灵魂四问)、抛出异常(throws、throw))、异常中的常见方法、小练习、自定义异常)

编译时异常&#xff1a;在编译阶段&#xff0c;必须要手动处理&#xff0c;否则代码报错&#xff08;提醒程序员检查本地信息&#xff09; 运行时异常&#xff1a;在编译阶段是不需要处理的&#xff0c;是代码运行时出现的异常&#xff08;代码出错而导致程序出现的问题&#…

3D软件开发工具HOOPS 2023 更新亮点合集——增强了对建筑环境和自然环境中3D图形的真实感

HOOPS SDK是全球领先开发商TechSoft 3D旗下的原生产品&#xff0c;专注于Web端、桌面端、移动端3D工程应用程序的开发。长期以来&#xff0c;HOOPS通过卓越的3D技术&#xff0c;帮助全球600多家知名客户推动3D软件创新&#xff0c;这些客户包括SolidWorks、SIEMENS、Oracle、Ar…

Java高级-----多线程

多线程JAVA高级--多线程1、基本概念&#xff1a;程序、进程、线程1.1进程与线程1.2使用多线程的优点1.3何时需要多线程2、线程的创建和使用2.1线程的创建和启动2.2Thread 类2.3API 中创建线程的四种方式2.3.1方式一继承 Thread 类2.3.1.1 步骤2.3.1.2创建过程中的两个问题说明2…

JMU软件20 计算机网络复习

文章目录题型单位换算第一章协议与划分层次、网络协议的三个组成要素&#xff0c;分层的思想等协议网络协议的三个组成要素分层的思想⭐计算机网络体系结构OSI 的七层协议TCP/IP 的四层协议五层协议发送时延、传播时延、总时延、往返时间RTT计算第二章 物理层传输媒体导向性传输…

如何用SaleSmartly完善您的实时聊天页面

众所周知&#xff0c;第一印象在业务中非常重要&#xff0c;需要确保您的网站是可以促进您与客户之间的顺畅联系。想想您访问商家联系页面时&#xff0c;你通常看到什么&#xff1f;可能是用于发送电子邮件的对话框&#xff0c;也可能是要呼叫的电话号码&#xff0c;虽然这是一…

【LeetCode】剑指 Offer(18)

目录 题目&#xff1a;剑指 Offer 35. 复杂链表的复制 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 写在最后&#xff1a; 题目&#xff1a;剑指 Offer 35. 复杂链…

Mysql8.0的特性

Mysql8.0的特性 建议使用8.0.17及之后的版本&#xff0c;更新的内容比较多。 新增降序索引 -- 如下所示&#xff0c;我们可以在创建索引时 在字段名后面指定desc进行降序排序 create table t1(c1 int,c2 int,index idx_c1_c2(c1,c2 desc));group by 不再隐式排序 mysql5.7的版…

使用Chakra-UI封装简书的登录页面组件(React)

要求&#xff1a;使用chakra ui和react 框架将简书的登录页面的表单封装成独立的可重用的组件使用到的API&#xff1a;注册API请求方式&#xff1a;POST 请求地址&#xff1a;https://conduit.productionready.io/api/users请求数据: {"user":{ "username&quo…

typora-beta-0.11.18版本又提示过期的解决方案

很实用&#xff0c;所以照搬一下下面的作者的回答&#xff0c;省得以后再找~~~ 知乎的作者来源如下&#xff1a; 作者&#xff1a;吴小皓 链接&#xff1a;typora打开报错&#xff1a;This beta version of Typora is expired, please download and install a newer version …

Servlet | Servlet简单入门——构建第一个Servlet项目

本专栏主要是记录学习JavaWeb中的Servlet相关知识点&#xff0c;如果刚开始学习Java的小伙伴可以点击下方连接查看专栏 本专栏地址&#xff1a;&#x1f525;Servlet Java入门篇&#xff1a; &#x1f525;Java基础学习篇 Java进阶学习篇&#xff08;持续更新中&#xff09;&am…