• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# UIAbility组件基本用法
2
3
4[UIAbility](../reference/apis-ability-kit/js-apis-app-ability-uiAbility.md)组件的基本用法包括:指定UIAbility的启动页面以及获取UIAbility的上下文[UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md)。
5
6
7## 指定UIAbility的启动页面
8
9应用中的[UIAbility](../reference/apis-ability-kit/js-apis-app-ability-uiAbility.md)在启动过程中,需要指定启动页面,否则应用启动后会因为没有默认加载页面而导致白屏。可以在UIAbility的[onWindowStageCreate()](../reference/apis-ability-kit/js-apis-app-ability-uiAbility.md#onwindowstagecreate)生命周期回调中,通过[WindowStage](../reference/apis-arkui/arkts-apis-window-WindowStage.md)对象的[loadContent()](../reference/apis-arkui/arkts-apis-window-Window.md#loadcontent9)方法设置启动页面。
10
11
12```ts
13import { UIAbility } from '@kit.AbilityKit';
14import { window } from '@kit.ArkUI';
15
16export default class EntryAbility extends UIAbility {
17  onWindowStageCreate(windowStage: window.WindowStage): void {
18    // Main window is created, set main page for this ability
19    windowStage.loadContent('pages/Index', (err, data) => {
20      // ...
21    });
22  }
23  // ...
24}
25```
26
27> **说明:**
28> 在DevEco Studio中创建的UIAbility中,该UIAbility实例默认会加载Index页面,根据需要将Index页面路径替换为需要的页面路径即可。
29
30
31## 获取UIAbility的上下文信息
32
33[UIAbility](../reference/apis-ability-kit/js-apis-app-ability-uiAbility.md)类拥有自身的上下文信息,该信息为[UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md)类的实例,[UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md)类拥有abilityInfo、currentHapModuleInfo等属性。通过UIAbilityContext可以获取UIAbility的相关配置信息,如包代码路径、Bundle名称、Ability名称和应用程序需要的环境状态等属性信息,以及可以获取操作UIAbility实例的方法(如[startAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startability)、[connectServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#connectserviceextensionability)、[terminateSelf()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#terminateself)等)。
34如果需要在页面中获得当前Ability的Context,可调用[getHostContext](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#gethostcontext12)接口获取当前页面关联的UIAbilityContext或[ExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-extensionContext.md)。
35
36- 在UIAbility中可以通过`this.context`获取UIAbility实例的上下文信息。
37
38  ```ts
39  import { UIAbility, AbilityConstant, Want } from '@kit.AbilityKit';
40
41  export default class EntryAbility extends UIAbility {
42    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
43      // 获取UIAbility实例的上下文
44      let context = this.context;
45      // ...
46    }
47  }
48  ```
49
50- 在页面中获取UIAbility实例的上下文信息,包括导入依赖资源context模块和在组件中定义一个context变量两个部分。
51
52  ```ts
53  import { common, Want } from '@kit.AbilityKit';
54
55  @Entry
56  @Component
57  struct Page_EventHub {
58    private context = this.getUIContext().getHostContext() as common.UIAbilityContext;
59
60    startAbilityTest(): void {
61      let want: Want = {
62        // Want参数信息
63      };
64      this.context.startAbility(want);
65    }
66
67    // 页面展示
68    build() {
69      // ...
70    }
71  }
72  ```
73
74  也可以在导入依赖资源context模块后,在具体使用[UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md)前进行变量定义。
75
76
77  ```ts
78  import { common, Want } from '@kit.AbilityKit';
79
80  @Entry
81  @Component
82  struct Page_UIAbilityComponentsBasicUsage {
83    startAbilityTest(): void {
84      let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
85      let want: Want = {
86        // Want参数信息
87      };
88      context.startAbility(want);
89    }
90
91    // 页面展示
92    build() {
93      // ...
94    }
95  }
96  ```
97
98- 当业务完成后,开发者如果想要终止当前[UIAbility](../reference/apis-ability-kit/js-apis-app-ability-uiAbility.md)实例,可以通过调用[terminateSelf()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#terminateself)方法实现。
99
100  ```ts
101  import { common } from '@kit.AbilityKit';
102  import { BusinessError } from '@kit.BasicServicesKit';
103
104  @Entry
105  @Component
106  struct Page_UIAbilityComponentsBasicUsage {
107    // 页面展示
108    build() {
109      Column() {
110        //...
111        Button('FuncAbilityB')
112          .onClick(() => {
113            let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
114            try {
115              context.terminateSelf((err: BusinessError) => {
116                if (err.code) {
117                  // 处理业务逻辑错误
118                  console.error(`terminateSelf failed, code is ${err.code}, message is ${err.message}.`);
119                  return;
120                }
121                // 执行正常业务
122                console.info(`terminateSelf succeed.`);
123              });
124            } catch (err) {
125              // 捕获同步的参数错误
126              let code = (err as BusinessError).code;
127              let message = (err as BusinessError).message;
128              console.error(`terminateSelf failed, code is ${code}, message is ${message}.`);
129            }
130          })
131      }
132    }
133  }
134  ```
135
136
137## 获取UIAbility拉起方的信息
138
139拉起方(UIAbilityA)通过startAbility启动目标方(UIAbilityB)时,UIAbilityB可以通过[parameters](../reference/apis-ability-kit/js-apis-app-ability-want.md)参数获取UIAbilityA的Pid、BundleName和AbilityName等信息。
140
141
1421. 通过点击UIAbilityA中的"拉起UIAbilityB"按钮,拉起UIAbilityB。
143
144    ```ts
145    import { common, Want } from '@kit.AbilityKit';
146    import { BusinessError } from '@kit.BasicServicesKit';
147
148    @Entry
149    @Component
150    struct Index {
151      @State message: string = 'Hello World';
152      @State context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
153
154      build() {
155        Scroll() {
156          Column() {
157            Text(this.message)
158              .id('HelloWorld')
159              .fontSize(50)
160              .fontWeight(FontWeight.Bold)
161              .alignRules({
162                center: { anchor: '__container__', align: VerticalAlign.Center },
163                middle: { anchor: '__container__', align: HorizontalAlign.Center }
164              })
165              .onClick(() => {
166                this.message = 'Welcome';
167              })
168            Button('terminateSelf').onClick(() => {
169              this.context.terminateSelf()
170            })
171
172            Button('拉起UIAbilityB').onClick((event: ClickEvent) => {
173              let want: Want = {
174                bundleName: this.context.abilityInfo.bundleName,
175                abilityName: 'UIAbilityB',
176              }
177
178              this.context.startAbility(want, (err: BusinessError) => {
179                if (err.code) {
180                  console.error(`Failed to startAbility. Code: ${err.code}, message: ${err.message}.`);
181                }
182              });
183            })
184          }
185        }
186      }
187    }
188    ```
189
1902. 在UIAbilityB的[onCreate](../reference/apis-ability-kit/js-apis-app-ability-uiAbility.md#oncreate)生命周期中,获取并打印UIAbilityA的Pid、BundleName和AbilityName。
191
192    ```ts
193    import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
194    import { window } from '@kit.ArkUI';
195
196    export default class UIAbilityB extends UIAbility {
197      onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
198        // 调用方无需手动传递parameters参数,系统会自动向Want对象中传递调用方信息。
199        console.log(`onCreate, callerPid: ${want.parameters?.['ohos.aafwk.param.callerPid']}.`);
200        console.log(`onCreate, callerBundleName: ${want.parameters?.['ohos.aafwk.param.callerBundleName']}.`);
201        console.log(`onCreate, callerAbilityName: ${want.parameters?.['ohos.aafwk.param.callerAbilityName']}.`);
202      }
203
204      onDestroy(): void {
205        console.log(`UIAbilityB onDestroy.`);
206      }
207
208      onWindowStageCreate(windowStage: window.WindowStage): void {
209        console.log(`Ability onWindowStageCreate.`);
210
211        windowStage.loadContent('pages/Index', (err) => {
212          if (err.code) {
213            console.error(`Failed to load the content, error code: ${err.code}, error msg: ${err.message}.`);
214            return;
215          }
216          console.log(`Succeeded in loading the content.`);
217        });
218      }
219    }
220    ```