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

news2024/11/15 8:08:42

目录

小程序的生命周期

创建(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');  
    // 可以在这里执行页面渲染完成后的操作  
  },  
  // 其他生命周期函数...  

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

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

相关文章

数据分析-Pandas数据的探查面积图

数据分析-Pandas数据的探查面积图 数据分析和处理中,难免会遇到各种数据,那么数据呈现怎样的规律呢?不管金融数据,风控数据,营销数据等等,莫不如此。如何通过图示展示数据的规律? 数据表&…

【深入了解设计模式】组合设计模式

组合设计模式 组合模式是一种结构型设计模式,它允许你将对象组合成树状结构来表现“整体-部分”关系。组合模式使得客户端可以统一对待单个对象和组合对象,从而使得代码更加灵活和易于扩展。 概述 ​ 对于这个图片肯定会非常熟悉,上图我们可…

python 基础知识点(蓝桥杯python科目个人复习计划57)

今日复习计划:做题 例题1:笨笨的机器人 问题描述: 肖恩有一个机器人,他能根据输入的指令移动相应的距离。但是这个机器人很笨,他永远分不清往左边还是往右边移动。肖恩也知道这一点,所以他设定这个机器人…

红外电力设施检测数据集

需要的同学私信联系,推荐关注上面图片右下角的订阅号平台 自取下载。 红外检测技术目标检测准确、速度快、涵盖面积广,可以在不停电、不接触、不解体、不采样的状态下,对带电设备的状态进行检测和诊断,精确查找出设备的劣化程度、…

springboot+vue小区物业管理系统

摘 要 随着我国经济发展和城市开发,人们对住房的需求增大,物业管理也得到了发展。但是,基于人工的物业管理仍然是现阶段我国大部分物业管理公司的管理模式,这种管理模式存在管理人员效率低下、工作难度大的问题,同时…

SpringCloudAlibaba介绍

Spring Cloud Alibaba Spring Cloud Alibaba 是什么?微服务全景图核心特色 大家好,我叫阿明。下面我会为大家准备Spring Cloud Alibaba系列知识体系,结合实战输出案列,让大家一眼就能明白得技术原理,应用于各公司得各…

用冒泡排序模拟C语言中的内置快排函数qsort!

目录 ​编辑 1.回调函数的介绍 2. 回调函数实现转移表 3. 冒泡排序的实现 4. qsort的介绍和使用 5. qsort的模拟实现 6. 完结散花 悟已往之不谏,知来者犹可追 创作不易,宝子们!如果这篇文章对你们有帮助的话,别忘了给个免…

Windows批处理:bat文件学习

目录 第一章、快速了解Windows批处理1.1)Windows批处理相关概念介绍1.1.1)批处理的起源1.1.2)bat文件介绍 1.2)Demo1.2.1)创建文件添加命令1.2.2)bat脚本中的命令解释 第二章、实例2.1)点击bat文…

排序——手撕快排

本节复习快速排序, 快排我们要讲三个版本:一种是霍尔大佬的原版版本, 也就是快速排序的原版。 一种挖坑法。还有一种前后指针法。 首先我们应该知道,三个版本针对的是单趟进行排序的方法不同。 而多趟使用的是递归或者非递归模拟…

Carla自动驾驶仿真九:车辆变道路径规划

文章目录 前言一、关键函数二、完整代码效果 前言 本文介绍一种在carla中比较简单的变道路径规划方法,主要核心是调用carla的GlobalRoutePlanner模块和PID控制模块实现变道,大体的框架如下图所示。 一、关键函数 1、get_spawn_point(),该函数根据指定r…

360文件夹(窗口标签化工具)使用:windows系统的文件管理标签化

软件介绍 360 文件夹是一款单窗口多标签的资源管理器,提高了用户使用各类文件夹操作效率。单窗口多标签,像浏览器一样用多标签管理每个文件夹,以便更加快速高效地切换文件夹,告别凌乱的窗口,加快办公效率;…

剑指offer面试题28:对称的二叉树

#试题28:对称的二叉树 题目: 请设计一个函数判断一棵二叉树是否 轴对称 。 示例 1: 输入:root [6,7,7,8,9,9,8] 输出:true 解释:从图中可看出树是轴对称的。示例 2: 输入:root …

ssm个人学习01

Spring配置文件: spring环境的搭建: 1:导入对应的spring坐标 也就是依赖 2:编写controller, service, dao相关的代码 3:创建配置文件(在resource下面配置文件) 例如:applicationContext.xml <bean id "" class ""> <property name "&…

SQL窗口函数, 测试题

第一题 create table user_score (logday date, -- 考试时间 userid VARCHAR(20), -- 考试用户 score int); -- 考试成绩Insert into user_score values (2019-10-20,11111,85) ,(2019-10-20,22222,83) ,(2019-10-20,33333,86) ,(2019-10-21,11111,87) ,(2019-10-2…

node 之 http模块

1.什么是http模块 在网络节点中&#xff0c;负责消费资源的电脑叫做客户端&#xff1b;负责对外提供网络资源的电脑&#xff0c;叫做服务器 http模块是node.js官方提供的&#xff0c;用来创建web服务器的模块&#xff0c;通过http模块提供的http.createServer()方法&#xff0c…

烧脑问题解决办法:如何选择一款合适自己的手机流量卡

现在社会人们越来越离不开手机了&#xff0c;手机给我们生活带来了翻天覆地的变化&#xff0c;手机需要最多的就是流量了&#xff0c;所以选择一款合适自己的手机流量卡就显得尤为重要了&#xff0c;今天小编就给大家来分享一下我的经验&#xff0c;希望对大家能有帮助&#xf…

构建大语言模型的四个主要阶段

大规模语言模型的发展历程虽然只有短短不到五年的时间&#xff0c;但是发展速度相当惊人&#xff0c;国内外有超过百种大模型相继发布。中国人民大学赵鑫教授团队在文献按照时间线给出 2019 年至 2023 年比较有影响力并且模型参数量超过 100 亿的大规模语言模型。大规模语言模型…

关于synchronized介绍

synchronized的特性 1. 乐观锁/悲观锁自适应,开始时是乐观锁,如果锁冲突频繁,就转换为悲观锁 2.轻量级/重量级锁自适应 开始是轻量级锁实现,如果锁被持有的时间较长,就转换成重量级锁 3.自旋/挂起等待锁自适应 4.不是读写锁 5.非公平锁 6,可重入锁 synchronized的使用 1&#…

01背包(详细)

背包最大重量为4。 有物品3件&#xff0c;分别有其质量和价值。 vector<int> weight{1,3,4}; vector<int> value{15,20,30}; int bag4; 问背包能背的物品最大价值是多少&#xff1f; 这是标准的动态规划问题&#xff0c;每一个问题鱼鳍前面的子问题相联。 目…

structuredClone() 详解

您是否知道&#xff0c;现在 JavaScript 中有一种原生的方式可以深拷贝对象&#xff1f; 没错&#xff0c;这个内置于 JavaScript 运行时的structuredClone函数就是这样&#xff1a; const calendarEvent {title: "Builder.io大会",date: new Date(123),attendees…