1# UIExtensionComponent (系统接口) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @dutie123--> 5<!--Designer: @lmleon--> 6<!--Tester: @fredyuan0912--> 7<!--Adviser: @HelloCrease--> 8 9UIExtensionComponent用于支持在本页面内嵌入其他应用提供的UI。展示的内容在另外一个进程中运行，本应用并不参与其中的布局和渲染。 10 11通常用于有进程隔离诉求的模块化开发场景。 12 13> **说明：** 14> 15> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 16> 17> 本模块为系统接口。 18 19## 使用约束 20 21本组件不支持预览。 22 23被拉起的Ability必须是带UI的Ability扩展，如何实现带UI的Ability扩展请参考[实现带UI的Ability扩展](../../apis-ability-kit/js-apis-app-ability-uiExtensionAbility.md)。 24 25必须显式设置组件宽高为非0有效值。 26 27不支持滚动到边界后，传递至上层继续滚动的场景。当UIExtensionComponent组件使用方和扩展Ability都支持内容滚动时，通过手势滚动会导致UIExtensionComponent内外同时响应，包括但不限于[Scroll](ts-container-scroll.md)、[Swiper](ts-container-swiper.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)等滚动容器。内外手势同时滚动场景的规避方法可参考[示例2](#示例2-uec内外部同时响应滚动时隔离处理)。 28 29 30## 子组件 31 32无 33 34## 接口 35 36UIExtensionComponent(want: Want, options?: UIExtensionOptions) 37 38**系统接口：** 此接口为系统接口。 39 40**系统能力：** SystemCapability.ArkUI.ArkUI.Full 41 42**参数：** 43 44| 参数名 | 类型 | 必填 | 说明 | 45| --------------------- | ---------------------------------------------------------- | ---- | ------------------ | 46| want | [Want](../../apis-ability-kit/js-apis-app-ability-want.md) | 是 | 要加载的Ability。 | 47| options<sup>11+</sup> | [UIExtensionOptions](#uiextensionoptions11) | 否 | 需要传递的构造项。 | 48 49## 属性 50 51支持[通用属性](ts-component-general-attributes.md)。 52 53## 事件 54 55不支持[点击](ts-universal-events-click.md)等通用事件。 56 57将事件经过坐标转换后传递给对端Ability处理。 58 59支持以下事件： 60 61### onRemoteReady 62 63onRemoteReady(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<UIExtensionProxy>) 64 65UIExtensionAbility连接完成时的回调，之后可使用proxy向被拉起的Ability发送数据。 66 67**系统接口：** 此接口为系统接口。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ---------------------------- | ------ | ------ | ------------------------------------------------------- | 75| callback | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<UIExtensionProxy>) | 是 | 用于向对端Ability发送数据。 | 76 77### onReceive 78 79onReceive(callback: ReceiveCallback) 80 81收到被拉起的Ability发送的数据时触发的回调。 82 83**系统接口：** 此接口为系统接口。 84 85**系统能力：** SystemCapability.ArkUI.ArkUI.Full 86 87**参数：** 88 89| 参数名 | 类型 | 必填 | 说明 | 90| ---------------------------- | ------ | ------ | ------------------------------------------------------- | 91| callback | [ReceiveCallback](#receivecallback18) | 是 | 收到来自对端Ability的数据。 | 92 93### onResult<sup>(deprecated)</sup> 94 95onResult(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<{code: number; want?: Want}>) 96 97被拉起的Ability扩展调用terminateSelfWithResult时会先触发本回调函数，再触发OnRelease。 98 99本回调内可处理对端Ability的结果数据，可参考[AbilityResult](../../apis-ability-kit/js-apis-inner-ability-abilityResult.md)。 100 101> **说明：** 102> 从 API version 10 开始支持，从 API version 12 开始废弃，建议使用[onTerminated](#onterminated12)替代。 103 104**系统接口：** 此接口为系统接口。 105 106**系统能力：** SystemCapability.ArkUI.ArkUI.Full 107 108**参数：** 109 110| 参数名 | 类型 | 必填 |说明 | 111| ---------------------------- | ------ | ------ | ------------------------------------------------------------ | 112| code | number | 是 | 收到来自对端Ability的处理结果code。 | 113| want | Want | 否 |收到来自对端Ability的处理结果[Want](../../apis-ability-kit/js-apis-app-ability-want.md)。 | 114 115### onRelease<sup>(deprecated)</sup> 116 117onRelease(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<number>) 118 119用于处理被拉起的Ability销毁时的回调。 120 121被拉起的Ability扩展调用terminateSelfWithResult或者terminateSelf时会触发本回调，此时releaseCode为0，即正常销毁。 122 123被拉起的Ability扩展意外Crash或被kill时，触发本回调，此时releaseCode为1。 124 125> **说明：** 126> 从 API version 10 开始支持，从 API version 12 开始废弃，建议使用[onTerminated](#onterminated12)或者[onError](#onerror)替代。 127 128**系统接口：** 此接口为系统接口。 129 130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 131 132**参数：** 133 134| 参数名 | 类型 | 必填 | 说明 | 135| ---------------------------- | ------ | ------ | ------------------------------------------------------------ | 136| callback | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<number> | 是 |对端Ability销毁时的code，0为正常销毁，1为异常销毁。 | 137 138### onError 139 140onError(callback:[ErrorCallback](../../apis-basic-services-kit/js-apis-base.md#errorcallback)) 141 142被拉起的Ability扩展在运行过程中发生异常时触发本回调。可通过回调参数中的code、name和message获取错误信息并做处理，业务错误码详细介绍请参见[UIExtension错误码](../errorcode-uiextension.md)。 143 144**系统接口：** 此接口为系统接口。 145 146**系统能力：** SystemCapability.ArkUI.ArkUI.Full 147 148**参数：** 149 150| 参数名 | 类型 | 必填 | 说明 | 151| ---------------------------- | ------ | ------ | ------------------------------------------------------------ | 152| callback | [ErrorCallback](../../apis-basic-services-kit/js-apis-base.md#errorcallback) | 是 | 报错信息。 | 153 154### onTerminated<sup>12+</sup> 155 156onTerminated(callback: Callback<TerminationInfo>) 157 158被拉起的UIExtensionAbility通过调用`terminateSelfWithResult`或者`terminateSelf`正常退出时，触发本回调函数。 159 160**系统接口：** 此接口为系统接口。 161 162**系统能力：** SystemCapability.ArkUI.ArkUI.Full 163 164**参数：** 165 166| 参数名 | 类型 | 必填 | 说明 | 167| ------- | ------ | ------ | ------------------------------------------------------------------------------------- | 168| callback | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<[TerminationInfo](#terminationinfo12)> | 是 | 回调函数，入参用于接收UIExtensionAbility的返回结果，类型为[TerminationInfo](#terminationinfo12)。 | 169 170> **说明：** 171> 172> - 若UIExtensionAbility通过调用`terminateSelfWithResult`退出，其携带的信息会传给回调函数的入参。 173> - 若UIExtensionAbility通过调用`terminateSelf`退出，上述回调函数的入参中，"code"取默认值"0"，"want"为"undefined"。 174 175### onDrawReady<sup>18+</sup> 176 177onDrawReady(callback: Callback\<void>) 178 179被拉起的UIExtensionAbility绘制第一帧时触发本回调。 180 181**系统接口：** 此接口为系统接口。 182 183**系统能力：** SystemCapability.ArkUI.ArkUI.Full 184 185**参数：** 186 187| 参数名 | 类型 | 必填 | 说明 | 188| ---------------------------- | ------ | ------ | ------------------------------------------------------------ | 189| callback | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<void> | 是 | 回调函数，UIExtensionAbility绘制第一帧时触发本回调，类型为void。 | 190 191### TerminationInfo<sup>12+</sup> 192 193用于表示被拉起的UIExtensionAbility通过调用`terminateSelfWithResult`或者`terminateSelf`正常退出时的返回结果。 194 195**系统接口：** 此接口为系统接口。 196 197**系统能力：** SystemCapability.ArkUI.ArkUI.Full 198 199| 名称 | 类型 | 只读 |可选 | 说明 | 200| ------- | ------ | ------ | ------ |--------------------------------------------------- | 201| code | number | 否 | 否 | 被拉起UIExtensionAbility退出时返回的结果码，返回的结果码由`terminateSelfWithResult`或者`terminateSelf`被调用时传入的数据决定。 | 202| want | [Want](../../apis-ability-kit/js-apis-app-ability-want.md) | 否 | 是 | 被拉起UIExtensionAbility退出时返回的数据。 | 203 204## ReceiveCallback<sup>18+</sup> 205type ReceiveCallback = [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<Record\<string, Object\>\> 206 207用于封装被拉起的Ability发送的数据。 208 209**系统接口：** 此接口为系统接口。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Full 212 213| 类型 | 说明 | 214| ------ | --------------------------------------------------------- | 215| [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<Record\<string, Object\>\> | 收到来自对端Ability的数据。 | 216 217## UIExtensionOptions<sup>11+</sup> 218 219用于在UIExtensionComponent进行构造的时传递可选的构造参数。 220 221**系统接口：** 此接口为系统接口。 222 223**系统能力：** SystemCapability.ArkUI.ArkUI.Full 224 225 226| 名称 | 类型 | 只读 | 可选 | 说明 | 227| ---- | ---------------------------------------- | ---- | ---- | --------------- | 228| isTransferringCaller | boolean | 否 | 是 | 在使用UIExtensionComponent嵌套时，设置当前UIExtensionComponent是否转发上一级的Caller信息。</br> 默认值：false | 229| placeholder<sup>12+</sup> | [ComponentContent](../js-apis-arkui-ComponentContent.md) | 否 | 是 | 设置占位符，在UIExtensionComponent与UIExtensionAbility建立连接前显示。 | 230| dpiFollowStrategy<sup>12+</sup> | [DpiFollowStrategy](ts-container-ui-extension-component-sys.md#dpifollowstrategy12) | 否 | 是 | 提供接口支持设置DPI跟随宿主或跟随UIExtensionAbility。</br> 默认值：FOLLOW_UI_EXTENSION_ABILITY_DPI | 231| areaChangePlaceholder<sup>14+</sup> | Record<string, [ComponentContent](../js-apis-arkui-ComponentContent.md)> | 否 | 是 | 设置尺寸变化占位符，在UIExtensionComponent尺寸发生变化并且UIExtension内部渲染未完成时显示, key值支持"FOLD_TO_EXPAND"(折叠展开尺寸变化)、"UNDEFINED"(默认尺寸变化)。 | 232| windowModeFollowStrategy<sup>18+</sup> | [WindowModeFollowStrategy](ts-container-ui-extension-component-sys.md#windowmodefollowstrategy18) | 否 | 是 | 提供接口以支持设置窗口Mode，使其能够跟随宿主或UIExtensionAbility。</br> 默认值：FOLLOW_UI_EXTENSION_ABILITY_WINDOW_MODE | 233 234## DpiFollowStrategy<sup>12+</sup> 235 236**系统接口：** 此接口为系统接口。 237 238**系统能力：** SystemCapability.ArkUI.ArkUI.Full 239 240| 名称 | 值 | 说明 | 241| ---------------------------------------- | ----|--------------- | 242| FOLLOW_HOST_DPI | 0 | 表示DPI跟随宿主。 | 243| FOLLOW_UI_EXTENSION_ABILITY_DPI | 1 | 表示DPI跟随UIExtensionAbility。 | 244 245## WindowModeFollowStrategy<sup>18+</sup> 246 247窗口Mode跟随策略，用于设置窗口Mode，使其能够跟随宿主或UIExtensionAbility。 248 249**系统接口：** 此接口为系统接口。 250 251**系统能力：** SystemCapability.ArkUI.ArkUI.Full 252 253| 名称 | 值 | 说明 | 254| ---------------------------------------- | ----|--------------- | 255| FOLLOW_HOST_WINDOW_MODE | 0 | 表示窗口Mode跟随宿主。 | 256| FOLLOW_UI_EXTENSION_ABILITY_WINDOW_MODE | 1 | 表示窗口Mode跟随UIExtensionAbility。 | 257 258## UIExtensionProxy 259 260用于在双方建立连接成功后，组件使用方向被拉起的Ability发送数据、订阅和取消订阅注册。 261 262### send 263 264send(data: Record\<string, Object\>): void 265 266用于在双方建立连接成功后，组件使用方向被拉起的Ability发送数据的场景，提供异步发送数据。 267 268**系统接口：** 此接口为系统接口。 269 270**系统能力：** SystemCapability.ArkUI.ArkUI.Full 271 272**参数：** 273 274| 参数名 | 类型 | 必填 | 说明 | 275| ---- | ---------------------------------------- | ---- | --------------- | 276| data | Record\<string, Object\> | 是 | 异步发送给被拉起的扩展Ability的数据。 | 277 278### sendSync<sup>11+</sup> 279 280sendSync(data: Record\<string, Object\>): Record\<string, Object\> 281 282用于在双方建立连接成功后，组件使用方向被拉起的Ability发送数据的场景，提供同步发送数据。 283 284**系统接口：** 此接口为系统接口。 285 286**系统能力：** SystemCapability.ArkUI.ArkUI.Full 287 288**参数：** 289 290| 参数名 | 类型 | 必填 | 说明 | 291| ---- | ---------------------------------------- | ---- | --------------- | 292| data | Record\<string, Object\> | 是 | 同步发送给被拉起的扩展Ability的数据。 | 293 294**返回值：** 295 296| 类型 | 描述 | 297| ---- | ----| 298| Record\<string, Object\> | 扩展Ability回复的数据。 | 299 300**错误码：** 301 302以下错误码的详细介绍请参见[UIExtension错误码](../errorcode-uiextension.md)。 303| 错误码ID | 错误信息 | 304| ------- | --------| 305| 100011 | No callback has been registered to respond to this request. | 306| 100012 | Transferring data failed. | 307 308### on('asyncReceiverRegister')<sup>11+</sup> 309 310on(type: 'asyncReceiverRegister', callback: Callback\<UIExtensionProxy\>): void 311 312用于在双方建立连接成功后，组件使用方订阅被拉起的Ability发生异步注册的场景。 313 314**系统接口：** 此接口为系统接口。 315 316**系统能力：** SystemCapability.ArkUI.ArkUI.Full 317 318**参数：** 319 320| 参数名 | 类型 |必填 | 说明 | 321| ------ | -------- |---- | ------- | 322| type | string | 是 | 代表订阅扩展Ability发生异步注册回调。 | 323| callback | Callback\<UIExtensionProxy\> | 是 | 订阅扩展Ability注册setReceiveDataCallback后触发的回调。 | 324 325### on('syncReceiverRegister')<sup>11+</sup> 326 327on(type: 'syncReceiverRegister', callback: Callback\<UIExtensionProxy\>): void; 328 329用于在双方建立连接成功后，组件使用方订阅被拉起的Ability发生同步注册的场景。 330 331**系统接口：** 此接口为系统接口。 332 333**系统能力：** SystemCapability.ArkUI.ArkUI.Full 334 335**参数：** 336 337| 参数名 | 类型 |必填 | 说明 | 338| ------ | -------- |---- | ------- | 339| type | string | 是 | 订阅扩展Ability发生同步注册回调。 | 340| callback | Callback\<UIExtensionProxy\> | 是 | 扩展Ability注册setReceiveDataForResultCallback后触发的回调。 | 341 342### off('asyncReceiverRegister')<sup>11+</sup> 343 344off(type: 'asyncReceiverRegister', callback?: Callback\<UIExtensionProxy\>): void 345 346用于在双方建立连接成功后，组件使用方取消订阅被拉起的Ability发生异步注册的场景。 347 348**系统接口：** 此接口为系统接口。 349 350**系统能力：** SystemCapability.ArkUI.ArkUI.Full 351 352**参数：** 353 354| 参数名 | 类型 | 必填 | 说明 | 355| ------ | -------- | ----- | ------- | 356| type | string | 是 | 取消订阅扩展Ability发生异步注册回调。 | 357| callback | Callback\<UIExtensionProxy\> | 否 | 为空代表取消订阅所有扩展Ability异步注册后触发回调。<br> 非空代表取消订阅异步对应回调。 | 358 359### off('syncReceiverRegister')<sup>11+</sup> 360 361off(type: 'syncReceiverRegister', callback?: Callback\<UIExtensionProxy\>): void 362 363用于在双方建立连接成功后，组件使用方取消订阅被拉起的Ability发生同步注册的场景。 364 365**系统接口：** 此接口为系统接口。 366 367**系统能力：** SystemCapability.ArkUI.ArkUI.Full 368 369**参数：** 370 371| 参数名 | 类型 | 必填 | 说明 | 372| ------ | -------- | ----- | ------- | 373| type | string | 是 | 取消订阅扩展Ability发生同步注册回调。 | 374| callback | Callback\<UIExtensionProxy\> | 否 | 为空代表取消订阅所有扩展Ability同步注册后触发回调<br> 非空代表取消订阅同步对应回调。 | 375 376## 示例 377 378### 示例1 (加载UIExtension) 379 380UIExtensionComponent组件使用分为使用方和提供方。本示例仅展示组件使用的方法和扩展的Ability，实际运行需在设备中安装bundleName为"com.example.newdemo"，abilityName为"UIExtensionProvider"的Ability扩展。 381 382**组件使用方** 383 384使用方入口界面Index.ets内容如下: 385```ts 386import { ComponentContent } from '@kit.ArkUI'; 387 388class Params { 389} 390@Builder 391function LoadingBuilder(params: Params) { 392 Column() { 393 LoadingProgress() 394 .color(Color.Blue) 395 } 396} 397@Builder 398function AreaChangePlaceholderBuilder(params: Params) { 399 Column() { 400 } 401 .width('100%') 402 .height('100%') 403 .backgroundColor(Color.Orange) 404} 405@Entry 406@Component 407struct Second { 408 @State message1: string = 'Hello World 1'; 409 @State message2: string = 'Hello World 2'; 410 @State message3: string = 'Hello World 3'; 411 @State visible: Visibility = Visibility.Hidden; 412 @State wid: number = 300; 413 @State hei: number = 300; 414 @State windowStrategy: WindowModeFollowStrategy = WindowModeFollowStrategy.FOLLOW_UI_EXTENSION_ABILITY_WINDOW_MODE; 415 private proxy: UIExtensionProxy | null = null; 416 private initPlaceholder = new ComponentContent(this.getUIContext(), wrapBuilder(LoadingBuilder), new Params); 417 private areaChangePlaceholder = new ComponentContent(this.getUIContext(), wrapBuilder(AreaChangePlaceholderBuilder), new Params); 418 419 420 build() { 421 Row() { 422 Column() { 423 Text(this.message1).fontSize(30) 424 Text(this.message2).fontSize(30) 425 Text(this.message3).fontSize(30) 426 UIExtensionComponent({ 427 bundleName : "com.example.newdemo", 428 abilityName: "UIExtensionProvider", 429 parameters: { 430 "ability.want.params.uiExtensionType": "sys/commonUI" 431 }}, 432 { 433 placeholder: this.initPlaceholder, 434 areaChangePlaceholder: { 435 "FOLD_TO_EXPAND" : this.areaChangePlaceholder, 436 }, 437 windowModeFollowStrategy: this.windowStrategy 438 }) 439 .width(this.wid) 440 .height(this.hei) 441 .border({width: 5, color: Color.Blue}) 442 .onReceive((data) => { 443 console.info('Lee onReceive, for test'); 444 this.message3 = JSON.stringify(data['data']); 445 }) 446 .onTerminated((info) => { 447 console.info('onTerminated: code =' + info.code + ', want = ' + JSON.stringify(info.want)); 448 }) 449 .onRemoteReady((proxy) => { 450 console.info('onRemoteReady, for test'); 451 this.proxy = proxy; 452 453 this.proxy.on("syncReceiverRegister", syncRegisterCallback1); 454 455 this.proxy.on("asyncReceiverRegister", (proxy1) => { 456 console.info("on invoke for test, type is asyncReceiverRegister"); 457 }); 458 }) 459 460 Button("点击向UIExtensionAbility发送数据").onClick(() => { 461 if (this.proxy != undefined) { 462 this.proxy.send({data: "你好1"}); 463 464 try { 465 let re = this.proxy.sendSync({data: "你好2"}); 466 console.info("for test, re=" + JSON.stringify(re)); 467 } catch (err) { 468 console.error(`sendSync failed for test. errCode=${err.code}, msg=${err.message}`); 469 } 470 } 471 }) 472 } 473 .width('100%') 474 } 475 .height('100%') 476 } 477} 478 479function syncRegisterCallback1(proxy: UIExtensionProxy) { 480 console.info("on invoke for test, syncRegisterCallback1, type is syncReceiverRegister"); 481} 482 483function syncRegisterCallback2(proxy: UIExtensionProxy) { 484 console.info("on invoke for test, syncRegisterCallback2, type is syncReceiverRegister"); 485} 486``` 487**组件提供方** 488 489提供方包含三个文件需要修改 490- 提供方新增扩展入口文件/src/main/ets/uiextensionability/UIExtensionProvider.ets 491```ts 492import { UIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 493 494const TAG: string = '[UIExtAbility]' 495export default class UIExtAbility extends UIExtensionAbility { 496 497 onCreate() { 498 console.info(TAG, `UIExtAbility onCreate`); 499 } 500 501 onForeground() { 502 console.info(TAG, `UIExtAbility onForeground`); 503 } 504 505 onBackground() { 506 console.info(TAG, `UIExtAbility onBackground`); 507 } 508 509 onDestroy() { 510 console.info(TAG, `UIExtAbility onDestroy`); 511 } 512 513 onSessionCreate(want: Want, session: UIExtensionContentSession) { 514 console.info(TAG, `UIExtAbility onSessionCreate, want: ${JSON.stringify(want)}`); 515 let param: Record<string, UIExtensionContentSession> = { 516 'session': session 517 }; 518 let storage: LocalStorage = new LocalStorage(param); 519 session.loadContent('pages/extension', storage); 520 } 521 522 onSessionDestroy(session: UIExtensionContentSession) { 523 console.info(TAG, `UIExtAbility onSessionDestroy`); 524 } 525} 526``` 527 528- 提供方扩展Ability入口页面文件/src/main/ets/pages/extension.ets 529```ts 530import { UIExtensionContentSession } from '@kit.AbilityKit'; 531 532let storage = new LocalStorage(); 533AppStorage.setOrCreate('message', 'UIExtensionAbility'); 534 535@Entry(storage) 536@Component 537struct Extension { 538 @StorageLink('message') storageLink: string = ''; 539 private session: UIExtensionContentSession | undefined = storage.get<UIExtensionContentSession>('session'); 540 pathStack: NavPathStack = new NavPathStack(); 541 542 @Builder 543 PageMap(name: string) { 544 if (name === "hello") { 545 pageOneTmp(); 546 } 547 } 548 549 onPageShow() { 550 if (this.session != undefined) { 551 this.session.setReceiveDataCallback((data)=> { 552 this.storageLink = JSON.stringify(data); 553 console.info("invoke for test, handle callback set by setReceiveDataCallback successfully"); 554 }) 555 556 this.session.setReceiveDataForResultCallback(func1); 557 } 558 } 559 560 build() { 561 Navigation(this.pathStack) { 562 Row() { 563 Column() { 564 Text(this.storageLink) 565 .fontSize(20) 566 .fontWeight(FontWeight.Bold) 567 Button("点击向Component发送数据").onClick(()=>{ 568 if (this.session != undefined) { 569 this.session.sendData({"data": 543321}); 570 console.info('send 543321, for test'); 571 } 572 }) 573 Button("terminate").onClick(()=> { 574 if (this.session != undefined) { 575 this.session.terminateSelf(); 576 } 577 storage.clear(); 578 }) 579 Button("terminate with result").onClick(()=>{ 580 if (this.session != undefined) { 581 this.session.terminateSelfWithResult({ 582 resultCode: 0, 583 want: { 584 bundleName: "myBundleName", 585 parameters: { "result": 123456 } 586 } 587 }); 588 } 589 storage.clear(); 590 }) 591 592 Button("点击跳转").onClick(()=> { 593 this.pathStack.pushPath({ name: "hello"}); 594 }) 595 } 596 } 597 .height('100%') 598 }.navDestination(this.PageMap) 599 .mode(NavigationMode.Stack) 600 } 601} 602 603// pageOne 604@Component 605export struct pageOneTmp { 606 pathStack: NavPathStack = new NavPathStack() 607 608 build() { 609 NavDestination() { 610 Column() { 611 Text("Hello World") 612 }.width('100%').height('100%') 613 }.title("pageOne") 614 .onBackPressed(() => { 615 const popDestinationInfo = this.pathStack.pop(); // 弹出路由栈栈顶元素 616 console.info('pop' + '返回值' + JSON.stringify(popDestinationInfo)); 617 return true; 618 }) 619 .onReady((context: NavDestinationContext) => { 620 this.pathStack = context.pathStack; 621 }) 622 } 623} 624 625function func1(data: Record<string, Object>): Record<string, Object> { 626 let linkToMsg: SubscribedAbstractProperty<string> = AppStorage.link('message'); 627 linkToMsg.set(JSON.stringify(data)); 628 console.info("invoke for test, handle callback set by setReceiveDataForResultCallback successfully"); 629 return data; 630} 631 632``` 633 634- 提供方扩展Ability, module配置文件/src/main/module.json5添加对应配置 635```json 636{ 637 "name": "UIExtensionProvider", 638 "srcEntry": "./ets/uiextensionability/UIExtensionProvider.ets", 639 "description": "1", 640 "label": "$string:EntryAbility_label", 641 "type": "sys/commonUI", 642 "exported": true, 643} 644``` 645 646### 示例2 (UEC内外部同时响应滚动时隔离处理) 647 648本示例展示了当UIExtensionComponent组件使用方和扩展的Ability同时使用[Scroll](ts-container-scroll.md)容器的场景，通过对UIExtensionComponent设置手势拦截处理，实现当UIExtensionComponent内部滚动时，外部组件不响应滚动。 649 650手势使用方式： 651组件内部滚动：手指在组件内部进行滚动操作； 652组件外部滚动：拖动外部滚动条进行滚动。 653 654实际运行时需先在设备中安装bundleName为"com.example.newdemo"，abilityName为"UIExtensionProvider"的Ability扩展。 655 656提供方扩展入口文件UIExtensionProvider.ets与[示例1](#示例1-加载uiextension)扩展入口文件UIExtensionProvider.ets代码一致。 657 658提供方扩展Ability, module配置文件与[示例1](#示例1-加载uiextension)扩展module配置文件module.json5代码一致。 659 660- 使用方组件使用示例: 661```ts 662@Entry 663@Component 664struct Second { 665 @State message1: string = 'Hello World 1'; 666 @State message2: string = 'Hello World 2'; 667 @State message3: string = 'Hello World 3'; 668 @State visible: Visibility = Visibility.Hidden; 669 @State wid: number = 300; 670 @State hei: number = 300; 671 private scroller: Scroller = new Scroller(); 672 private arr: number[] = [0, 1, 2, 3, 4, 5, 6]; 673 674 build() { 675 Column() { 676 // 可滚动的容器组件 677 Scroll(this.scroller) { 678 Column() { 679 Text(this.message1).fontSize(30) 680 Text(this.message2).fontSize(30) 681 Text(this.message3).fontSize(30) 682 683 // 重复设置组件，构造滚动内容 684 ForEach(this.arr, (item: number) => { 685 UIExtensionComponent({ 686 bundleName: "com.example.newdemo", 687 abilityName: "UIExtensionProvider", 688 parameters: { 689 "ability.want.params.uiExtensionType": "sys/commonUI" 690 } 691 }) 692 .width(this.wid) 693 .height(this.hei) 694 // 设置手势拦截，UEC外部组件不响应滚动 695 .gesture(PanGesture().onActionStart(() => { 696 console.info('UIExtensionComponent PanGesture onAction'); 697 })) 698 .border({ width: 5, color: Color.Blue }) 699 .onReceive((data) => { 700 console.info('Lee onReceive, for test'); 701 this.message3 = JSON.stringify(data['data']); 702 }) 703 .onTerminated((info) => { 704 console.info('onTerminated: code =' + info.code + ', want = ' + JSON.stringify(info.want)); 705 }) 706 .onRemoteReady((proxy) => { 707 console.info('onRemoteReady, for test'); 708 }) 709 }, (item: string) => item) 710 } 711 .width('100%') 712 } 713 .scrollable(ScrollDirection.Vertical) // 滚动方向纵向 714 .scrollBar(BarState.On) // 滚动条常驻显示 715 .scrollBarColor(Color.Gray) // 滚动条颜色 716 .scrollBarWidth(10) // 滚动条宽度 717 .friction(0.6) 718 .edgeEffect(EdgeEffect.None) 719 .onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => { 720 console.info(xOffset + ' ' + yOffset); 721 }) 722 .onScrollEdge((side: Edge) => { 723 console.info('To the edge'); 724 }) 725 .onScrollStop(() => { 726 console.info('Scroll Stop'); 727 }) 728 } 729 .height('100%') 730 } 731} 732``` 733 734- 提供方扩展Ability入口页面文件extension.ets 735```ts 736@Entry 737@Component 738struct Extension { 739 @StorageLink('message') storageLink: string = ''; 740 private scroller: Scroller = new Scroller(); 741 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8]; 742 743 build() { 744 Column() { 745 // 可滚动的容器组件 746 Scroll(this.scroller) { 747 Column() { 748 Text('Test demo') 749 .fontSize(20) 750 .fontWeight(FontWeight.Bold) 751 // 重复设置组件，构造滚动内容 752 ForEach(this.arr, (item: number) => { 753 Text(item.toString()) 754 .width('90%') 755 .height(150) 756 .backgroundColor(Color.Pink) 757 .borderRadius(15) 758 .fontSize(16) 759 .textAlign(TextAlign.Center) 760 .margin({ top: 10 }) 761 }, (item: string) => item) 762 } 763 } 764 765 } 766 .height('100%') 767 } 768} 769``` 770