0
点赞
收藏
分享

微信扫一扫

3.7 App.vue-常用配置【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】


3.7 App.vue

App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。但App.vue本身不是页面,这里不能编写视图元素。

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

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

3.7.1 应用生命周期

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

3.7 App.vue-常用配置【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】_生命周期

在App.vue文件里使用生命周期函数,如下:

<script>  
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>

注意

 应用生命周期仅可在App.vue中监听,在其它页面监听无效。

 onlaunch里进行页面跳转,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942

 App.vue 不能写模板

3.7.2 globalData

小程序有globalData机制,这套机制在uni-app里也可以使用,全端通用。

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

<script>  
export default {
globalData: {
text: 'text'
}
}
</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中定义)

3.7.3 全局样式

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

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

例如:

现在有个页面背景是深色在vue页面中,可能会发生新窗体刚开始动画时是灰白色背景,动画结束时才变为深色背景,造成闪屏。这种情况就可以使用全局样式来解决。

 造成这种现象的原因是因为webview的背景生效太慢。此时可将样式写在 App.vue 里,来加速页面样式的渲染速度。因为App.vue 里面的样式是全局样式,每次新开页面会优先加载 App.vue 里面的样式,然后加载普通 vue 页面的样式去覆盖App.vue 里面的样式。

 另外nvue页面不存在此问题,也可以更改为nvue页面。


举报

相关推荐

0 条评论