This page is translated by Google Cloud Translation API

Switch to Chinese

App.vue/App.uvue

App.vue/uvue是uni-app的主组件。uni-app js引擎版是app.vue。uni-app x是app.uvue。以下出现的app.vue一般泛指包含了app.uvue

所有页面都是在App.vue下进行切换的，是应用入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。

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

The application life cycle can only be listened to in App.vue, and listening to on the page is invalid.

Application Lifecycle

uni-app supports the following application life cycle functions:

函数名	说明	平台兼容
onLaunch	当uni-app 初始化完成时触发（全局只触发一次），参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onShow	当 uni-app 启动，或从后台进入前台显示，参数为应用启动参数，同 uni.getLaunchOptionsSync 的返回值
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发	app-uvue 不支持
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯	app-uvue 不支持
onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（2.8.1+ app-uvue 暂不支持）	app-uvue 不支持
onPageNotFound	页面不存在监听函数	app-uvue 不支持
onThemeChange	监听系统主题变化	app-uvue 不支持
onLastPageBackPress	最后一个页面按下Android back键，常用于自定义退出	app-uvue-android 3.9+
onExit	监听应用退出	app-uvue-android 3.9+

Sample code

<script>
	// Only monitor the application life cycle in App.vue
	export default {
		onLaunch: function(options) {
			console.log('App Launch')
			console.log('应用启动路径：', options.path)
		},
		onShow: function(options) {
			console.log('App Show')
			console.log('应用启动路径：', options.path)
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

Notice

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。
• 以组合式 API 使用时，在 Vue2 和 Vue3 中存在一定区别，请分别参考：Vue2 组合式 API 使用文档 和 Vue3 组合式 API 使用文档。
• 应用启动参数，可以在API uni.getLaunchOptionsSync获取，详见
• Page jump can be performed in onlaunch. In case of a white screen error, please refer to https://ask.dcloud.net.cn/article/35942
• App.vue cannot write template
• The onPageNotFound page has actually been opened (for example, by sharing the card, the applet code) and it is found that the page does not exist, and the page will not be triggered if the api jumps to a page that does not exist (such as uni.navigateTo)

globalData

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

当然vue框架的全局变量，另有其他方式定义。

The following is the relevant configuration of defining globalData in App.vue:

<script>  
    export default {  
        globalData: {  
            text: 'text'  
        }
    }  
</script>  

getApp().globalData.text = 'test'

While applying onLaunch, the getApp object has not been obtained yet, so you can use this.globalData to obtain globalData temporarily.

If you need to bind the data of globalData to the page, you can reassign variables in the life cycle of the onShow page of the page.

If globalData is used in nvue's weex compilation mode, since the weex life cycle does not support onShow, but if you are familiar with 5+, you can use the addEventListener show event of listening to the webview to achieve the onShow effect, or directly use the beforeCreate in the weex life cycle. But it is recommended that developers use the uni-app compilation mode instead of the weex compilation mode.

globalData is a simple global variable. If you use state management, please use vuex (defined in main.js)

全局样式

In App.vue, you can define some global common styles. For example, if you need to add a common background color, the animation rendered on the first page can be written in App.vue.

Please note that if there are both vue and nvue files under the project, all css of global style will be applied to all files, while the compiler will give an alarm at the console as the css supported by nvue is limited, indicating that some css cannot be supported in nvue. At this time, css not supported by nvue needs to be written in a separate conditional compilation. For example:

<style>
    /* #ifndef APP-PLUS-NVUE */
    @import './common/uni.css';
    /* #endif*/
</style>