uniapp生命周期:应用生命周期和页面生命周期

文章目录

  • 1.应用的生命周期
  • 2.页面的生命周期

1.应用的生命周期

生命周期的概念:一个对象从创建、运行、销毁的整个过程被称为生命周期

生命周期函数:在生命周期中每个阶段会伴随着每一个函数的出发,这些函数被称为生命周期函数

所有页面都是在App.vue下进行切换的,是应用入口文件。但App.vue本身不是页面,这里不能编写视图元素,也就是没有<template>

这个文件的作用包括:监听应用生命周期、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听,在页面监听无效。

uni-app 支持如下应用生命周期函数:

函数名说明平台兼容
onLaunchuni-app 初始化完成时触发(全局只触发一次),参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值
onShowuni-app 启动,或从后台进入前台显示,参数为应用启动参数,同 uni.getLaunchOptionsSync 的返回值
onHideuni-app 从前台进入后台
onErroruni-app 报错时触发app-uvue 不支持
onUniNViewMessagenvue 页面发送的数据进行监听,可参考 nvue 向 vue 通讯app-uvue 不支持
onUnhandledRejection对未处理的 Promise 拒绝事件监听函数(2.8.1+ app-uvue 暂不支持)app-uvue 不支持
onPageNotFound页面不存在监听函数app-uvue 不支持
onThemeChange监听系统主题变化app-uvue 不支持
onLastPageBackPress最后一个页面按下Android back键,常用于自定义退出app-uvue-android 3.9+
onExit监听应用退出app-uvue-android 3.9+

示例代码

<script>// 只能在App.vue里监听应用的生命周期export default {onLaunch: function(options) { // 初始化完成出发console.log('App Launch')console.log('应用启动路径:', options.path)},onShow: function(options) { // 显示成功会出发console.log('App Show')console.log('应用启动路径:', options.path)},onHide: function() {// 从前台进入后台 (隐藏会出发)console.log('App Hide')},onError: function() {// 报错时候触发console.log('App onError')}}
</script>

注意

  • 应用生命周期仅可在App.vue中监听,在其它页面监听无效
  • 以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
  • 应用启动参数,可以在API uni.getLaunchOptionsSync获取,详见
  • onlaunch里进行页面跳转,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942
  • App.vue 不能写模板
  • onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)

2.页面的生命周期

uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数,当以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。

函数名说明平台差异说明最低版本
onInit监听页面初始化,其参数同 onLoad 参数,为上个页面传递的数据,参数类型为 Object(用于页面传参),触发时机早于 onLoad百度小程序3.1.0+
onLoad监听页面加载,该钩子被调用时,响应式数据、计算属性、方法、侦听器、props、slots 已设置完成,其参数为上个页面传递的数据,参数类型为 Object(用于页面传参),参考示例。
onShow监听页面显示,页面每次出现在屏幕上都触发,包括从下级页面点返回露出当前页面
onReady监听页面初次渲染完成,此时组件已挂载完成,DOM 树($el)已可用,注意如果渲染速度快,会在页面进入动画完成前触发
onHide监听页面隐藏
onUnload监听页面卸载
onResize监听窗口尺寸变化App、微信小程序、快手小程序
onPullDownRefresh监听用户下拉动作,一般用于下拉刷新,参考示例
onReachBottom页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项
onTabItemTap点击 tab 时触发,参数为Object,具体见下方注意事项微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage用户点击右上角分享微信小程序、QQ小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll监听页面滚动,参数为Objectnvue不支持
onNavigationBarButtonTap监听原生标题栏按钮点击事件,参数为ObjectApp、H5
onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack;详见app、H5、支付宝小程序
onNavigationBarSearchInputChanged监听原生标题栏搜索输入框输入内容变化事件App、H51.6.0
onNavigationBarSearchInputConfirmed监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发。App、H51.6.0
onNavigationBarSearchInputClicked监听原生标题栏搜索输入框点击事件(pages.json 中的 searchInput 配置 disabled 为 true 时才会触发)App、H51.6.0
onShareTimeline监听用户点击右上角转发到朋友圈微信小程序2.8.1+
onAddToFavorites监听用户点击右上角收藏微信小程序、QQ小程序2.8.1+

示例代码

		onLoad(options) { // options上个页面跳转过来的参数console.log("页面加载了!", options) //执行一次},onShow() {console.log("页面显示了!") //可执行多次},onReady() {console.log("页面初次渲染完成!") //执行一次},onHide() {console.log("页面隐藏了!") //可执行多次},

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

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

相关文章

【AI】JetsonNano启动时报错:soctherm OC ALARM

1、问题描述 将JetsonNano烧写SD卡镜像为Ubuntu20.04后&#xff0c;启动时报错&#xff1a;soctherm OC ALARM&#xff0c;启动失败&#xff1b;然后系统一直重启 2、原因分析 “soctherm OC ALARM”是检测到系统温度超过安全阈值时发出的过热警告。 “soctherm”代表系统…

SycoTec 4060 ER-S德国高精密主轴电机如何支持模具的自动化加工?

SycoTec 4060 ER-S高速电主轴在模具自动化加工中的支持体现在以下几个关键方面&#xff1a; 1.高精度与稳定性&#xff1a;SycoTec 4060 ER-S锥面跳动小于1微米&#xff0c;确保了加工过程中的极高精度&#xff0c;这对于模具的复杂几何形状和严格公差要求至关重要。高精度加工…

构建一个去中心化的零售生态参与者的商业模型

在数字化和去中心化技术快速发展的背景下&#xff0c;传统零售行业正迎来革命性的转型。去中心化零售生态不仅让消费者、商家和内容创作者在同一平台上共同参与价值的创造和分配&#xff0c;还推动了零售体验、数据控制和社会互动的彻底变革。本文将探讨如何构建一个去中心化的…

clickhouse 使用global in 优化 in查询

文章目录 in例子使用global in in例子 SELECT uniq(UserID) FROM distributed_table WHERE CounterID 101500 AND UserID IN (SELECT UserID FROM distributed_table WHERE CounterID 34)对于in 查询来说&#xff0c;本来查询的就是分布式表&#xff0c;假设这个表有100 个…

Docker 启动和停止的精准掌舵:操控指南

Docker 启动和停止的精准掌舵&#xff1a;操控指南 Docker是一个开源的应用容器引擎&#xff0c;基于Go语言开发&#xff0c;能够让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化。Do…

Oracle Universal Unique Identifier (UUID)

本文介绍Oracle生成全局唯一ID的函数SYS_GUID&#xff0c;后续会对SYS_GUID和Sequence两种方法进行比较。 SYS_GUID 函数生成并返回一个由 16 个字节组成的全局唯一标识符&#xff08;RAW 值&#xff09;。在大多数平台上&#xff0c;生成的标识符由主机标识符、调用该函数的进…

微信小程序页面配置详解:从入门到精通

微信小程序页面配置详解:从入门到精通 引言 随着移动互联网的飞速发展,微信小程序作为一种新兴的应用形式,因其便捷性和丰富的功能而受到广泛欢迎。在小程序的开发过程中,页面配置是至关重要的一环。本文将深入探讨微信小程序的页面配置,帮助开发者从基础到高级逐步掌握…

d3-contour 生成等高线图

D3.js 是一个强大的 JavaScript 库&#xff0c;用于创建动态、交互式数据可视化。d3-contour 是 D3.js 的一个扩展模块&#xff0c;用于生成等高线图&#xff08;contour plots&#xff09;。 属性和方法 属性 x: 一个函数&#xff0c;用于从数据点中提取 x 坐标。y: 一个函…

Vue 中 data 属性为函数的深度剖析:原理、区别与实践

在 Vue.js 中,data 属性通常是一个 函数 而不是一个对象,这背后有一系列设计上的原因和原理,尤其是与 Vue 的组件系统、实例化机制、以及响应式数据的管理有关。下面我将详细解答这个问题,并结合实际项目示例和代码分析,进行全面讲解。 1. Vue 中 data 为什么是一个函数而…

钉钉与企业微信机器人:助力网站定时任务高效实现

钉钉、企业微信机器人在网站定时任务中的应用&#xff0c;主要体现在自动化通知、提醒以及数据处理等方面。 以下是一些具体的应用场景&#xff1a; 1. 自动化通知 项目进度提醒&#xff1a;在蒙特网站所负责的软件开发或网站建设项目中&#xff0c;可以利用机器人设置定时任…

# [Unity] 【游戏开发】Unity开发基础2-Unity脚本编程基础详解

Unity脚本编程是创建互动式游戏体验的核心技能之一。本文将详细讲解Unity脚本编程的基础知识,包括变量和数据类型、程序逻辑、方法等方面,并通过实例展示如何使用这些基本知识完成简单功能的实现。 1. 新建Unity脚本的基本结构 当在Unity中创建一个脚本时,Unity会生成如下基…

Windows系统下安装Triton 3.0.0预编译Triton 2.1.0

Triton是一个用于编写高效自定义深度学习原语的语言和编译器。它旨在提供一个开源环境&#xff0c;使得编写代码的速度比CUDA更快&#xff0c;同时比其他现有的DSLs&#xff08;领域特定语言&#xff09;更灵活。 在开始安装之前&#xff0c;请确保您的系统满足以下要求&#x…

Docker 部署 MongoDB

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f343; vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode&#x1f4ab; Gitee &#x1f…

uni-app初学笔记:文件路径与作用

components:可复用的组件pages:页面&#xff08;可见/不可见&#xff09;static:静态资源&#xff0c;存放图片视频等 &#xff08;相当于vue项目的 assets&#xff09;mainjs:Vue初始化入口文件App.vue:应用配置&#xff0c;用来配置App全局样式以及监听pages.json :配置页面路…

springboot+redis+lua实现分布式锁

1 分布式锁 Java锁能保证一个JVM进程里多个线程交替使用资源。而分布式锁保证多个JVM进程有序交替使用资源&#xff0c;保证数据的完整性和一致性。 分布式锁要求 互斥。一个资源在某个时刻只能被一个线程访问。避免死锁。避免某个线程异常情况不释放资源&#xff0c;造成死锁…

什么是事务?事务有哪些特性?

在数据库管理中&#xff0c;事务是一个核心概念&#xff0c;它确保了数据操作的完整性和一致性。本文将探讨事务的定义及其四大特性。 一、事务的定义 事务是数据库操作的最小工作单元&#xff0c;是作为单个逻辑工作单元执行的一系列操作。这些操作作为一个整体一起向系统提…

logstash 解析数组格式json数据:split, json

1&#xff0c;需求说明 原始数据格式&#xff1a; 1条 &#xff08;2*2&#xff09;》4个指标数据 [{"app":"aa","url":"www.1.com","metrics":[{"name":"cpu","value":11},{"name&quo…

鸿蒙MVVM模式介绍与使用

文章目录 鸿蒙MVVM模式介绍与使用背景MVVM模式介绍相关装饰器介绍State状态变量Prop、Link的作用 MVVM架构模式的实现以及相关装饰器的使用具体实现效果 总结 鸿蒙MVVM模式介绍与使用 背景 最近在学习鸿蒙开发,想到了以前写安卓移动端应用时经常会用到的MVVM架构模式,就想着能…

Vue 3 学习文档(一)

最近打算做一个项目&#xff0c;涉及到一些前端的知识&#xff0c;因上一次接触前端已经是三四年前了&#xff0c;所以捡一些简单的功能做一下复习。 响应式函数&#xff1a;reactive 和 ref属性绑定&#xff1a;v-bind 和简写语法事件监听&#xff1a;v-on 和简写语法 双向绑…

解决SpringBoot连接Websocket报:请求路径 404 No static resource websocket.

问题发现 最近在工作中用到了WebSocket进行前后端的消息通信&#xff0c;后端代码编写完后&#xff0c;测试一下是否连接成功&#xff0c;发现报No static resource websocket.&#xff0c;看这个错貌似将接口变成了静态资源来访问了&#xff0c;第一时间觉得是端点没有注册成…