• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用router事件跳转到指定UIAbility
2
3在卡片中使用**postCardAction**接口的router能力，能够快速拉起卡片提供方应用的指定UIAbility，因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮，实现一键直达的效果。例如相机卡片，卡片上提供拍照、录像等按钮，点击不同按钮将拉起相机应用的不同UIAbility，从而提高用户的体验。
4
5![WidgerCameraCard](figures/WidgerCameraCard.png)
6
7> **说明：**
8>
9> 本文主要介绍动态卡片的事件开发。对于静态卡片，请参见[FormLink](../reference/arkui-ts/ts-container-formlink.md)。
10
11
12通常使用按钮控件来实现页面拉起，示例代码如下:
13
14
15- 在卡片页面中布局两个按钮，点击其中一个按钮时调用postCardAction向指定UIAbility发送router事件，并在事件内定义需要传递的内容。
16
17  ```ts
18  @Entry
19  @Component
20  struct WidgetCard {
21    build() {
22      Column() {
23        Button('功能A')
24          .onClick(() => {
25            console.info('Jump to EntryAbility funA');
26            postCardAction(this, {
27              action: 'router',
28              abilityName: 'EntryAbility', // 只能跳转到当前应用下的UIAbility
29              params: {
30                targetPage: 'funA' // 在EntryAbility中处理这个信息
31              }
32            });
33          })
34
35        Button('功能B')
36          .onClick(() => {
37            console.info('Jump to EntryAbility funB');
38            postCardAction(this, {
39              action: 'router',
40              abilityName: 'EntryAbility', // 只能跳转到当前应用下的UIAbility
41              params: {
42                targetPage: 'funB' // 在EntryAbility中处理这个信息
43              }
44            });
45          })
46      }
47      .width('100%')
48      .height('100%').justifyContent(FlexAlign.SpaceAround)
49    }
50  }
51  ```
52
53- 在UIAbility中接收router事件并获取参数，根据传递的params不同，选择拉起不同的页面。
54
55  ```ts
56  import UIAbility from '@ohos.app.ability.UIAbility';
57  import window from '@ohos.window';
58  import Want from '@ohos.app.ability.Want';
59  import Base from '@ohos.base';
60  import AbilityConstant from '@ohos.app.ability.AbilityConstant';
61
62  let selectPage: string = "";
63  let currentWindowStage: window.WindowStage | null = null;
64
65  export default class EntryAbility extends UIAbility {
66    // 如果UIAbility第一次启动，在收到Router事件后会触发onCreate生命周期回调
67    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
68      // 获取router事件中传递的targetPage参数
69      console.info("onCreate want:" + JSON.stringify(want));
70      if (want.parameters?.params !== undefined) {
71        let params: Record<string, string> = JSON.parse(want.parameters?.params.toString());
72        console.info("onCreate router targetPage:" + params.targetPage);
73        selectPage = params.targetPage;
74      }
75    }
76    // 如果UIAbility已在后台运行，在收到Router事件后会触发onNewWant生命周期回调
77    onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam) {
78      console.info("onNewWant want:" + JSON.stringify(want));
79      if (want.parameters?.params !== undefined) {
80        let params: Record<string, string> = JSON.parse(want.parameters?.params.toString());
81        console.info("onNewWant router targetPage:" + params.targetPage);
82        selectPage = params.targetPage;
83      }
84      if (currentWindowStage != null) {
85        this.onWindowStageCreate(currentWindowStage);
86      }
87    }
88
89    onWindowStageCreate(windowStage: window.WindowStage) {
90      let targetPage: string;
91      // 根据传递的targetPage不同，选择拉起不同的页面
92      switch (selectPage) {
93        case 'funA':
94          targetPage = 'pages/FunA';
95          break;
96        case 'funB':
97          targetPage = 'pages/FunB';
98          break;
99        default:
100          targetPage = 'pages/Index';
101      }
102      if (currentWindowStage === null) {
103        currentWindowStage = windowStage;
104      }
105      windowStage.loadContent(targetPage, (err: Base.BusinessError) => {
106        if (err && err.code) {
107          console.info('Failed to load the content. Cause: %{public}s', JSON.stringify(err));
108          return;
109        }
110      });
111    }
112  };
113  ```
114