③ uni-app 生命周期（应用，页面，组件）、导航跳转+传参

Bertha 。 2022-12-28 01:53 521阅读 0赞

### uni-app ###

*  生命周期
 *   *  应用的生命周期
     *  页面的生命周期
 *  导航跳转
 *   *  利用navigator进行跳转
     *  利用编程式导航进行跳转
     *  导航跳转传递参数
 *  下拉刷新
 *  上拉加载
 *  组件的创建
 *  组件的生命周期
 *  组件通信

--------------------

**写下博客主要用来分享知识内容，便于自我复习和总结。  
如有错误之处，望各位指出。**

--------------------

# 生命周期 #

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

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数。

--------------------

## 应用的生命周期 ##

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

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLaunch</td> 
   <td>当<code>uni-app</code> 初始化完成时触发（全局只触发一次）</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>当 <code>uni-app</code> 启动，或从后台进入前台显示</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>当 <code>uni-app</code> 从前台进入后台</td> 
  </tr> 
  <tr> 
   <td>onError</td> 
   <td>当 <code>uni-app</code> 报错时触发</td> 
  </tr> 
 </tbody> 
</table>

这部分应该很好理解。（通常写在App.vue）

![在这里插入图片描述][20201214085720925.png]

--------------------

## 页面的生命周期 ##

`uni-app` 支持如下页面生命周期函数：

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onLoad</td> 
   <td>监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考<a href="https://uniapp.dcloud.io/api/router?id=navigateto" rel="nofollow">示例</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onReady</td> 
   <td>监听页面初次渲染完成。</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>监听页面隐藏</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onUnload</td> 
   <td>监听页面卸载</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

演示：

<template>
    	<view>详情页</view>
    </template>
    
    <script> export default { data() { return { }; }, onLoad: function(){ console.log('页面 Load'); }, onShow: function(){ console.log('页面 Show'); }, onReady: function(){ console.log('页面 Ready'); }, onHide: function(){ console.log('页面 Hide'); }, onUnload: function(){ console.log('页面 Unload'); }, }; </script>
    
    <style> </style>

![在这里插入图片描述][20201214092513373.png]  
这里需要注意：

*  tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
 *  tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

生命周期到底有什么用？接下来介绍一个重要的用法：导航跳转。

--------------------

# 导航跳转 #

--------------------

## 利用navigator进行跳转 ##

navigator详细文档：[文档地址][Link 1]

跳转到普通页面

<navigator url="/pages/about/about" hover-class="navigator-hover">
      <button type="default">跳转到about页面</button>
    </navigator>

但是如果我们想跳转到tabbar的页面，上面的方式是跳转不过去的，必须要添加一个open-type：

<navigator url="/pages/message/message" open-type="switchTab">
      <button type="default">跳转到message页面</button>
    </navigator>

这种方式还是很简单的。更多内容参考文档即可。

需要补充的是，open-type里的属性值redirect，会触发onUnload。

--------------------

## 利用编程式导航进行跳转 ##

**利用navigateTo进行导航跳转**

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

methods: { 
    	goAbout () { 
      		uni.navigateTo({ 
        		url: '/pages/about/about',
      		})
    	}
    }

同样地，我们不能用这种方式跳转到tabbar页面。

**通过switchTab跳转到tabbar页面**

跳转到tabbar页面

<button type="primary" @click="goMessage">跳转到message页面</button>

通过switchTab方法进行跳转

methods: { 
    	goMessage () { 
      		uni.switchTab({ 
        		url: '/pages/message/message'
      		})
    	}
    }

--------------------

## 导航跳转传递参数 ##

这部分就是关键了。我们在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收。

传递参数的页面

<template>
    	<view>
    		<view>详情页</view>
    		<button type="default" @click="goAbout">跳转</button>
    	</view>
    </template>
    
    <script> export default { methods: { goAbout(){ uni.navigateTo({ url: '../about/about?id=80' }) } } }; </script>

接收参数的页面

<template>
    	<view>
    		<view>about页面</view>
    	</view>
    </template>
    
    <script> export default { onLoad: function(options){ console.log('页面 Load', options); } }; </script>

此时我们点击按钮进行跳转，我们可以发现参数已经传递过来了。  
![在这里插入图片描述][20201214101231644.png]

不知道各位还记不记之前在介绍condition启动模式配置的时候，我们也传递了参数。现在就可以用这种方式来接收参数了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20201214101438413.png]  
![在这里插入图片描述][20201214101647229.png]  
如果是动态传参，我们可以这样：

也可以这样：

![在这里插入图片描述][20201214103543640.png]

--------------------

# 下拉刷新 #

在页面的生命周期中，有一个onPullDownRefresh  
![在这里插入图片描述][20201214140056993.png]  
对于下拉刷新，之前的时候说过，要开启下拉刷新需要在page.json中配置enablePullDownRefresh为true：

"globalStyle": {  // 全局配置：如果页面配置有同名配置，全局配置将失效
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#70B575",	// 窗口背景色，当页面下拉时才能看到
    		"enablePullDownRefresh": true,	// 开启下拉（只有在小程序开发工具才能看到效果）
    		"backgroundTextStyle": "light"
    	},

当然下拉刷新不必放在全局配置中，也可以放在指定的页面配置中。

页面中是转圈效果，小程序中是下拉刷新。

除此以外，其实还可以通过API方式去下拉刷新：[api文档][api]  
无论用那种方式去下拉刷新，它都会去触发下拉生命周期：

如果我们在页面中使用下拉刷新，我们会发现转圈效果不会消失。  
![在这里插入图片描述][20201214143357309.png]  
但我们其实可以为其设置什么时候停止当前页面下拉刷新：

<template>
    	<view>
    		<button @click="refresh">刷新</button>
    	</view>
    </template>
    
    <script> export default { methods: { refresh(){ uni.startPullDownRefresh() } }, onPullDownRefresh(){ setTimeout(()=>{ // 触发刷新，可以在这里调用接口，刷新数据 // ....... // 1000ms后，停止刷新（时间可以根据调接口耗时调整） uni.stopPullDownRefresh() },1000) } }; </script>
    
    <style> </style>

--------------------

# 上拉加载 #

对于上拉加载，我们依然先要去page.json中进行配置。  
![在这里插入图片描述][20201214144329880.png]

"globalStyle": {  
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#007AFF",
    		"backgroundColor": "#70B575",
    		"enablePullDownRefresh": true,	
    		"backgroundTextStyle": "light",
    		"onReachBottomDistance": 50 // 上拉触底事件触发时距页面底部距离
    	},

然后页面中有一个生命周期onReachBottom，它就会在触底的时候触发。通常用于下拉下一页数据。  
![在这里插入图片描述][2020121414463635.png]

<template>
    	<view>
    		<view v-for="(item,index) in arr" :key="index">
    			{
       {item}}
    		</view>
    	</view>
    </template>
    
    <script> export default { data(){ return{ arr: ['JS','HTML','CSS','JS','HTML','CSS','JS','HTML','CSS','JS','HTML','CSS'] } }, onReachBottom(){ console.log('触底了') // 调用接口，获取下一页数据 // ...... // this.arr.push('JS','HTML','CSS') this.arr = [...this.arr,...['JS','HTML','CSS']] } }; </script>
    
    <style> view{ height: 100px; line-height: 100px; } </style>

--------------------

# 组件的创建 #

虽然之前提到不会再赘述Vue内容，但是uni-app中确实不可忽略组件的使用。组件部分内容需要有Vue基础，所以如果没学过Vue，再次推荐先去系统地学习一下Vue。这里为了整体内容完整性，简单的回顾一下，不详细说明。

在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可。

组件的作用简单来说就是将多个组件共用的内容提取出来或者将未来可能改变的内容提取出来，方便之后的维护和管理。

*  创建login组件，在component中创建login目录，然后新建login.vue文件
    
        <template>
        	<view>
        		这是一个自定义组件
        	</view>
        </template>
        
        <script> </script>
        
        <style> </style>
 *  在其他组件中导入该组件并注册
    
        import login from "@/components/login/login.vue"
 *  注册组件
    
        components: { login}
 *  使用组件
    
        <login></login>

![在这里插入图片描述][20201214110224504.png]

知道以上内容后，我们就可以用这种方式使用uni-ui。

简单举例：

[uni-ui文档][uni-ui]

1、导入组件

import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"

2、注册组件

components: { uniGrid,uniGridItem}

3、使用组件

<uni-grid :column="3">
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
      <uni-grid-item>
        <text class="text">文本</text>
      </uni-grid-item>
    </uni-grid>

--------------------

# 组件的生命周期 #

不在这里详细演示了，感兴趣的可以参考官方文档，或者我的文章[Vue基本用法][Vue]

<table> 
 <thead> 
  <tr> 
   <th>beforeCreate</th> 
   <th>在实例初始化之后被调用。<a href="https://cn.vuejs.org/v2/api/#beforeCreate" rel="nofollow">详见</a></th> 
   <th></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>created</td> 
   <td>在实例创建完成后被立即调用。<a href="https://cn.vuejs.org/v2/api/#created" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeMount</td> 
   <td>在挂载开始之前被调用。<a href="https://cn.vuejs.org/v2/api/#beforeMount" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>mounted</td> 
   <td>挂载到实例上去之后调用。<a href="https://cn.vuejs.org/v2/api/#mounted" rel="nofollow">详见</a> 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用<code>$nextTick</code><a href="https://cn.vuejs.org/v2/api/#Vue-nextTick" rel="nofollow">Vue官方文档</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeUpdate</td> 
   <td>数据更新时调用，发生在虚拟 DOM 打补丁之前。<a href="https://cn.vuejs.org/v2/api/#beforeUpdate" rel="nofollow">详见</a></td> 
   <td>仅H5平台支持</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>updated</td> 
   <td>由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。<a href="https://cn.vuejs.org/v2/api/#updated" rel="nofollow">详见</a></td> 
   <td>仅H5平台支持</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>beforeDestroy</td> 
   <td>实例销毁之前调用。在这一步，实例仍然完全可用。<a href="https://cn.vuejs.org/v2/api/#beforeDestroy" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>destroyed</td> 
   <td>Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。<a href="https://cn.vuejs.org/v2/api/#destroyed" rel="nofollow">详见</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

--------------------

# 组件通信 #

Vue里的组件通信：[我的文章][Link 2]

简单回顾常用用法：

通过props来接受外界传递到组件内部的值

<template>
    	<view>
    		这是一个自定义组件 {
       {msg}}
    	</view>
    </template>
    
    <script> export default { props: ['msg'] } </script>
    
    <style> </style>

其他组件在使用login组件的时候传递值

<template>
    	<view>
    		<test :msg="msg"></test>
    	</view>
    </template>
    
    <script> import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, components: { test} } </script>

--------------------

通过$emit触发事件进行传递参数

<template>
    	<view>
    		这是一个自定义组件 {
       {msg}}
    		<button type="primary" @click="sendMsg">给父组件传值</button>
    	</view>
    </template>
    
    <script> export default { data () { return { status: '打篮球' } }, props: { msg: { type: String, value: '' } }, methods: { sendMsg () { this.$emit('myEvent',this.status) } } } </script>

父组件定义自定义事件并接收参数

<template>
    	<view>
    		<test :msg="msg" @myEvent="getMsg"></test>
    	</view>
    </template>
    <script> import test from "@/components/test/test.vue" export default { data () { return { msg: 'hello' } }, methods: { getMsg (res) { console.log(res) } }, components: { test} } </script>

--------------------

[20201214085720925.png]: /images/20221120/7fd6954b7f074bbc83312b3a3e695f1b.png
[20201214092513373.png]: /images/20221120/f55e295480f048d0800d1be5259dd267.png
[Link 1]: https://uniapp.dcloud.io/component/navigator
[20201214101231644.png]: /images/20221120/05a3c3487f774132afe552e360020809.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201214101638640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx,size_16,color_FFFFFF,t_70
[20201214101438413.png]: https://img-blog.csdnimg.cn/20201214101438413.png
[20201214101647229.png]: https://img-blog.csdnimg.cn/20201214101647229.png
[20201214103543640.png]: https://img-blog.csdnimg.cn/20201214103543640.png
[20201214140056993.png]: https://img-blog.csdnimg.cn/20201214140056993.png
[api]: https://uniapp.dcloud.io/api/ui/pulldown
[20201214143357309.png]: https://img-blog.csdnimg.cn/20201214143357309.png
[20201214144329880.png]: https://img-blog.csdnimg.cn/20201214144329880.png
[2020121414463635.png]: https://img-blog.csdnimg.cn/2020121414463635.png
[20201214110224504.png]: https://img-blog.csdnimg.cn/20201214110224504.png
[uni-ui]: https://uniapp.dcloud.io/component/README?id=uniui
[Vue]: https://blog.csdn.net/qq_45613931/article/details/105727335
[Link 2]: https://blog.csdn.net/qq_45613931/article/details/105812344