app.md 4.8 KB
Newer Older
D
DCloud_LXH 已提交
1 2 3 4 5 6
# App.uvue

`App.uvue`是uni-app-x的主组件。

所有页面都是在`App.uvue`下进行切换的,是应用入口文件。但`App.uvue`本身不是页面,这里不能编写视图元素,也就是没有`<template>`

W
wanganxp 已提交
7 8 9 10 11
这个文件的作用包括:
1. 监听应用生命周期
2. 配置全局变量globalData
3. 编写全局可用的method方法
4. 配置全局样式
D
DCloud_LXH 已提交
12 13 14

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

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
15
`App.uvue`仅支持选项式,暂不支持组合式写法。
W
wanganxp 已提交
16

D
DCloud_LXH 已提交
17 18 19 20
## 应用生命周期@applifecycle

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

D
DCloud_LXH 已提交
21 22 23 24 25 26 27 28 29 30
<!-- VUEJSON.application.onLaunch.name -->

<!-- VUEJSON.application.onLaunch.description -->

<!-- VUEJSON.application.onLaunch.compatibility -->

<!-- VUEJSON.application.onLaunch.param -->

<!-- VUEJSON.application.onLaunch.returnValue -->

W
wanganxp 已提交
31 32
- 如果应用通过scheme或applink(通用链接)启动,可在本生命周期获取。配置scheme或applink需在AndroidManifest.xml或info.plist中配置,打包后生效。

D
DCloud_LXH 已提交
33 34 35 36 37 38 39 40 41 42 43 44
<!-- VUEJSON.application.onLaunch.tutorial -->

<!-- VUEJSON.application.onShow.name -->

<!-- VUEJSON.application.onShow.description -->

<!-- VUEJSON.application.onShow.compatibility -->

<!-- VUEJSON.application.onShow.param -->

<!-- VUEJSON.application.onShow.returnValue -->

W
wanganxp 已提交
45 46
- 如果应用通过scheme或applink(通用链接)启动,可在本生命周期获取。配置scheme或applink需在AndroidManifest.xml或info.plist中配置,打包后生效。

D
DCloud_LXH 已提交
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
<!-- VUEJSON.application.onShow.tutorial -->

<!-- VUEJSON.application.onHide.name -->

<!-- VUEJSON.application.onHide.description -->

<!-- VUEJSON.application.onHide.compatibility -->

<!-- VUEJSON.application.onHide.param -->

<!-- VUEJSON.application.onHide.returnValue -->

<!-- VUEJSON.application.onHide.tutorial -->

<!-- VUEJSON.application.onLastPageBackPress.name -->

<!-- VUEJSON.application.onLastPageBackPress.description -->

<!-- VUEJSON.application.onLastPageBackPress.compatibility -->

<!-- VUEJSON.application.onLastPageBackPress.param -->

<!-- VUEJSON.application.onLastPageBackPress.returnValue -->

<!-- VUEJSON.application.onLastPageBackPress.tutorial -->

<!-- VUEJSON.application.onExit.name -->

<!-- VUEJSON.application.onExit.description -->

<!-- VUEJSON.application.onExit.compatibility -->

<!-- VUEJSON.application.onExit.param -->

<!-- VUEJSON.application.onExit.returnValue -->

<!-- VUEJSON.application.onExit.tutorial -->

<!-- VUEJSON.application.onError.name -->

<!-- VUEJSON.application.onError.description -->
DCloud-WZF's avatar
DCloud-WZF 已提交
88
:::warning
89 90 91 92 93 94 95
`onError` 可以监听以下来源中的同步错误:
- 组件渲染器
- 事件处理器
- 生命周期钩子
- setup() 函数
- 侦听器

DCloud-WZF's avatar
DCloud-WZF 已提交
96 97
无法监听异步逻辑(例如:`setTimeout`)中的错误和应用初始化之前、 App 崩溃等错误。
:::
D
DCloud_LXH 已提交
98 99 100 101 102 103 104
<!-- VUEJSON.application.onError.compatibility -->

<!-- VUEJSON.application.onError.param -->

<!-- VUEJSON.application.onError.returnValue -->

<!-- VUEJSON.application.onError.tutorial -->
D
DCloud_LXH 已提交
105 106

**示例代码**
D
DCloud_LXH 已提交
107 108

<!-- VUEJSON.E_App.example.code -->
D
DCloud_LXH 已提交
109 110 111

**注意**
- **应用生命周期仅可在`App.uvue`中监听,在其它页面监听无效**
W
wanganxp 已提交
112
- 应用启动参数,也可以在API `uni.getLaunchOptionsSync`获取,[详见](../api/launch.md#getlaunchoptionssync)
DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
113
- 由于Android的`uni.exit()`[热退出](../api/exit.md),此时很多代码逻辑仍然在运行,有些on的事件监听并没有off,需要开发者在onExit生命周期中编写代码处理。比如在app的onLaunch里通过onXX监听了某事件,那么就需要在onExit里调用offXX取消某事件的监听,否则反复热退出、启动,会多次on而不会off,这会引发内存泄露。
D
DCloud_LXH 已提交
114 115 116

## globalData

W
wanganxp 已提交
117
> HBuilderX 3.99+
D
DCloud_LXH 已提交
118

W
wanganxp 已提交
119
小程序有 globalData,这是一种简单的全局变量机制。这套机制在 uni-app-x 里也可以使用,并且全端通用。
D
DCloud_LXH 已提交
120 121 122 123 124

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

```ts
<script lang="uts">
D
DCloud_LXH 已提交
125 126
  export default {
    globalData: {
D
DCloud_LXH 已提交
127 128
      str: 'global data str',
      num: 123,
D
DCloud_LXH 已提交
129
      bool: true
D
DCloud_LXH 已提交
130
    }
D
DCloud_LXH 已提交
131 132
  }
</script>
D
DCloud_LXH 已提交
133 134 135 136 137 138
```

页面或组件中通过 `getApp().globalData` 访问。

```ts
<script lang="uts">
D
DCloud_LXH 已提交
139
  export default {
D
DCloud_LXH 已提交
140 141 142 143 144 145 146 147 148 149 150 151 152 153
    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` 初始值定义,后续只能读取或修改,不能新增或删除。

W
wanganxp 已提交
154
globalData是简单的全局变量,其他状态管理方式,可参考文档[全局变量和状态管理](../tutorial/store.md)
D
DCloud_LXH 已提交
155 156 157

## 全局样式

DCloud_Heavensoft's avatar
DCloud_Heavensoft 已提交
158
`App.uvue`中,可以定义一些全局通用样式,这里定义的class,每个页面都可以直接使用。