提交 d370e2d8 编写于 作者: DCloud-WZF's avatar DCloud-WZF 💬

docs(uni-app-x): 更新 app.uvue

上级 77d105b9
# 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.uvue`本身不是页面,这里不能编写视图元素,也就是没有`<template>`
这个文件的作用包括:监听应用生命周期、配置全局样式、配置全局的存储globalData
应用生命周期仅可在`App.vue`中监听,在页面监听无效。
应用生命周期仅可在`App.uvue`中监听,在页面监听无效。
## 应用生命周期@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.uvue 中定义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.uvue中。
注意如果工程下同时有vue和nvue文件,全局样式的所有css会应用于所有文件,而nvue支持的css有限,编译器会在控制台报警,提示某些css无法在nvue中支持。此时需要把nvue不支持的css写在单独的条件编译里。如:
```html
<style>
/* #ifndef APP-PLUS-NVUE */
@import './common/uni.css';
/* #endif*/
</style>
```
# 全局变量与状态管理
`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.
先完成此消息的编辑!
想要评论请 注册