uni-app 生命周期及路由

你的名字 2023-06-25 04:54 15阅读 0赞

**以下内容是官方文档和自己总结的，把重点记录下来方便日后查看：**

***static*** 目录下的js文件不会被编译，此目录一般存放图片、logo、图标。  
***common*** 官方推荐公共资源存放目录

## 应用生命周期（也就是全局函数） ##

> **onLaunch** : uni-app 初始化完成时，触发（全局只触发一次） ，**page页还未生成**  
> **onShow**：uni-app启动，或从后台进入前台显示  
> **onHide**：uni-app 从前台进入后台  
> **onError**：uni-app报错时触发  
> **onUniNViewMessage**：对nvue页面发送的数据进行监听

***疑问：***  
onHide 什么意思  
比如：当用户点击右上角分享时，出现弹窗，会触发应用生命周期onHide，其实所有生命周期的执行顺序是：  
***onSareAppMessage（用户点击右上角分享触发） -> onHide （页面级生命周期）-> onHide (全局生命周期)***  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]

***注意点：***  
1、应用（全局）的生命周期仅可在App.vue 中监听，其他页面无效。  
2、页面加载时应用程序生命周期函数的触发顺序为：onLaunch -> onShow  
3、用户分享 或 手机处于锁屏状态 且未关闭小程序时，全局数据 或data中的数据不会被初始化！！！这点很重要。。。  
4、在应用(全局) hide生命周期中，我们可以做一些文章：  
\*\***比如：  
如果用户手机锁屏、或点击分享，只要是小程序从前台切换到后台，都会触发hide生命周期，通过 *getCurrentPages()* api可获取到当前页面路径，存到全局中，当用户从后台切换回前台时，可直接跳转到之前的页面，利于用户体验。** \*\*

## 页面生命周期 ##

以下是小程序中常用的页面级生命周期：

> **onLoad** : 监听页面加载，参数为上一个页面传递的数据，类型为Object 。  
> **onShow**：监听页面的显示，页面每次出现在屏幕上都会触发。  
> **onReady**：监听页面初次完成。  
> **onHide**：监听页面隐藏。  
> **onUnload**：监听页面卸载。  
> **onResize**：监听窗口尺寸变化。  
> **onPullDownRefresh**：监听用户下拉动作，一般用于下拉刷新。  
> **onReachBottom**：页面上拉触底事件的处理函数。  
> **onTabItemTap**：点击tab时触发，参数为Object，为当前tab信息。  
>     // 参数：\{index: 0, text: “bar1”, pagePath: “pages/index/index”\}  
> **onShareAppMessage**：监听用户点击右上角分享。  
> **onPageScroll**：监听页面滚动，参数为Object。// \{scrollTop: 89\}

***注意点：***  
**1、页面加载到完成生命周期的执行顺序：**  
*onLaunch( 应用级 ) -> onShow -> onLoad( 页面级 ) -> onShow -> onReady*  
**2、页面滚动时，*onPageScroll*函数加载;**  
**3、从别的页面进入当前页，生命周期函数执行顺序**： *onShow -> onTabItemTap*  
**4、从当前页面进入别的应用页，页面级*onHide*生命周期函数会触发；**  
**5、*onPageScroll*参数说明：**  
\{ scrollTop : Number \} 值类型为数字，意思：页面在垂直方向滚动的距离（单位 px）  
**6、*onTabItemTap*参数说明：**  
\{ index：Number，pagePath：‘String’，text：‘String’ \}  
index：被点击的tabltem的序号，就是索引，它会根据page.json中的tabBar配置项list数组中索引来输出index值；  
pagePath：String，被点击tabltem的页面路径，tabBar配置项list数组中的配置路径；  
text：String，被点击tabltem的按钮文字。  
**7、*onLoad与onShow的区别*：**  
\*onLoad：\*初始化，或者页面刷新，才加载，只加载一次，从别的页面进入不会加载此生命周期。  
*onShow：* 监听页面显示，不管是初始化还是从别的页面进入，都会加载此生命周期。

# 路由 #

**路由跳转：**  
*（1）navigator组件跳转*  
*（2）调用API跳转*

**页面栈：**  
关于栈之前的文章有讲过，了解过栈，再看下边知识点，会很容易理解：  
[https://blog.csdn.net/qq\_42778001/article/details/103533039][https_blog.csdn.net_qq_42778001_article_details_103533039]  
**初始化时**： uni-app打开的第一个页面，新页面入栈。

**打开一个新页面**： 打开一个新页面，新页面入栈。调用API *uni.navigateTo* 或 使用<navigator open-type=“navigate”/> 时才触发。

**页面重定向**： 当前页面出栈，新页面入栈。调用API *uni.redirectTo* 或 使用<navigator open-type=“redirectTo”/> 时才触发。

**页面返回**： 页面不断出栈，直到目标返回页。调用API *uni.navigateBack* 或 使用<navigator open-type=“navigateBack”/> 时才触发（用户按左上角返回按钮，安卓用户点击物理back按键 触发）。

**Tab切换**：页面全部出栈，新的tab页入栈。 调用API *uni.switchTab* 或 使用<navigator open-type=“switchTab”/> 时才触发（即用户切换Tab）。

**重加载**： 页面全部出栈，新的页面入栈。调用API *uni.reLaunch*、使用组件<navigator open-type=“reLaunch”/>

***注意点：***  
*1、通过uni.navigateTo* 或 使用<navigator open-type=“navigate”/> *进入一个新页\*\*面，是指进入到一个不带tabBar 的页面。*  
*2、跳转页需要在pages.json中的pages 配置项中配置路径及样式。*  
*3、跳转至有tabBar的页面 需 open-type=‘switchTab’ 或者 使用API uni.switchTab 跳转。*

# navigator #

**页面链接标签，可嵌套标签**  
***属性：***  
**url** ： 跳转的路径，绝对路径或相对路径，不可加后缀。

<navigator url="../first/first" open-type="navigate">
    	<button type="default">跳转</button>
    </navigator>

**open-type** ： 跳转方式 ，String 类型。  
**delta：** 仅当open-type类型为 ‘navigateBack’ 时有效，表示回退层数，Number类型。  
**hover-class**： 指定点击时的样式类，hover-class="none"时，无点击效果。  
**hover-stop-propagation** ： 指定是否阻止本节点的祖先接地前出现点击态。这个属性注意：它不是去阻止点击事件的冒泡行为，而是阻止点击的样式的冒泡行为！！！  
**target**： 在哪一个小程序目标上发生跳转，默认是当前小程序，值：‘self’ / ‘miniProgram’

***open-type 类型值***  
    navigate —> 对应 uni.navigateTo 的功能  
    redirect—> uni.redirectTo  
    switchTab —> uni.switchTab  
    reLaunch —> uni.reLaunch  
    navigateBack —> uni.navigateBack  
    exit—> 退出小程序，target=‘miniProgram’ 时生效  
页需要在在pages.json中的pages 配置项中配置路径及样式。\*

# 页面跳转API #

**1、uni.navigateTo( Object )** 跳转至xxx不带tabBar的页面，如果跳转至web url，路径在小程序平台需要把url添加白名单。

// 关于页面传参会在下边单独讲解
    methods: { 
    	click() { 
    		uni.navigateTo({ 
    			url:"../index2/index2?name=lxc", //问号后边是传递的参数key/value形式
    			success() {  // 成功回调
    				console.log('成功了')
    			},
    			fail() {  // 失败回调
    				console.log('失败了')
    			},
    			complete() {  // 不管成功或 失败都会执行的，类似promise 对象中的finally
    				console.log('跳转完成')
    			}
    		})
    	}
    }

**2、uni.redirectTo( Object )**  
重定向至某个不带tabBar页面，参数同上。

**3、uni.reLaunch( Object )**  
关闭所有页面，打开应用内的某个页面，参数同上。

**4、uni.switchTab( Object )**  
跳转至tabBar页面，并且关闭所有非tabBar页面，参数同上。

**5、uni.navigateBack( Object )**  
关闭当前页，返回上一页面 或 多级页面，可通过\*\*\*getCurrentPages（）\*\*\*获取当前的页面栈，从而可以控制要返回的层数。  
     (1) dalta 默认值为1,返回的页面数，如果大于现有页面数，则会返回到首页。

**4、uni.switchTab( Object )**  
跳转至带有tabBar的页面，并且关闭所有非tabBar页面，参数如下：  
     (1) dalta 默认值为1,返回的页面数，如果大于现有页面数，则会返回到首页。

***注意点：***  
*1、navigateTo、redirectTo 只能打开非tabBar页面 。*  
*2、switchTab 只能打开tabBar 页面 。*  
*3、reLaunch 可以打开任意页面。*  
*4、不可以在App.vue中进行页面跳转。*  
*5、H5端页面刷新之后，页面栈会消失，此时不可以用 navigateBack 不能返回，如果非要返回用原生 history.back( ) 进行返回。*

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191227175829677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qq_42778001_article_details_103533039]: https://blog.csdn.net/qq_42778001/article/details/103533039