小程序和页面生命周期详解

目录

小程序的生命周期

创建(onLoad):

显示(onShow):

隐藏(onHide):

卸载(onUnload):

错误监听(onError):

页面的生命周期

页面加载(onLoad):

页面显示(onShow):

页面隐藏(onHide):

页面卸载(onUnload):

页面更新(onReady):


小程序的生命周期

小程序的生命周期主要分为以下几个阶段:

  1. 创建(onLoad)
    • 当小程序启动时,或者从其他页面跳转到当前页面时,会触发 onLoad 生命周期函数。
    • 这个阶段通常用于初始化页面数据,从服务器请求数据等。
  2. 显示(onShow)
    • 页面显示/切入前台时触发。
    • 在 onLoad 之后调用,可以用于页面刚显示时的数据初始化。
  3. 隐藏(onHide)
    • 页面隐藏/切入后台时触发。
    • 在这个生命周期中,你可以执行一些清理工作,比如停止定时器、暂停音频播放等。
  4. 卸载(onUnload)
    • 页面销毁时触发。
    • 在这个生命周期中,你需要执行一些必要的清理工作,比如清除定时器、解绑事件监听器等。
  5. 错误监听(onError)
    • 页面发生错误时触发。
    • 你可以使用这个生命周期函数来捕获和处理页面中的错误。
  onLaunch: function () {  
    // 小程序启动时触发  
    console.log('App launched');  
    // 可以在这里进行全局变量的初始化、网络请求的发起等  
  },  
  onShow: function () {  
    // 小程序启动,或从后台进入前台显示时触发  
    console.log('App showed');  
    // 可以在这里恢复之前的状态,如播放音频、重新开始定时器等  
  },  
  onHide: function () {  
    // 小程序从前台进入后台时触发  
    console.log('App hidden');  
    // 可以在这里进行清理工作,如暂停音频、清除定时器等  
  },  
  onError: function (msg) {  
    // 小程序发生错误时触发  
    console.error('App error:', msg);  
    // 可以在这里记录错误信息、进行错误处理等  
  },  
  // 其他生命周期函数...  

页面的生命周期

页面的生命周期与小程序的生命周期类似,但更侧重于描述页面内部的行为和状态。页面的生命周期主要分为以下几个阶段:

  1. 页面加载(onLoad)
    • 页面加载时触发。
    • 这个阶段主要用于初始化页面数据,获取页面所需的参数等。
  2. 页面显示(onShow)
    • 页面显示/切入前台时触发。
    • 你可以在这个生命周期函数中执行一些需要在页面显示时立即执行的操作。
  3. 页面隐藏(onHide)
    • 页面隐藏/切入后台时触发。
    • 在这个生命周期中,你可以执行一些清理工作,比如停止定时器、暂停动画等。
  4. 页面卸载(onUnload)
    • 页面销毁时触发。
    • 在这个生命周期中,你需要执行一些必要的清理工作,比如清除定时器、解绑事件监听器等。
  5. 页面更新(onReady)
    • 页面初次渲染完成时触发。
    • 你可以在这个生命周期函数中执行一些需要在页面渲染完成后立即执行的操作。
  onLoad: function (options) {  
    // 页面加载时触发  
    console.log('Page loaded');  
    // 可以从options中获取页面参数  
    this.setData({  
      // 更新页面数据  
    });  
  },  
  onShow: function () {  
    // 页面显示/切入前台时触发  
    console.log('Page showed');  
    // 可以在这里执行页面显示时需要的操作  
  },  
  onHide: function () {  
    // 页面隐藏/切入后台时触发  
    console.log('Page hidden');  
    // 可以在这里执行清理工作  
  },  
  onUnload: function () {  
    // 页面销毁时触发  
    console.log('Page unloaded');  
    // 可以在这里执行清理工作,如清除定时器、解绑事件等  
  },  
  onReady: function () {  
    // 页面初次渲染完成时触发  
    console.log('Page ready');  
    // 可以在这里执行页面渲染完成后的操作  
  },  
  // 其他生命周期函数...  

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用最新Hal库实现USART中断收发功能(STM32F4xx)

目录 概述 1 认识STM32F4XX的USART 1.1 USART 功能说明 1.2 USART的中断 1.3 USART 模式配置 1.4 USART的寄存器 2 使用STM32CubeMX 生成工程 2.1 配置参数 2.2 生成工程代码 3 实现软件功能 3.1 软件功能介绍 3.2 认识USART Hal库 3.2.1 初始化函数组 3.2.2 发送…

66-ES6:var,let,const,函数的声明方式,函数参数,剩余函数,延展操作符,严格模式

1.JavaScript语言的执行流程 编译阶段:构建执行函数;执行阶段:代码依次执行 2.代码块:{ } 3.变量声明方式var 有声明提升,允许重复声明,声明函数级作用域 访问:声明后访问都是正常的&…

殿堂级Flink源码极精课程预售

一、为什么我们要读源码? 1、让个人技术快速成长: 优秀的开源框架,底层的源码设计思想也非常优秀,同时还有含有大量的设计模式和并发编程技术,优秀的解决方案,熟读源码对猿们技术提升有很大帮助 2、新技术学习能力: Java开源码框架的源码熟读后,若出现…

挑战杯 基于机器视觉的车道线检测

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 🔥 优质竞赛项目系列,今天要分…

Doris实战——银联商务实时数仓构建

目录 前言 一、应用场景 二、OLAP选型 三、实时数仓构建 四、实时数仓体系的建设与实践 4.1 数仓分层的合理规划 4.2 分桶分区策略的合理设置 4.3 多源数据迁移方案 4.4 全量与增量数据的同步 4.5 离线数据加工任务迁移 五、金融级数仓稳定性最佳实践 5.1 多租户资…

返回数据(返回视图所需要的数据)

在上篇文章中,小编带领大家了解到:返回静态数据-CSDN博客,但是,仅仅返回一个静态页面,对于静态页面的数据没正常返回! 所以,本篇文章便讲述如何返回数据?? 还是先不管前…

AI大语言模型【成像光谱遥感技术】ChatGPT应用指南

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境,是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型,在理解和生成人类语言方面表现出了非凡的能力。本文重点介绍ChatGPT在遥感中的应用,人工智能…

Revit-二开之创建墙-(6)

Revit API窗间墙 protected override Result OnExecute(ExternalCommandData commandData, ref string message, ElementSet elements) {try{// 获取当前活动的文档

html基础标签+Http请求

文章目录 目录 文章目录 前言 一.网址组成 二.HTTP协议解析 Http 请求报文 报文请求方法 报文头 Cache-Control 常见缓存控制行为 cookie 解析 Http 响应报文 常见状态码 三.域名解析(DNS) DNS域名服务器分类 递归查询 迭代查询 四.端口号 五.路径信息 六.Https协议 ​对称…

毫末智行开年融资,揭幕了自动驾驶最后的赛点

毫末智行日前官宣拿到的超亿元B1轮融资,在行业引起了不小的关注。 一方面是信心问题,自动驾驶从早期拼技术到去年拼量产落地,创业公司们的声量此消彼长,有人领先也有人掉队,但市场的态度都以谨慎为主,甚至…

Vue组件置底方法,ElementPlus布局

问题描述 在开发网页时使用了elementplus的el-container组件 组件里分成了main和footer两块&#xff0c;但是想要将两个按钮置底在容器底部遇到了困难 如下图所示&#xff0c;在网页开发者工具可见两个按钮与左侧的图片没有底部对齐 此时我的代码是这样 <el-footer>&…

存储型xss案例

一、环境 DWVA网上自己找 二、开始闯关 先随便写看看 看看源码&#xff0c;数据是被插入到数据库里面了&#xff0c;魔术开关关闭了 数据最后插入显示到index.php 看一下我们目前的cookie值是 看了源码之后也没进行过滤那么我们试着直接插&#xff0c;看是否过滤 之后用户每…

监控与日志

一、监控 1、监控类型 从监控类型上划分&#xff0c;在 K8s 中可以分成四个不同的类型&#xff1a; ① 资源监控&#xff1a;这种监控主要关注于基础资源的使用情况&#xff0c;例如 CPU、内存、网络等。通常使用数值或百分比等单位来统计&#xff0c;可以通过 Zabbix、Tele…

Android 显示系统框架

一.FrameBuffer FrameBuffer 介绍&#xff1a; FrameBuffer中文译名为帧缓冲驱动&#xff0c;它是出现在2.2.xx内核中的一种驱动程序接口。主设备号为29&#xff0c;次设备号递增。 Linux抽象出FrameBuffer这个设备来供用户态进程实现直接写屏。FrameBuffer机制模仿显卡的功能…

github用法详解

本文是一篇面向全体小白的文章,图文兼备。为了让小白们知道如何使用GitHub,我努力将本文写得通俗易懂,尽量让刚刚上网的小白也能明白。所以各位程序员们都可以滑走了~ 啥是GitHub? 百度百科会告诉你, GitHub是一个面向开源及私有软件项目的托管平台,因为只支持Git作为…

可以用来测试的接口

实际开发过程中&#xff0c;我们可以通过postman工具来测试接口 get请求 https://api.github.com/events?id1&nameuser post请求 http://httpbin.org/post 参数1&#xff1a;key1value1 参数2&#xff1a;key2value2

2023年NOC大赛软件创意编程(学而思)赛道图形化小高组复赛试题

目录 第一题 闪烁的星星 第二题 聚沙成塔 第三题 画十字

力扣刷题:100.相同的树

题目&#xff1a; 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 示例 1&#xff1a; 输入&#xff1a;p [1,2,3], q [1,2,3] 输出&#xff…

【JavaScript 漫游】【027】表单事件简记

文章简介 本篇文章为【JavaScript 漫游】专栏的第 026 篇文章&#xff0c;对 JavaScript 中的表单事件进行了简单记录。 input 事件 input 事件当 <input>、<select>、<textarea> 的值发生变化时触发。对于复选框&#xff08;<input typecheckbox>&…

百度搜索引擎SEO优化方法

随着互联网的不断发展&#xff0c;搜索引擎已经成为人们获取信息、产品和服务的主要途径之一。而在中国&#xff0c;百度作为最大的搜索引擎&#xff0c;其影响力不可忽视。了解并掌握百度SEO关键词优化方法&#xff0c;对于提升网站在搜索引擎中的排名至关重要。 关键词选择&a…