Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
anyefeiyu
uni-app
提交
c5feea4d
U
uni-app
项目概览
anyefeiyu
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
c5feea4d
编写于
12月 09, 2019
作者:
W
wanganxp
提交者:
GitHub
12月 09, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update App.md
上级
dc104c0d
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
26 addition
and
21 deletion
+26
-21
docs/collocation/App.md
docs/collocation/App.md
+26
-21
未找到文件。
docs/collocation/App.md
浏览文件 @
c5feea4d
`App.vue`
是
我们的主组件,所有页面都是在
`App.vue`
下进行切换的,是页面入口文件
。
`App.vue`
是
uni-app的主组件,所有页面都是在
`App.vue`
下进行切换的,是页面入口文件。但
`App.vue`
本身不是页面,这里不能编写视图元素
。
在这个文件里,你可以初始化一些通用的组件,调用一些应用生命周期函数。
这个文件的作用包括:调用应用生命周期函数、配置全局样式、配置全局的存储globalData
应用生命周期仅可在
`App.vue`
中监听,在
其它
页面监听无效。
应用生命周期仅可在
`App.vue`
中监听,在页面监听无效。
### 应用生命周期
### 应用生命周期
`uni-app`
支持如下应用生命周期函数:
`uni-app`
支持如下应用生命周期函数:
|函数名 |说明 |
|函数名 |说明 |
平台兼容|
|:- |:- |
|:- |:- |
:- |
|onLaunch |当
`uni-app`
初始化完成时触发(全局只触发一次) |
|onLaunch |当
`uni-app`
初始化完成时触发(全局只触发一次) |
|
|onShow |当
`uni-app`
启动,或从后台进入前台显示 |
|onShow |当
`uni-app`
启动,或从后台进入前台显示 |
|
|onHide |当
`uni-app`
从前台进入后台 |
|onHide |当
`uni-app`
从前台进入后台 |
|
|onError |当
`uni-app`
报错时触发 |
|onError |当
`uni-app`
报错时触发 |
|
|onUniNViewMessage|对
`nvue`
页面发送的数据进行监听,可参考
[
nvue 向 vue 通讯
](
/use-weex?id=nvue-向-vue-通讯
)
|
|onUniNViewMessage|对
`nvue`
页面发送的数据进行监听,可参考
[
nvue 向 vue 通讯
](
/use-weex?id=nvue-向-vue-通讯
)
|
App|
在
`App.vue`
文件里使用生命周期函数,如下:
在
`App.vue`
文件里使用生命周期函数,如下:
...
@@ -21,13 +21,13 @@
...
@@ -21,13 +21,13 @@
<script>
<script>
export
default
{
export
default
{
onLaunch
:
function
()
{
onLaunch
:
function
()
{
console
.
log
(
'
App Launch
'
)
console
.
log
(
'
App Launch
,app启动
'
)
},
},
onShow
:
function
()
{
onShow
:
function
()
{
console
.
log
(
'
App Show
'
)
console
.
log
(
'
App Show
,app展现在前台
'
)
},
},
onHide
:
function
()
{
onHide
:
function
()
{
console
.
log
(
'
App Hide
'
)
console
.
log
(
'
App Hide
,app不再展现在前台
'
)
}
}
}
}
</script>
</script>
...
@@ -39,7 +39,7 @@
...
@@ -39,7 +39,7 @@
-
`App.vue`
不能写模板
-
`App.vue`
不能写模板
### globalData
### globalData
小程序有globalData
机制,这套机制在uni-app里也可以使用,
全端通用。
小程序有globalData
,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且
全端通用。
**以下是 App.vue 中定义globalData的相关配置:**
**以下是 App.vue 中定义globalData的相关配置:**
...
@@ -58,15 +58,20 @@ js中操作globalData的方式如下:
...
@@ -58,15 +58,20 @@ js中操作globalData的方式如下:
在应用onLaunch时,getApp对象还未获取,暂时可以使用this.$scope.globalData获取globalData。
在应用onLaunch时,getApp对象还未获取,暂时可以使用this.$scope.globalData获取globalData。
如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值。
HBuilderX 2.0.3起,nvue页面在
`uni-app`
编译模式下,也支持onShow。
如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值。
weex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webview的addEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。
nvue的weex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webview的addEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式,而不是weex编译模式。
globalData是简单的全局变量,如果使用状态管理,请使用
`vuex`
(main.js中定义)
### 全局样式
### 全局样式
在
`App.vue`
中,可以一些定义全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中。
在
`App.vue`
中,可以一些定义全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中。
**例如:**
注意如果工程下同时有vue和nvue文件,全局样式的所有css会应用于所有文件,而nvue支持的css有限,编译器会在控制台报警,提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如:
```
html
现在有个页面背景是深色在vue页面中,可能会发生新窗体刚开始动画时是灰白色背景,动画结束时才变为深色背景,造成闪屏。这种情况就可以使用全局样式来解决。
<style>
-
造成这种现象的原因是因为webview的背景生效太慢。此时可将样式写在
`App.vue`
里,来加速页面样式的渲染速度。因为
`App.vue`
里面的样式是全局样式,每次新开页面会优先加载
`App.vue`
里面的样式,然后加载普通 vue 页面的样式去覆盖
`App.vue`
里面的样式。
/* #ifndef APP-PLUS-NVUE */
-
另外nvue页面不存在此问题,也可以更改为nvue页面。
@import
'./common/uni.css'
;
/* #endif*/
</style>
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录