当前位置: 首页 > news >正文

uniapp的生命周期

在 UniApp 中,生命周期函数是指在组件(如页面、视图等)创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数,帮助开发者在适当的时机进行相关的逻辑处理。

UniApp 的生命周期函数可以分为 页面生命周期组件生命周期 两类。以下是详细的介绍:

一、页面生命周期

页面生命周期指的是每个页面从加载、显示到销毁的整个过程。

  1. onLoad
    页面加载时触发,参数 options 包含了页面的启动参数。
    适用于:获取页面传递的参数,初始化页面数据等。

    javascript

  • onLoad(options) {console.log('页面加载', options);
    }
    
  • onShow
    页面每次显示时触发。
    适用于:页面显示时需要刷新数据或处理一些界面相关的逻辑。

    javascript

  • onShow() {console.log('页面显示');
    }
    
  • onReady
    页面首次渲染完成时触发。
    适用于:页面渲染完成后的一些处理,通常用于 DOM 操作等。

    javascript

  • onReady() {console.log('页面渲染完成');
    }
    
  • onHide
    页面隐藏时触发(如进入后台、页面跳转)。
    适用于:暂停或保存状态,避免一些不必要的操作。

    javascript

  • onHide() {console.log('页面隐藏');
    }
    
  • onUnload
    页面卸载时触发(如页面被销毁,用户离开页面)。
    适用于:页面销毁时进行清理操作,如清除定时器、取消订阅等。

    javascript

  • onUnload() {console.log('页面卸载');
    }
    
  • onPullDownRefresh
    用户下拉页面时触发。
    适用于:刷新页面内容。

    javascript

  • onPullDownRefresh() {console.log('页面下拉刷新');
    }
    
  • onReachBottom
    页面触底时触发。
    适用于:加载更多数据。

    javascript

  • onReachBottom() {console.log('页面触底');
    }
    
  • onPageScroll
    页面滚动时触发。
    适用于:监听滚动位置变化,执行页面滚动相关操作。

    javascript

  • onPageScroll(e) {console.log('页面滚动', e);
    }
    
  • onShareAppMessage
    用户点击分享按钮时触发。
    适用于:定制分享内容。

    javascript

  1. onShareAppMessage() {return {title: '分享标题',path: '/pages/index/index',};
    }
    

二、组件生命周期

组件生命周期是指 UniApp 中自定义组件的生命周期函数。它分为 组件创建组件显示组件销毁 等过程。

  1. created
    组件实例化时触发。
    适用于:初始化组件的状态,执行数据请求等。

    javascript

  • created() {console.log('组件创建');
    }
    
  • attached
    组件挂载到页面时触发。
    适用于:DOM 节点已渲染,适合进行操作和监听事件。

    javascript

  • attached() {console.log('组件挂载');
    }
    
  • ready
    组件渲染完成后触发。
    适用于:执行需要访问组件节点的方法,如获取元素尺寸等。

    javascript

  • ready() {console.log('组件渲染完成');
    }
    
  • moved
    组件被移动到节点树中时触发。
    适用于:处理组件位置变动时的逻辑。

    javascript

  • moved() {console.log('组件已移动');
    }
    
  • detached
    组件从页面卸载时触发。
    适用于:清理定时器、事件监听器等资源。

    javascript

  1. detached() {console.log('组件卸载');
    }
    

三、全局生命周期

UniApp 中还可以使用一些全局生命周期函数来管理应用程序的状态:

  1. onLaunch
    应用启动时触发。
    适用于:全局初始化操作、获取用户信息等。

    javascript

  • onLaunch() {console.log('应用启动');
    }
    
  • onShow
    应用每次显示时触发。
    适用于:应用从后台回到前台时进行的一些逻辑处理。

    javascript

  • onShow() {console.log('应用显示');
    }
    
  • onHide
    应用每次隐藏时触发。
    适用于:应用进入后台时,暂停相关操作等。

    javascript

  • onHide() {console.log('应用隐藏');
    }
    
  • onError
    全局错误捕获。
    适用于:捕获并处理应用运行时的错误。

    javascript

  • onError(msg) {console.log('应用发生错误:', msg);
    }
    
  • onPageNotFound
    页面不存在时触发。
    适用于:自定义 404 页面或处理页面跳转失败等。

    javascript

  1. onPageNotFound() {console.log('页面不存在');
    }
    

总结

UniApp 的生命周期函数为开发者提供了丰富的钩子,可以在不同的时间点处理相应的逻辑。页面生命周期主要包括页面加载、显示、隐藏和卸载等阶段,而组件生命周期则处理组件的创建、挂载、渲染和销毁等。合理利用这些生命周期函数,可以更高效地开发 UniApp 应用,提升应用的性能和用户体验。

相关文章:

uniapp的生命周期

在 UniApp 中,生命周期函数是指在组件(如页面、视图等)创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数,帮助开发者在适当的时机进行相关的逻辑处理。 UniApp 的生命周期函数可以分为 页面生命周期 和 组件…...

基于 RNN(GRU, LSTM)+CNN 的红点位置检测(pytorch)

文章目录 1 项目背景2 数据集3 思路4 实验结果5 代码 1 项目背景 需要在图片精确识别三跟红线所在的位置,并输出这三个像素的位置。 其中,每跟红线占据不止一个像素,并且像素颜色也并不是饱和度和亮度极高的红黑配色,每个红线放大…...

L2G3000-LMDeploy 量化部署实践

文章目录 LMDeploy 量化部署实践闯关任务环境配置W4A16 量化 KV cacheKV cache 量化Function call LMDeploy 量化部署实践闯关任务 环境配置 conda create -n lmdeploy python3.10 -y conda activate lmdeploy conda install pytorch2.1.2 torchvision0.16.2 torchaudio2.1.…...

verilog编程规范

verilog编程规范 文章目录 verilog编程规范前言一、代码划分二、verilog编码ABCDEFG 前言 高内聚,低耦合,干净清爽的代码 一、代码划分 高内聚: 一个功能一个模块干净的接口提取公共的代码 低耦合: 模块之间低耦合尽量用少量…...

飞飞5.4游戏源码(客户端+服务端+工具完整源代码+5.3fix+5.4patch+数据库可编译进游戏)

飞飞5.4游戏源码(客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏) 下载地址: 通过网盘分享的文件:【源码】飞飞5.4游戏源码(客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏) 链…...

【MySQL】——​​用一文领悟表的增删查改

目录 前言 🍃1.表的增加 🍙1.1增——insert 🍙1.2插入否则更新 🍤1.2.1影响行说明 🍂2.表的查询 🍘2.1查询——select 🍘2.2特殊表查询 🍥2.2.1添加表达式 🍥…...

Zabbix监控Oracle 19c数据库完整配置指南

Zabbix监控Oracle 19c数据库完整配置指南 本文将详细介绍如何使用Zabbix配置Oracle 19c数据库监控,包括安装、配置、问题排查等全过程。本指南适合新手独立完成配置。 1. 环境准备 1.1 系统要求 Oracle 19c数据库服务器Zabbix服务器(版本5.0或更高&a…...

静态路由与交换机配置实验

1.建立网络拓扑 添加2台计算机,标签名为PC0、PC1;添加2台二层交换机2960,标签名为S0、S1;添加2台路由器2811,标签名为R0、R1;交换机划分的VLAN及端口根据如下拓扑图,使用直通线、DCE串口线连接…...

【jvm】讲讲jvm中的gc

目录 1. 说明2. 主要算法2.1 标记-清除算法2.2 复制算法2.3 标记-整理算法3. 主要回收器3.1 Serial GC3.2 Parallel GC3.3 CMS(Concurrent Mark-Sweep)GC3.4 G1(Garbage-First)GC 4. 触发条件4.1 Minor GC(Young GC&am…...

openlayers地图事件

OpenLayers是一个开源的JavaScript库,用于在Web上创建交互式地图。它提供了许多地图事件,使用户可以与地图进行交互。以下是OpenLayers常用的地图事件: 1. click:当用户单击地图时触发该事件。 2. dblclick:当用户双…...

杂记9---一些场景git操作汇总

背景:不同项目需求,所需要git操作集合,不太一样,这里汇总记录一下。 场景1:给本地项目添加到远程仓库的新建分支上 把本地节点保存在自己库的一个分支: git init git remote add origin xxx.git 远程仓库…...

Mysql索引,聚簇索引,非聚簇索引,回表查询

什么是索引 数据库索引是为了实现高效数据查询的一种有序的数据数据结构,类似于书的目录,通过目录可以快速的定位到想要的数据,因为一张表中的数据会有很多,如果直接去表中检索数据效率会很低,所以需要为表中的数据建立…...

【优选算法 二分查找】二分查找算法入门详解:二分查找小专题

x 的平方根 题目解析 算法原理 解法一&#xff1a; 暴力解法 如果要求一个数(x)的平方根&#xff0c;可以从 0 往后枚举&#xff0c;直到有一个数(a)&#xff0c;a^2<x&#xff0c;(a1)^2>x&#xff0c;a即为所求&#xff1b; 解法二&#xff1a;二分查找 …...

如何将CSDN博客下载为PDF文件

1.打开CSDN文章内容 2.按键盘上的f12键&#xff08;或者右键—审查元素&#xff09;进入浏览器调试模式&#xff0c;点击控制台&#xff08;Console&#xff09;进入控制台 3.在控制台输入以下代码&#xff0c;回车 4.在弹出的打印页面中将布局设置成横向&#xff0c;纵向会…...

pdf转word/markdown等格式——MinerU的部署:2024最新的智能数据提取工具

一、简介 MinerU是开源、高质量的数据提取工具&#xff0c;支持多源数据、深度挖掘、自定义规则、快速提取等。含数据采集、处理、存储模块及用户界面&#xff0c;适用于学术、商业、金融、法律等多领域&#xff0c;提高数据获取效率。一站式、开源、高质量的数据提取工具&…...

2024年下半年网络工程师案例分析真题及答案解析

2024年下半年网络工程师案例分析真题及答案解析 试题一(15分) [说明] 公司为某科技园区的不同企业提供网络服务,不同企业的业务有所不同,每个企业因业务需要在不同的地点有多个分支机构。其拓扑结构如图1所示。企业用户通过楼层接入交换机、楼栋汇聚交换机和区域交换机接…...

English phonetic symbol

英语音标发音表-英语48个音标在线读 (jiwake.com) 【英语音标教程】从此学会国际音标|英式音标|BBC音标教程全解_哔哩哔哩_bilibili 元音 单元音 /iː/,/ɪ/ 这两个音不是发音长短的区别&#xff0c; /uː/ /ʊ/ 上面那个就正常读&#xff0c;下面那个她的气大概是往你斜…...

普及组集训--图论最短路径设分层图

P4568 [JLOI2011] 飞行路线 - 洛谷 | 计算机科学教育新生态 可以设置分层图&#xff1a;(伪代码&#xff09; E(u,v)w;无向图 add(u,v,w),add(v,u,w); for(j1~k){add(ujn,vjn,w);add(vjn,ujn,w);add(ujn-j,vjn-j,0);add(vjn-j,ujn-j,0); } add(ujn-j,vjn-j,0); add(vjn-j,uj…...

SYN6288语音合成模块使用说明(MicroPython、STM32、Arduino)

模块介绍 SYN6288中文语音合成模块是北京宇音天下科技有限公司推出的语音合成模块。该模块通过串口接收主控传来的语音编码后&#xff0c;可自动进行自然流畅的中文语音播报。 注&#xff1a;SYN6288模块无法播报英文单词和句子&#xff0c;只能按字母播报英文 &#xff1b;而…...

Spring完整知识三(完结)

Spring集成MyBatis 注意 Spring注解形式集成MyBatis时&#xff0c;若SQL语句比较复杂则仍采用映射文件形式书写SQL语句&#xff1b;反之则用注解形式书写SQL语句&#xff0c;具体可详见Spring注解形式 环境准备相同步骤 Step1&#xff1a; 导入相关坐标&#xff0c;完整pom.…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...