app.md 4.7 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 89 90 91
:::warning
`onError` 只能监听到如生命周期、事件以及模板渲染等中的同步错误,\
无法监听异步逻辑(例如:`setTimeout`)中的错误和应用初始化之前、 App 崩溃等错误。
:::
D
DCloud_LXH 已提交
92 93 94 95 96 97 98
<!-- VUEJSON.application.onError.compatibility -->

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

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

<!-- VUEJSON.application.onError.tutorial -->
D
DCloud_LXH 已提交
99 100

**示例代码**
D
DCloud_LXH 已提交
101 102

<!-- VUEJSON.E_App.example.code -->
D
DCloud_LXH 已提交
103 104 105

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

## globalData

W
wanganxp 已提交
111
> HBuilderX 3.99+
D
DCloud_LXH 已提交
112

W
wanganxp 已提交
113
小程序有 globalData,这是一种简单的全局变量机制。这套机制在 uni-app-x 里也可以使用,并且全端通用。
D
DCloud_LXH 已提交
114 115 116 117 118

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

```ts
<script lang="uts">
D
DCloud_LXH 已提交
119 120
  export default {
    globalData: {
D
DCloud_LXH 已提交
121 122
      str: 'global data str',
      num: 123,
D
DCloud_LXH 已提交
123
      bool: true
D
DCloud_LXH 已提交
124
    }
D
DCloud_LXH 已提交
125 126
  }
</script>
D
DCloud_LXH 已提交
127 128 129 130 131 132
```

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

```ts
<script lang="uts">
D
DCloud_LXH 已提交
133
  export default {
D
DCloud_LXH 已提交
134 135 136 137 138 139 140 141 142 143 144 145 146 147
    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 已提交
148
globalData是简单的全局变量,其他状态管理方式,可参考文档[全局变量和状态管理](../tutorial/store.md)
D
DCloud_LXH 已提交
149 150 151

## 全局样式

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