Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
0b880a98
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
0b880a98
编写于
12月 12, 2023
作者:
D
DCloud_LXH
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: uni-app-x 全局文件 app.md
上级
2df6ecd3
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
97 addition
and
1 deletion
+97
-1
docs/uni-app-x/collocation/_sidebar.md
docs/uni-app-x/collocation/_sidebar.md
+1
-1
docs/uni-app-x/collocation/app.md
docs/uni-app-x/collocation/app.md
+96
-0
未找到文件。
docs/uni-app-x/collocation/_sidebar.md
浏览文件 @
0b880a98
*
[
pages.json
](
pagesjson.md
)
*
[
main.uts
](
https://uniapp.dcloud.net.cn/collocation/main.html
)
*
[
app.uvue
](
https://uniapp.dcloud.net.cn/collocation/App.html
)
*
[
app.uvue
](
app.md
)
*
manifest.json
*
[
概述
](
manifest.md
)
*
[
模块配置
](
manifest-modules.md
)
...
...
docs/uni-app-x/collocation/app.md
0 → 100644
浏览文件 @
0b880a98
# App.vue/App.uvue
`App.vue/uvue`
是uni-app的主组件。uni-app js引擎版是app.vue。uni-app x是app.uvue。以下出现的
`app.vue`
一般泛指包含了
`app.uvue`
所有页面都是在
`App.vue`
下进行切换的,是应用入口文件。但
`App.vue`
本身不是页面,这里不能编写视图元素,也就是没有
`<template>`
。
这个文件的作用包括:监听应用生命周期、配置全局样式、配置全局的存储globalData
应用生命周期仅可在
`App.vue`
中监听,在页面监听无效。
## 应用生命周期@applifecycle
``uni-app``
支持如下应用生命周期函数:
|函数名|说明|平台兼容|
|:-|:-|:-|
|onLaunch|当
``uni-app``
初始化完成时触发(全局只触发一次),参数为应用启动参数,同
[
uni.getLaunchOptionsSync
](
https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync
)
的返回值||
|onShow|当
``uni-app``
启动,或从后台进入前台显示,参数为应用启动参数,同
[
uni.getLaunchOptionsSync
](
https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync
)
的返回值||
|onHide|当
``uni-app``
从前台进入后台||
|onError|当
``uni-app``
报错时触发|app-uvue 不支持|
|onUniNViewMessage|对
``nvue``
页面发送的数据进行监听,可参考
[
nvue 向 vue 通讯
](
https://uniapp.dcloud.io/tutorial/nvue-api?id=communication
)
|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+|
**示例代码**
```
html
<script>
// 只能在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
'
)
}
}
</script>
```
**注意**
-
**应用生命周期仅可在`App.vue`中监听,在其它页面监听无效**
。
-
以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:
[
Vue2 组合式 API 使用文档
](
/tutorial/vue-composition-api.html
)
和
[
Vue3 组合式 API 使用文档
](
/tutorial/vue3-composition-api.html
)
。
-
应用启动参数,可以在API
`uni.getLaunchOptionsSync`
获取,
[
详见
](
https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync
)
-
onlaunch里进行页面跳转,如遇白屏报错,请参考
[
https://ask.dcloud.net.cn/article/35942
](
https://ask.dcloud.net.cn/article/35942
)
-
`App.vue`
不能写模板
-
onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo)
## globalData
小程序有globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用。
当然vue框架的全局变量,另有其他方式定义。
**以下是 App.vue 中定义globalData的相关配置:**
```
html
<script>
export
default
{
globalData
:
{
text
:
'
text
'
}
}
</script>
```
js中操作globalData的方式如下:
`getApp().globalData.text = 'test'`
在应用onLaunch时,getApp对象还未获取,暂时可以使用this.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写在单独的条件编译里。如:
```
html
<style>
/* #ifndef APP-PLUS-NVUE */
@import
'./common/uni.css'
;
/* #endif*/
</style>
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录