App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件

但App.vue本身不是页面，这里不能编写视图元素

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

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

应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数，详情请参考应用生命周期

globalData

小程序有globalData，这是一种简单的全局变量机制

这套机制在uni-app里也可以使用，并且全端通用

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

  1. <script>  
  2.     export default {  
  3.         globalData: {  
  4.             text: 'text'  
  5.         }
  6.     }  
  7. </script>

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

在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData

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

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

但建议开发者使用uni-app编译模式，而不是weex编译模式

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

全局样式

在App.vue中，可以定义一些全局通用样式，例如需要加一个通用的背景色，首屏页面渲染的动画等都可以写在App.vue中。
注意如果工程下同时有vue和nvue文件，全局样式的所有css会应用于所有文件，而nvue支持的css有限，编译器会在控制台报警，提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如：

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