App.md 2.8 KB
Newer Older
W
wanganxp 已提交
1
`App.vue`是uni-app的主组件,所有页面都是在`App.vue`下进行切换的,是页面入口文件。但`App.vue`本身不是页面,这里不能编写视图元素。
C
chenchen 已提交
2

W
wanganxp 已提交
3
这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
C
chenchen 已提交
4

W
wanganxp 已提交
5
应用生命周期仅可在`App.vue`中监听,在页面监听无效。
C
chenchen 已提交
6 7
### 应用生命周期

Q
qiang 已提交
8
``uni-app`` 支持 onLaunch、onShow、onHide 等应用生命周期函数,详情请参考[应用生命周期](/collocation/frame/lifecycle?id=应用生命周期)
9

C
chenchen 已提交
10 11 12 13
```html
<script>  
    export default {  
        onLaunch: function() {  
W
wanganxp 已提交
14
            console.log('App Launch,app启动')  
C
chenchen 已提交
15 16
        },  
        onShow: function() {  
W
wanganxp 已提交
17
            console.log('App Show,app展现在前台')  
C
chenchen 已提交
18 19
        },  
        onHide: function() {  
W
wanganxp 已提交
20
            console.log('App Hide,app不再展现在前台')  
C
chenchen 已提交
21 22 23 24 25
        }  
    }  
</script>  
```

26
**注意**
C
chenchen 已提交
27
- **应用生命周期仅可在`App.vue`中监听,在其它页面监听无效**
28
- onlaunch里进行页面跳转,如遇白屏报错,请参考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942)
d-u-a's avatar
d-u-a 已提交
29
- `App.vue` 不能写模板
30 31

### globalData
W
wanganxp 已提交
32
小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。
33

C
chenchen 已提交
34
**以下是 App.vue 中定义globalData的相关配置:**
35 36 37 38 39 40 41 42 43 44 45

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

C
chenchen 已提交
46 47 48
js中操作globalData的方式如下:
`getApp().globalData.text = 'test'`

W
wanganxp 已提交
49 50
在应用onLaunch时,getApp对象还未获取,暂时可以使用this.$scope.globalData获取globalData。

W
wanganxp 已提交
51
如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值。
C
chenchen 已提交
52

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

globalData是简单的全局变量,如果使用状态管理,请使用`vuex`(main.js中定义)
56

C
chenchen 已提交
57
### 全局样式
上单拿一血's avatar
上单拿一血 已提交
58
`App.vue`中,可以定义一些全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中。
59

W
wanganxp 已提交
60 61 62 63 64 65 66 67
注意如果工程下同时有vue和nvue文件,全局样式的所有css会应用于所有文件,而nvue支持的css有限,编译器会在控制台报警,提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如:
```html
<style>
    /* #ifndef APP-PLUS-NVUE */
    @import './common/uni.css';
    /* #endif*/
</style>
```