003、应用程序框架-UIAbility

之------UIAbility

杂谈

正文

1.UIAbility

2.基本使用

[2.1 创建Ability工程](#2.1 创建Ability工程)

[2.2 添加基础功能](#2.2 添加基础功能)

[2.3 新建页面](#2.3 新建页面)

[2.4 页面间的跳转](#2.4 页面间的跳转)

3.生命周期

总结

杂谈

UIAbility，其中的页面创建、页面间的跳转、数据传递、生命周期。

正文

1.UIAbility

UIAbility是一种包含用户界面的应用组件，主要用于和用户进行交互。UIAbility也是系统调度的单元，为应用提供窗口在其中绘制界面。

每一个UIAbility实例，都对应于一个最近任务列表中的任务。

它是应用程序的入口：

它是应用间的跳转方式：

一个UIAbility实例对应一个任务栏任务：

**一个应用可以有一个UIAbility，也可以有多个UIAbility。**例如浏览器应用可以通过一个UIAbility结合多页面的形式让用户进行的搜索和浏览内容；而聊天应用增加一个"外卖功能"的场景，则可以将聊天应用中"外卖功能"的内容独立为一个UIAbility，当用户打开聊天应用的"外卖功能"，查看外卖订单详情，此时有新的聊天消息，即可以通过最近任务列表切换回到聊天窗口继续进行聊天对话。

一个UIAbility可以对应于多个页面，建议将一个独立的功能模块放到一个UIAbility中，以多页面的形式呈现。例如新闻应用在浏览内容的时候，可以进行多页面的跳转使用。

2.基本使用

2.1 创建Ability工程

打开DevEco Studio，选择一个Empty Ability工程模板，创建一个工程，例如命名为MyApplication。

在src/main/ets/entryability目录下，初始会生成一个UIAbility文件EntryAbility.ts。可以在EntryAbility.ts文件中根据业务需要实现UIAbility的生命周期回调内容。

在src/main/ets/pages目录下，会生成一个Index页面。这也是基于UIAbility实现的应用的入口页面。可以在Index页面中根据业务需要实现入口页面的功能。

2.2 添加基础功能

为index页面添加基础样式，添加button按钮，添加onClick事件：

2.3 新建页面

为了实现页面的跳转和数据传递，需要新建一个页面。在原有Index页面的基础上，新建一个页面，例如命名为Second.ets。在src/main/ets/pages目录下，右键New->Page，新建一个Second页面，用于实现页面间的跳转和数据传递。

可根据用户需要定义second页面的功能。

2.4 页面间的跳转

两个页面间的跳转和数据传递：

参数传递：

API9及以上，router.pushUrl()方法新增了mode参数，使得目前可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

在单实例模式下：**如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然存在栈中，**页面栈的元素数量不变；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量会加1。

++当页面栈的元素数量较大或者超过32时，可以通过调用router.clear()方法清除页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。++

但如果是不想生成新页面是想替换掉目前的同url页面，那么就是用：

router.replaceUrl()方法，在单实例模式下：**如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，**移动后的页面为新建页，页面栈的元素数量会减1；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量不变。

state修饰是表示页面创建刷新时候的状态修饰，表示页面创建刷新时候就会给src赋值，而当second回到index时候如果有消息传递，index的state是不会刷新触发的。后文有相应解决办法。

返回跳转：

例如调用router.clear()方法清空了页面栈中所有历史页面，仅保留当前页面，此时则无法通过调用router.back()方法返回到上一个页面。

另外还可以返回指定页面：
javascript 复制代码
router.back({ url: 'pages/Index' });

页面返回可以根据业务需要增加一个询问对话框。

即在调用router.back()方法之前，可以先调用router.enableBackPageAlert()方法开启页面返回询问对话框功能。
javascript 复制代码
router.enableBackPageAlert({
  message: 'Message Info'
});

router.back();

在Second页面中，调用router.back()方法返回上一个页面或者返回指定页面时，根据需要继续增加自定义参数，例如在返回时增加一个自定义参数src。
javascript 复制代码
router.back({
  url: 'pages/Index',
  params: {
    src: 'Second页面传来的数据',
  }
})
从Second页面返回到Index页面。在Index页面通过调用router.getParams()方法，获取Second页面传递过来的自定义参数。
javascript 复制代码
import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State src: string = '';
  onPageShow() {
    this.src = (router.getParams() as Record<string, string>)['src'];
  }
  // 页面刷新展示
  ...
}
调用router.back()方法，不会新建页面，返回的是原来的页面，在原来页面中@State声明的变量不会重复声明，以及也不会触发页面的aboutToAppear()生命周期回调，因此无法直接在变量声明以及页面的**aboutToAppear()**生命周期回调中接收和解析router.back()传递过来的自定义参数。需要用到router.getParams()方法。

这行代码是在获取路由参数，并将其赋值给 this.src。

router.getParams() 是 HarmonyOS 中获取路由参数的方法，它返回一个包含所有路由参数的对象。

(router.getParams() as Record<string, string>) 这部分代码是将获取到的路由参数对象强制类型转换为 Record<string, string> 类型。Record<K, T> 是 TypeScript 中的一个工具类型，用于创建一个对象类型，其属性的键是 K 类型，属性的值是 T 类型。在这个例子中，K 和 T 都是 string，所以 Record<string, string> 表示一个所有属性的键和值都是字符串的对象。

$'src'\] 是在访问这个对象的 src 属性。这个属性的值就是路由参数 src 的值。$

3.生命周期

当用户浏览、切换和返回到对应应用的时候，应用中的UIAbility实例会在其生命周期的不同状态之间转换。

UIAbility类提供了很多回调，通过这些回调可以知晓当前UIAbility的某个状态已经发生改变：例如UIAbility的创建和销毁，或者UIAbility发生了前后台的状态切换。

为了实现多设备形态上的裁剪和多窗口的可扩展性，系统对组件管理和窗口管理进行了解耦。UIAbility的生命周期包括Create、Foreground、Background、Destroy四个状态，WindowStageCreate和WindowStageDestroy为窗口管理器（WindowStage）在UIAbility中管理UI界面功能的两个生命周期回调，从而实现UIAbility与窗口之间的弱耦合。