# App.vue/App.uvue

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



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

	// 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')


  • 应用生命周期仅可在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



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

    export default {  
        globalData: {  
            text: 'text'  

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:

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