当前位置: 首页 > 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.…...

终极指南:Windows平台APK安装器如何让安卓应用无缝运行

终极指南&#xff1a;Windows平台APK安装器如何让安卓应用无缝运行 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在Windows电脑上运行安卓应用曾经是一个技术难题&am…...

罗技PUBG鼠标宏终极教程:告别压枪烦恼,轻松提升射击稳定性

罗技PUBG鼠标宏终极教程&#xff1a;告别压枪烦恼&#xff0c;轻松提升射击稳定性 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 还在为《绝地求…...

基于AutoHotkey的Windows桌面自动化工具开发实战

1. 项目概述与核心价值最近在整理个人项目库时&#xff0c;翻到了一个挺有意思的“老伙计”——cua_desktop_operator_skill。这个项目名听起来有点拗口&#xff0c;直译过来是“CUA桌面操作员技能”。乍一看&#xff0c;可能会让人联想到某种工业控制台的专用软件。但实际上&a…...

告别手动框选!用SUSTechPOINTS的V键批量标注,5分钟搞定一帧点云

解锁SUSTechPOINTS的V键批量标注&#xff1a;点云处理效率革命 在自动驾驶与机器人研发领域&#xff0c;点云标注是构建高精度感知模型的基础环节&#xff0c;但传统逐帧手动标注方式往往成为项目进度的瓶颈。我曾参与过一个城市级点云数据集标注项目&#xff0c;团队最初采用常…...

Arm CoreLink PCK-600电源管理架构与寄存器编程详解

1. Arm CoreLink PCK-600电源控制架构解析在嵌入式系统设计中&#xff0c;电源管理单元&#xff08;PMU&#xff09;是实现高效能耗控制的核心组件。Arm CoreLink PCK-600作为业界领先的电源控制解决方案&#xff0c;其架构设计体现了现代SoC电源管理的先进理念。PCK-600系列采…...

AI驱动全栈开发:Cursor集成模板与高效协作实践

1. 项目概述&#xff1a;当AI代码助手遇上全栈开发最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Cursor-FullStack-AI-App”。光看名字&#xff0c;你大概能猜到它和Cursor这个AI编程工具&#xff0c;以及全栈应用开发有关。作为一个在前后端都摸爬滚打过多年的开发者…...

EL电致发光线与3D打印技术打造可穿戴发光骨架服

1. 项目概述&#xff1a;当发光骨架“活”过来每年万圣节&#xff0c;看着满大街的“幽灵”和“僵尸”&#xff0c;我总想搞点不一样的。直到去年&#xff0c;我决定不再满足于商店里千篇一律的服装&#xff0c;而是想自己动手&#xff0c;做一件真正能“发光”的、有科技感的骨…...

知乎API完全指南:用Python轻松获取知乎数据的5个核心技巧

知乎API完全指南&#xff1a;用Python轻松获取知乎数据的5个核心技巧 【免费下载链接】zhihu-api Zhihu API for Humans 项目地址: https://gitcode.com/gh_mirrors/zh/zhihu-api 在当今数据驱动的时代&#xff0c;知乎数据采集和Python API开发已成为获取高质量中文知识…...

MCP-Commander:让AI助手操作本地文件与命令行的智能接口

1. 项目概述&#xff1a;一个连接思维与执行的智能接口最近在折腾AI工作流的时候&#xff0c;发现了一个挺有意思的项目&#xff0c;叫nmindz/mcp-commander。乍一看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但如果你正在尝试让大型语言模型&#xff08;LLM&#xf…...

GitHub宝藏项目:生成式AI公司全景导航图与实战应用指南

1. 项目概述&#xff1a;一份AI创业公司的全景导航图最近在GitHub上闲逛&#xff0c;发现了一个宝藏仓库&#xff0c;名字叫“awesome-generative-ai-companies”。这个项目&#xff0c;说白了&#xff0c;就是一个由社区驱动的、持续更新的生成式AI公司名录。它不像那些商业咨…...