uni-app的生命周期

时间：2024-12-18 21:47:18

目录

1.应用生命周期

1.

1.3全局样式

2.页面生命周期

  2.1页面简介

2.2新建页面

2.3删除页面

2.4应用首页

2.5页面生命周期

1.应用生命周期

     uni-app的生命周期是以小程序的生命周期为基础实现的，分为应用的生命周期、页面生命周期和组件的生命周期，其中组件生命周期就是Vue的生命周期。

  是uni-app的主组件，所有页面都是在下进行切换的，是页面入口文件。但本身不是页面，这里不能编写视图元素，也就是没有<template>。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在中监听，在页面监听无效。

 1.1应用生命周期

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

    

   示例代码

    

  1. 

    

    
<script>

    

    2. 

  2. 

    

    	// 只能在里监听应用的生命周期

    

    3. 

  3. 

    

    	export default {
    

    4. 

  4. 

    

    		onLaunch: function() {
    

    5. 

  5. 

    

    			console.log('App Launch')
    

    6. 

  6. 

    

    		},
    

    7. 

  7. 

    

    		onShow: function() {
    

    8. 

  8. 

    

    			console.log('App Show')
    

    9. 

  9. 

    

    		},
    

    10. 

  10. 

    

    		onHide: function() {
    

    11. 

  11. 

    

    			console.log('App Hide')
    

    12. 

  12. 

    

    		}
    

    13. 

  13. 

    

    	}
    

    14. 

  14. 

    

    </script>
    

    15.

注意

  • 应用生命周期仅可在中监听，在其它页面监听无效。
  • 以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
  • 应用启动参数，可以在API 获取，详见
  • onlaunch里进行页面跳转，如遇白屏报错，请参考onlaunch生命周期内navigateto跳转页面注意 - DCloud问答
  •  不能写模板
  • onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 ）

1.

小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

   以下是 中定义globalData的相关配置：

    

  1. 

    

    
<script>  
    

    2. 

  2. 

    

        export default {  
    

    3. 

  3. 

    

            globalData: {  
    

    4. 

  4. 

    

                text: 'text'  
    

    5. 

  5. 

    

            }
    

    6. 

  6. 

    

        }  
    

    7. 

  7. 

    

    
</script>  
    

    8.

js中操作globalData的方式如下： getApp(). = 'test'

在应用onLaunch时，getApp对象还未获取，暂时可以使用获取globalData。

如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。

nvue的weex编译模式中使用globalData的话，由于weex生命周期不支持onShow，但熟悉5+的话，可利用监听webview的addEventListener show事件实现onShow效果，或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式，而不是weex编译模式。

globalData是简单的全局变量，如果使用状态管理，请使用vuex（中定义）

1.3全局样式

在中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。

注意如果工程下同时有vue和nvue文件，全局样式的所有css会应用于所有文件，而nvue支持的css有限，编译器会在控制台报警，提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如：

    

  1. 

    

    
<style>

    

    2. 

  2. 

    

        /* #ifndef APP-PLUS-NVUE */

    

    3. 

  3. 

    

        @import './common/';
    

    4. 

  4. 

    

        /* #endif*/

    

    5. 

  5. 

    

    
</style>

    

    6.

2.页面生命周期

  2.1页面简介

uni-app项目中，一个页面就是一个符合Vue SFC规范的.vue文件或.nvue文件。

.vue页面和.nvue页面，均全平台支持，差异在于当uni-app发行到App平台时，.vue文件会使用webview进行渲染，.nvue会使用原生进行渲染，详见：nvue原生渲染。

2.2新建页面

uni-app中的页面，通常会保存在工程根目录下的pages目录下。

每次新建页面，均需在中配置pages列表；未在 -> pages 中配置的页面，uni-app会在编译阶段进行忽略。的完整配置参考：全局文件。

通过HBuilderX开发 uni-app 项目时，在 uni-app 项目上右键“新建页面”，HBuilderX会自动在中完成页面注册，开发更方便。

同时，HBuilderX 还内置了常用的页面模板（如图文列表、商品列表等），选择这些模板，可以大幅提升你的开发效率。

2.3删除页面

删除页面时，需做两件工作：

删除.vue文件或.nvue文件

删除 -> pages列表项中的配置

2.4应用首页

uni-app会将 -> pages配置项中的第一个页面，作为当前工程的首页（启动页）。

2.5页面生命周期

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

onInit使用注意

仅百度小程序基础库 3.260 以上支持 onInit 生命周期

其他版本或平台可以同时使用 onLoad 生命周期进行兼容，注意避免重复执行相同逻辑

不依赖页面传参的逻辑可以直接使用 created 生命周期替代

onReachBottom使用注意 可在里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

如使用scroll-view导致页面没有滚动，则触底事件不会被触发。scroll-view滚动到底部的事件请参考scroll-view的文档

onPageScroll （监听滚动、滚动监听、滚动事件）参数说明：

 

注意

onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。

如果想实现滚动时标题栏透明渐变，在App和H5下，可在中配置titleNView下的type为transparent，参考。

如果需要滚动吸顶固定某些元素，推荐使用css的粘性布局，参考插件市场。插件市场也有其他js实现的吸顶插件，但性能不佳，需要时可自行搜索。

在App、微信小程序、H5中，也可以使用wxs监听滚动，参考；在app-nvue中，可以使用bindingx监听滚动，参考。

onBackPress上不可使用async，会导致无法阻止默认返回

    

  1. 

    

    onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替

    

    2. 

  2. 

    

    	console.log("滚动距离为：" + e.scrollTop);
    

    3. 

  3. 

    

    },
    

    4.

onTabItemTap 返回的json对象说明：

注意

onTabItemTap常用于点击当前tabitem，滚动或刷新当前页面。如果是点击不同的tabitem，一定会触发页面切换。

如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap，可以使用放一个区块盖住原先的tabitem，并拦截点击事件。

支付宝小程序平台onTabItemTap表现为点击非当前tabitem后触发，因此不能用于实现点击返回顶部这种操作

    

  1. 

    

    onTabItemTap : function(e) {
    

    2. 

  2. 

    

    	(e);
    

    3. 

  3. 

    

    	// e的返回格式为json对象： {"index":0,"text":"首页","pagePath":"pages/index/index"}
    

    4. 

  4. 

    

    },
    

    5.

onNavigationBarButtonTap 参数说明：

    

  1. 

    

    onNavigationBarButtonTap : function (e) {
    

    2. 

  2. 

    

    	(e);
    

    3. 

  3. 

    

    	// e的返回格式为json对象：{"text":"测试","index":0}
    

    4. 

  4. 

    

    }
    

    5.

 onBackPress 回调参数对象说明：

    

  1. 

    

    
export default {
    

    2. 

  2. 

    

    	data() {
    

    3. 

  3. 

    

    		return {};
    

    4. 

  4. 

    

    	},
    

    5. 

  5. 

    

    	onBackPress(options) {
    

    6. 

  6. 

    

    		console.log('from:' + options.from)
    

    7. 

  7. 

    

    	}
    

    8. 

  8. 

    

    }
    

    9.

注意

  • nvue 页面weex编译模式支持的生命周期同weex，具体参考：weex生命周期介绍。
  • 支付宝小程序真机可以监听到非navigateBack引发的返回事件（使用小程序开发工具时不会触发onBackPress），不可以阻止默认返回行为。

相关文章