uni-app生命周期和路由跳转
生命周期分为:应用生命周期和页面生命周期
具体内容可参考:uni-app官网Api
应用生命周期(仅可在App.vue中监听)
(1)onLaunch:当uni-app 初始化完成时触发(全局之触发一次)
App.vue里的onLaunch中option作用:获取用户进入小程序或退出小程序的场景值。
(2)onShow:当uni-app启动,或从后台进入前台显示/监听用户进入小程序
(3)onHide:当uni-app从前台进入后台、监听用户离开小程序
(4)onError:当uni-app报错时触发
(5)onUniNViewMessage:对nvue页面发送的数据进行监听
页面生命周期(在页面中添加)
(1)onLoad(监听页面加载)
(2)onShow(监听页面显示)
(3)onReady(监听页面初次渲染完成)
(4)onHide(监听页面隐藏)


(5)onUnload:监听页面卸载
(6)onResize:监听窗口尺寸变化
(7)onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新
当页面中需要用到下拉刷新功能时,打开pages.json,在‘globalStyle’里设置‘enablePullDownRefresh’为true

此时所有页面都可以完成下拉刷新功能
如果想单个页面不能执行刷新功能:在pages.json里单个页面上添加

(8)onReachBottom:页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
(9)onTabltemTap:点击tabBar时触发
(10)onShareAppMessage:用户点击右上角分享
可在 转发时设置转发标题,路径和图片


(11)onPageScroll:监听页面滚动
(12)onNavigationBarButtonTap:监听原生标题栏按钮点击事件
(13)onBackPress:监听页面返回
(14)onNavigationBarSearchInputChanged :监听原生标题栏搜索输入框输入内容变化事件
(15)onNavigationBarSearchInputConfirmed :监听原生标题栏搜索输入框搜索事件,用户点击软键盘上的“搜索”按钮时触发
(16)onNavigationBarSearchInputClicked :监听原生标题栏搜索输入框点击事件
组件生命周期(与vue标准组件的生命周期相同)
(1)beforeCreate :在实例初始化之后被调用
(2)created :在实例创建完成后被立即调用
(3)beforeMount :在挂载开始之前被调用
(4)mounted :挂载到实例上去之后调用(该钩子在服务器端渲染期间不被调用)
(5)beforeUpdate :数据更新时调用,发生在虚拟 DOM 打补丁之前(该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行)
(6)updated :由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子(该钩子在服务器端渲染期间不被调用。)
(7)beforeDestroy :实例销毁之前调用。在这一步,实例仍然完全可用(该钩子在服务器端渲染期间不被调用。)
(8)destroyed :Vue 实例销毁后调用(该钩子在服务器端渲染期间不被调用。)
路由跳转
方法一(@tap事件跳转)
想要跳转页面就在首页需要跳转的位置加上方法名@click=“方法名”

五种跳转方法:
uni.navigateTo 保留当前页面,跳转到应用内的某个页面 //一般用于需要返回
uni.redirectTo 关闭当前页面,跳转到应用内的某个页面。
uni.reLaunch 关闭所有页面,打开到应用内的某个页面。
uni.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.navigateBack 关闭当前页面,返回上一页面或多级页面。
方法二(navigator 标签)
<navigator url="../hello/hello" open-type="navigate">
<view class="struct">
I am {{student.age}} yeas old </br>
I have skills such as {{student.skill[0]}},{{student.skill[1]}}
</view>
</navigator>

uni-app生命周期和路由跳转的更多相关文章
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 微信小程序APP生命周期
小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...
- 微信APP生命周期、页面生命周期
目录 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注 ...
- 微信小程序-APP生命周期与运行机制
QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...
- WebApp中的页面生命周期及路由管理
最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...
- vue的生命周期和路由守卫
组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed 还有 ...
- vue 生命周期钩子 路由钩子 动画钩子 执行顺序
进入首页的钩子们 1 路由钩子 路由跳转前beforeEach 2 路由钩子 home组件内部:守卫执行前beforeRouteEnter 3.路由钩子 路由跳转后afterEach 4 生命周期 h ...
- ORM数据增删改查 django请求生命周期 django路由层 反向解析
目录 可视化界面之数据增删改查 补充 1.建表 2.数据展示功能 3.数据添加功能 4.数据编辑功能 5.数据删除功能 django请求生命周期流程图 crsf wsgirel 与 uwsgi ngi ...
随机推荐
- PHP实践项目【1】:注册登录页面
在我们这个项目里面,一共用到了5个php文件,他们分别是: login.php 登录页面 logincheck.php 登录检测php文件 register.php 新用户注册页面 regcheck. ...
- JDK 8之前日期和时间的API
JDK 8之前日期和时间的API(1) System类中的currentTimeMillis():返回当前时间与1970年1月1日0时0分0秒之间以毫秒为单位的时间差.称为时间戳. java.util ...
- 【算法】基础DP
参考资料 背包九讲 一.线性DP 如果现在在状态 i 下,它上一步可能的状态是什么. 上一步不同的状态依赖于什么. 根据上面的分析,分析出状态和转移方程.注意:dp 不一定只有两维或者一维,一开始设计 ...
- [Mysql] 两段提交
事务提交 Mysql 默认开启自动提交事务 两段提交 把一个事务分成两个阶段来提交,就是把redolog拆分成了prepare和commit两段 MySQL想要准备事务的时候会先写redolog.bi ...
- `<jsp:getProperty>`动作和`<jsp:setProperty>`动作的使用在一个静态页面填写图书的基本信息,页面信息提交给其他页面,并且在其页面显示。要去将表单元素的值赋值给Java
<jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:get ...
- Python3.11正式版,它来了!
转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/b055fbf2.html 你好,我是测试蔡坨坨. 就在前几天,2022年10月24日,Python3.11正式版发布了! P ...
- JS逆向实战4--cookie——__jsl_clearance_s 生成
分析 网站返回状态码521,从浏览器抓包来看,浏览器一共对此地址请求了三次(中间是设置cookie的过程): 第一次请求:网站返回的响应状态码为 521,响应返回的为经过 混淆的 JS 代码:但是这些 ...
- 基于 .NET 7 的 QUIC 实现 Echo 服务
前言 随着今年6月份的 HTTP/3 协议的正式发布,它背后的网络传输协议 QUIC,凭借其高效的传输效率和多路并发的能力,也大概率会取代我们熟悉的使用了几十年的 TCP,成为互联网的下一代标准传输协 ...
- 学习ASP.NET Core Blazor编程系列十——路由(中)
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- 【题解】CF1659E AND-MEX Walk
题目传送门 位运算 设题目中序列 \(w_1,w_1 \& w_2,w_1 \& w_2 \& w_3,\dots,w_1 \& w_2 \& \dots \& ...