Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
d370e2d8
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3341
Star
107
Fork
853
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
103
列表
看板
标记
里程碑
合并请求
85
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
103
Issue
103
列表
看板
标记
里程碑
合并请求
85
合并请求
85
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
d370e2d8
编写于
12月 12, 2023
作者:
DCloud-WZF
💬
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs(uni-app-x): 更新 app.uvue
上级
77d105b9
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
47 addition
and
82 deletion
+47
-82
docs/uni-app-x/collocation/app.md
docs/uni-app-x/collocation/app.md
+46
-46
docs/uni-app-x/tutorial/store.md
docs/uni-app-x/tutorial/store.md
+1
-36
未找到文件。
docs/uni-app-x/collocation/app.md
浏览文件 @
d370e2d8
# App.
vue/App.
uvue
# App.uvue
`App.
vue/uvue`
是uni-app的主组件。uni-app js引擎版是app.vue。uni-app x是app.uvue。以下出现的
`app.vue`
一般泛指包含了
`app.uvue`
`App.
uvue`
是uni-app-x的主组件。
所有页面都是在
`App.
vue`
下进行切换的,是应用入口文件。但
`App.
vue`
本身不是页面,这里不能编写视图元素,也就是没有
`<template>`
。
所有页面都是在
`App.
uvue`
下进行切换的,是应用入口文件。但
`App.u
vue`
本身不是页面,这里不能编写视图元素,也就是没有
`<template>`
。
这个文件的作用包括:监听应用生命周期、配置全局样式、配置全局的存储globalData
应用生命周期仅可在
`App.vue`
中监听,在页面监听无效。
应用生命周期仅可在
`App.
u
vue`
中监听,在页面监听无效。
## 应用生命周期@applifecycle
`
`uni-app`
`
支持如下应用生命周期函数:
`
uni-app-x
`
支持如下应用生命周期函数:
|函数名|说明|平台兼容|
|:-|:-|:-|
|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 不支持|
|onLaunch|当
`uni-app-x`
初始化完成时触发(全局只触发一次),参数为应用启动参数,同
[
uni.getLaunchOptionsSync
](
https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync
)
的返回值||
|onShow|当
`uni-app-x`
启动,或从后台进入前台显示,参数为应用启动参数,同
[
uni.getLaunchOptionsSync
](
https://uniapp.dcloud.net.cn/api/getLaunchOptionsSync.html#getlaunchoptionssync
)
的返回值||
|onHide|当
`uni-app-x`
从前台进入后台||
|onLastPageBackPress|最后一个页面按下Android back键,常用于自定义退出|app-uvue-android 3.9+|
|onExit|监听应用退出|app-uvue-android 3.9+|
**示例代码**
```
html
<script>
<script
lang=
"uts"
>
// 只能在App.vue里监听应用的生命周期
export
default
{
onLaunch
:
function
(
options
)
{
...
...
@@ -40,57 +35,62 @@
},
onHide
:
function
()
{
console
.
log
(
'
App Hide
'
)
}
},
onLastPageBackPress
:
function
()
{
console
.
log
(
'
App LastPageBackPress
'
)
}
}
</script>
```
**注意**
-
**应用生命周期仅可在`App.vue`中监听,在其它页面监听无效**
。
-
以组合式 API 使用时,在 Vue2 和 Vue3 中存在一定区别,请分别参考:
[
Vue2 组合式 API 使用文档
](
/tutorial/vue-composition-api.html
)
和
[
Vue3 组合式 API 使用文档
](
/tutorial/vue3-composition-api.html
)
。
-
**应用生命周期仅可在`App.uvue`中监听,在其它页面监听无效**
。
-
应用启动参数,可以在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)
<!-- - onPageNotFound 页面实际上已经打开了(比如通过分享卡片、小程序码)且发现页面不存在,才会触发,api 跳转不存在的页面不会触发(如 uni.navigateTo) -->
## globalData
小程序有
globalData,这是一种简单的全局变量机制。这套机制在uni-app
里也可以使用,并且全端通用。
小程序有
globalData,这是一种简单的全局变量机制。这套机制在 uni-app-x
里也可以使用,并且全端通用。
当然
vue
框架的全局变量,另有其他方式定义。
当然
vue
框架的全局变量,另有其他方式定义。
**以下是 App.vue 中定义globalData的相关配置:**
**以下是 App.
u
vue 中定义globalData的相关配置:**
```
html
<script>
export
default
{
globalData
:
{
text
:
'
text
'
}
```
ts
<
script
lang
=
"
uts
"
>
export
default
{
globalData
:
{
str
:
'
global data str
'
,
num
:
123
,
bool
:
true
}
</script>
}
<
/script>
```
js中操作globalData的方式如下:
`getApp().globalData.text = 'test'`
在应用onLaunch时,getApp对象还未获取,暂时可以使用this.globalData获取globalData。
页面或组件中通过
`getApp().globalData`
访问。
```
ts
<
script
lang
=
"
uts
"
>
export
default
{
methods
:
{
getGlobalData
()
{
const
app
=
getApp
()
this
.
globalDataStr
=
app
.
globalData
.
str
this
.
globalDataNum
=
app
.
globalData
.
num
this
.
globalDataBool
=
app
.
globalData
.
bool
}
}
}
<
/script>
```
如果需要把globalData的数据绑定到页面上,可在页面的onShow页面生命周期里进行变量重赋值
。
**注意:**
`uni-app x`
中
`globalData`
的数据结构与类型通过
`App.uvue`
中的
`globalData`
初始值定义,后续只能读取或修改,不能新增或删除
。
nvue的weex编译模式中使用globalData的话,由于weex生命周期不支持onShow,但熟悉5+的话,可利用监听webview的addEventListener show事件实现onShow效果,或者直接使用weex生命周期中的beforeCreate。但建议开发者使用uni-app编译模式,而不是weex编译模式。
globalData是简单的全局变量,
如果使用状态管理,请使用
`vuex`
(main.js中定义)
globalData是简单的全局变量,
其他状态管理方式,可参考文档
[
全局变量和状态管理
](
/uni-app-x/tutorial/store.md
)
。
## 全局样式
在
`App.
vue`
中,可以定义一些全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.
vue中。
在
`App.
uvue`
中,可以定义一些全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.u
vue中。
注意如果工程下同时有vue和nvue文件,全局样式的所有css会应用于所有文件,而nvue支持的css有限,编译器会在控制台报警,提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如:
```
html
<style>
/* #ifndef APP-PLUS-NVUE */
@import
'./common/uni.css'
;
/* #endif*/
</style>
```
docs/uni-app-x/tutorial/store.md
浏览文件 @
d370e2d8
# 全局变量与状态管理
`uni-app x`
目前不支持
`pinia`
和
`vuex`
。可通过
`globalData(3.99+)`
或一个专用模块组织和管理全局变量与状态。
## globalData
`App.uvue`
中定义
`globalData`
。
```
ts
<
script
lang
=
"
uts
"
>
export
default
{
globalData
:
{
str
:
'
global data str
'
,
num
:
123
,
bool
:
true
}
}
<
/script>
```
页面或组件中通过
`getApp().globalData`
访问。
```
ts
<
script
lang
=
"
uts
"
>
export
default
{
methods
:
{
getGlobalData
()
{
const
app
=
getApp
()
this
.
globalDataStr
=
app
.
globalData
.
str
this
.
globalDataNum
=
app
.
globalData
.
num
this
.
globalDataBool
=
app
.
globalData
.
bool
}
}
}
<
/script>
```
**注意:**
`uni-app x`
中
`globalData`
的数据结构与类型通过
`App.uvue`
中的
`globalData`
初始值定义,后续只能读取或修改,不能新增或删除。
`uni-app x`
目前不支持
`pinia`
和
`vuex`
。可通过
[
globalData(3.99+)
](
/uni-app-x/collocation/app.md#globalData
)
或一个专用模块组织和管理全局变量与状态。
## 专用模块
定义一个模块,编写一个单独的uts文件,比如 /store/index.uts,在里面设一个全局变量,比如globalNum。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录