生命周期分为:应用生命周期和页面生命周期

具体内容可参考: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生命周期和路由跳转的更多相关文章

  1. Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

    目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...

  2. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  3. 微信小程序APP生命周期

    小程序APP生命周期需要先从app.js这个文件开始,App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数 onLaunch----当小程序初始 ...

  4. 微信APP生命周期、页面生命周期

    目录 小程序的启动流程 app生命周期 页面的生命周期 页面的生命周期(图) 小程序的启动流程 我们画一个图来表示一下,整个小程序的启动流程,我们就知道了: app生命周期 执行App()函数也就是注 ...

  5. 微信小程序-APP生命周期与运行机制

    QQ讨论群:785071190 开发微信小程序之前需要先了解微信小程序运行机制以及其生命周期,小程序APP生命周期需要先从app.js这个文件开始. 阅读过"微信小程序-代码构成" ...

  6. WebApp中的页面生命周期及路由管理

    最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...

  7. vue的生命周期和路由守卫

    组件相关钩子函数: beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destoryed   还有 ...

  8. vue 生命周期钩子 路由钩子 动画钩子 执行顺序

    进入首页的钩子们 1 路由钩子 路由跳转前beforeEach 2 路由钩子 home组件内部:守卫执行前beforeRouteEnter 3.路由钩子 路由跳转后afterEach 4 生命周期 h ...

  9. ORM数据增删改查 django请求生命周期 django路由层 反向解析

    目录 可视化界面之数据增删改查 补充 1.建表 2.数据展示功能 3.数据添加功能 4.数据编辑功能 5.数据删除功能 django请求生命周期流程图 crsf wsgirel 与 uwsgi ngi ...

随机推荐

  1. QML 信号与响应方法的总结

    以下内容为本人的著作,如需要转载,请声明原文链接微信公众号「englyf」https://www.cnblogs.com/englyf/p/16748191.html 如果面试过程中,面试官想了解你对 ...

  2. flood_it 方法记录

    心路历程 根据题面的描述,我们面临的问题无非是,每次将色块更新成什么颜色.又因为是从左上角开始更新,所以我的有了第一个想法. 将左上角的色块命名为"原色块". 对于每个色块,定义4 ...

  3. windows下利用_popen,_wpoen创建管道进行系统命令输出数据

    转载: https://blog.csdn.net/greless/article/details/72383762 参考: http://www.linuxidc.com/Linux/2011-04 ...

  4. jsp页面中怎么利用a标签的href进行传递参数以及需要注意的地方

    jsp页面中: <a href="${pageContext.request.contextPath }/infoController/getProductInfo?productId ...

  5. Linux系统管理_网络管理

    常用网络指令 yum -y install net-tools #安装ifconfig工具 ifconfig #查看网络配置 ifup ens33 #启用网卡 ifdown ens33 #禁用网卡 s ...

  6. 1NF | 2NF | 3NF的区分以及什么是函数依赖、部分函数依赖、值传递依赖(最详细的讲解1NF、2NF、3NF的关系)

    1NF | 2NF | 3NF的区分以及什么是函数依赖.部分函数依赖.值传递依赖 符合3NF一定符合2NF.一定符合1IF 简单区分.2NF不存在部分函数依赖,3NF不存在传递函数依赖 第一范式1NF ...

  7. oracle expdp/exp ora-600/ora-39014报错处理

    在一次数据迁移的时候,expdp导出报错,错误信息如下: 版本号:11.2.0.1 没有打PSU,查看报错的aler部分日志如下: 其中的某一些trc日志文件截图: Trace file d:\ora ...

  8. 如何通过 C#/VB.NET 重命名 Excel 表格并设置选项卡颜色

    在 Excel 文件中创建多个工作表可以使数据更加井然有序.例如,可以为不同的区域.不同的月份/年份或不同的项目等创建不同的工作表.但要区分多个工作表,则需要更改它们的名称.同时,设置不同的选项卡颜色 ...

  9. 逆向使用 execjs时遇到 UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 28: illegal multibyte sequence

    问题: 如下图所示 今天在维护以前的爬虫代码 发现有个网站一直爬取失败,我原以为是网站逆向的部分改了,搞了好久才发现是GBK的问题 接下来告诉大家解决方案 解决方案 如下图 在下图这个subbsubp ...

  10. Azure DevOps Server 设置项目管理用户,用户组

    一,引言 Azure DevOps Server 搭建完成后,关于如何进行项目管理,项目成员管理等,我们接着上一篇文章,继续讲解 Azure DevOps Server 的用户,用户组.首先,我们需要 ...