• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# UIServiceExtension（仅对系统应用开放）
2
3## 概述
4
5[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)是UIService类型的[ExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-extensionAbility.md)浮窗类组件，提供UI界面（例如预览界面）和后台服务能力。组件内部持有了一个[UIServiceExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiserviceExtensionContext-sys.md)，通过[UIServiceExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiserviceExtensionContext-sys.md)提供了丰富的接口供外部使用。
6
7本文描述中称被启动的[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)为服务端，称启动[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)的组件为客户端。
8
9应用可以通过启动和连接两种形式使用[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)。
10- 通过[UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md)、[UIExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md)、[ServiceExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-serviceExtensionContext-sys.md)调用[startUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startuiserviceextensionability14)方法启动[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)。
11- 通过[UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md)、[UIExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md)调用[connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#connectuiserviceextensionability14)方法连接[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)。
12
13此处有如下细节需要注意：
14
15- [UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)可以通过[startUIServiceExtensionAbility](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startuiserviceextensionability14)方式拉起或者可以通过[connectUIServiceExtensionAbility](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#connectuiserviceextensionability14)拉起，窗口只会创建一次。
16- [UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)窗口创建失败或销毁时，[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)会自动销毁。
17- 只能在主线程线程中执行start/connect/disconnect操作，不要在Worker、TaskPool等子线程中执行start/connect/disconnect操作。
18- 应用需要在前台获焦的情况下才能启动、连接系统提供的[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)。
19
20## 生命周期
21
22[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)提供了[onCreate()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#oncreate)、[onWindowWillCreate()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#onwindowwillcreate)、[onWindowDidCreate()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#onwindowdidcreate)、[onRequest()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#onrequest)、[onConnect()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#onconnect)、[onDisconnect()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#ondisconnect)、[onData()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#ondata)和[onDestroy()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#ondestroy)生命周期接口函数，根据需要重写对应的回调方法。下图展示了[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)的生命周期。
23
24**图1** [UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)生命周期
25
26![UIServiceExtensionAbility-lifecycle](figures/UIServiceExtension-lifecycle.png)
27
28
29
30- **onCreate**
31
32  [UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)被首次创建时触发该回调，开发者可以在此进行一些初始化的操作，例如注册公共事件监听等。
33
34  > **说明：**
35  > 如果[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)已创建，再次启动该[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)不会触发onCreate()回调。
36
37- **onRequest**
38
39  当另一个组件调用[startUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startuiserviceextensionability14)方法启动该[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)时，触发该回调。执行此方法后，[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)会启动并前端运行。每调用一次[startUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startuiserviceextensionability14)方法均会触发该回调。
40
41- **onWindowWillCreate**
42
43  创建窗口之前回调，开发者传递窗口参数给系统。设置config.windowAttribute属性值为window.ExtensionWindowAttribute.SUB_WINDOW，此时创建的是子窗; 设置config.windowAttribute属性值为window.ExtensionWindowAttribute.SYSTEM_WINDOW，此时创建的是系统窗;
44  目前[UIAbilityContext](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md)和[UIExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md)拉起[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)创建的窗口支持子窗和系统窗，其他context（[ServiceExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-serviceExtensionContext-sys.md)）拉起[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)创建的窗口只支持系统窗。一个UIServiceExtension只能创建一个窗口。
45
46- **onWindowDidCreate**
47
48  创建窗口回调接口，开发者通过[Window](../reference/apis-arkui/arkts-apis-window-Window.md)对象操作窗口。通过[window.on('windowVisibilityChange')](../reference/apis-arkui/arkts-apis-window-Window.md#onwindowvisibilitychange11)方法绑定窗口事件，处理各种窗口事件，如窗口显示、窗口隐藏、窗口销毁等。
49
50- **onConnect**
51
52  当另一个组件调用[connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#connectuiserviceextensionability14)方法与该服务连接时，触发该回调。此方法中，接收一个调用方远端代理对象（[UIServiceHostProxy](../reference/apis-ability-kit/js-apis-inner-application-uiservicehostproxy-sys.md)），服务端拿到这个对象后可以通过这个对象与客户端进行通信。同一个客户端，want里面的(DeviceId, BundleName,ModuleName,AbilityName)以及callback对象相同情况下去连接，只会在第一次收到[onConnect()](../reference/apis-ability-kit/js-apis-app-ability-serviceExtensionAbility-sys.md#onconnect)，其他情况每次连接都会收到[onConnect()](../reference/apis-ability-kit/js-apis-app-ability-serviceExtensionAbility-sys.md#onconnect)。
53
54- **onData**
55
56  数据接收回调。接收调用方通过[UIServiceProxy](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md)发送的数据。
57
58- **onDisconnect**
59
60  当连接断开时，将触发该回调。客户端死亡或者调用[disconnectServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#disconnectuiserviceextensionability14)方法可以使连接断开。
61
62- **onDestroy**
63
64  当不再使用服务且准备将其销毁该实例时，触发该回调。开发者可以在该回调中清理资源，如注销监听等。
65
66## 实现一种UIService类型Extension基类
67
68### 开发准备
69
70只有系统应用才允许实现[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)，因此开发者在开发之前需做如下准备：
71
72- **替换Full SDK**：[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)相关接口都被标记为System-API，默认对开发者隐藏，因此需要手动从镜像站点获取Full SDK，并在DevEco Studio中替换，具体操作可参考[替换指南](../faqs/full-sdk-switch-guide.md)。
73
74- **申请AllowAppUsePrivilegeExtension特权**：只有具有AllowAppUsePrivilegeExtension特权的应用才允许开发[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)，具体申请方式可参考[应用特权配置指南](../../device-dev/subsystems/subsys-app-privilege-config-guide.md)。
75
76
77
78### 创建UIServiceExtension
79
80在DevEco Studio工程中手动新建一个[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)，具体步骤如下：
81
821. 在工程Module对应的ets目录下，右键选择“New > Directory”，新建一个目录并命名为[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)。
83
842. 在UIServiceExt目录，右键选择“New > ArkTS File”，新建一个文件并命名为UIServiceExt.ets。
85
86    ```
87    ├── ets
88    │ ├── UIServiceExt
89    │ │   ├── UIServiceExt.ets
90    ```
91
923. UIServiceExt.ets文件中，增加导入[UIServiceExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)的依赖包，自定义类继承[UIServiceExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)并实现生命周期回调。
93
94    ```ts
95    import { common, UIServiceExtensionAbility, Want } from '@kit.AbilityKit';
96    import { hilog } from '@kit.PerformanceAnalysisKit';
97    import { window } from '@kit.ArkUI';
98
99    export default class UIServiceExtAbility extends UIServiceExtensionAbility {
100      // 创建UIServiceExtensionAbility
101      onCreate(want: Want) {
102        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
103      }
104
105      // 请求处理
106      onRequest(want: Want, startId: number) {
107        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onRequest');
108      }
109
110      // 连接
111      onConnect(want: Want, proxy: common.UIServiceHostProxy) {
112        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onConnect');
113      }
114
115      // 断开连接
116      onDisconnect(want: Want, proxy: common.UIServiceHostProxy) {
117        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDisconnect');
118      }
119
120      // 窗口即将创建
121      onWindowWillCreate(config: window.ExtensionWindowConfig): void {
122        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowWillCreate');
123        let rect: window.Rect = {
124          left: 100,
125          top: 100,
126          width: 500,
127          height: 500
128        };
129        // 创建子窗
130        config.windowName = 'sub_window'
131        config.windowAttribute = window.ExtensionWindowAttribute.SUB_WINDOW;
132        config.windowRect = rect;
133        config.subWindowOptions = {
134          title: 'sub_window_title',
135          decorEnabled: true,
136          // 是否模态窗口
137          isModal: false
138        };
139        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowWillCreate end');
140      }
141
142      // 窗口创建完成
143      onWindowDidCreate(window: window.Window) {
144        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowDidCreate');
145        window.setUIContent('uiservice/page/WindowPage');
146        window.showWindow();
147      }
148
149      // 接收数据
150      onData(proxy: common.UIServiceHostProxy, data: Record<string, Object>) {
151        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onData');
152      }
153
154      // 销毁
155      onDestroy() {
156        hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
157      }
158    }
159    ```
160
1614. 在工程Module对应的[module.json5配置文件](../quick-start/module-configuration-file.md)中注册UIServiceExtensionAbility，type标签需要设置为“uiService”，srcEntry标签表示当前ExtensionAbility组件所对应的代码路径。
162
163    ```json
164    {
165      "module": {
166        // ...
167        "extensionAbilities": [
168          {
169            "name": "UIServiceExtAbility",
170            "icon": "$media:icon",
171            "description": "uiService",
172            "type": "uiService",
173            "exported": true,
174            "srcEntry": "./ets/UIServiceExtAbility/UIServiceExtAbility.ets"
175          }
176        ]
177      }
178    }
179    ```
180
181### 启动UIServiceExtension
182
183应用通过[startUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#startuiserviceextensionability14)方法启动一个[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)，组件的[onRequest()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#onrequest)回调就会被调用，并在该回调方法中接收到调用者传递过来的want对象。[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)启动后，其生命周期独立于客户端，即使客户端已经销毁，该后台服务仍可继续运行，窗口创建失败或销毁后该服务会被销毁。因此，后台服务需要在其工作完成时通过调用[UIServiceExtensionContext](../reference/apis-ability-kit/js-apis-inner-application-uiserviceExtensionContext-sys.md)的[terminateSelf()](../reference/apis-ability-kit/js-apis-inner-application-uiserviceExtensionContext-sys.md#uiserviceextensioncontextterminateself)来自行停止。
184
185  在应用中启动一个新的[UIServiceExtensionAbility](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)。示例中的context的获取方式请参见[获取UIAbility的上下文信息](uiability-usage.md#获取uiability的上下文信息)。
186
187
188```ts
189import { common, Want } from '@kit.AbilityKit';
190import { BusinessError } from '@kit.BasicServicesKit';
191
192@Entry
193@Component
194struct Index {
195  build() {
196    Column() {
197      Row() {
198        // 创建启动按钮
199        Button('start ability')
200          .enabled(true)
201          .onClick(() => {
202            let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
203            let startWant: Want = {
204              bundleName: 'com.acts.uiserviceextensionability',
205              abilityName: 'UiServiceExtAbility',
206            };
207            try {
208              // 启动UIServiceExtensionAbility
209              context.startUIServiceExtensionAbility(startWant).then(() => {
210                console.info(`startUIServiceExtensionAbility success.`);
211              }).catch((error: BusinessError) => {
212                console.error(`startUIServiceExtensionAbility failed, err code: ${error.code}, err msg: ${error.message}.`);
213              })
214            } catch (err) {
215              let code = (err as BusinessError).code;
216              let msg = (err as BusinessError).message;
217              console.error(`startUIServiceExtensionAbility failed, err code: ${code}, err msg: ${msg}.`);
218            }
219          })
220      }
221    }
222  }
223}
224```
225
226### 连接UIServiceExtension
227
228应用可以通过[connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#connectuiserviceextensionability14)连接一个服务（在[Want](../reference/apis-ability-kit/js-apis-app-ability-want.md)对象中指定启动的目标服务），服务的[onConnect()](../reference/apis-ability-kit/js-apis-app-ability-serviceExtensionAbility-sys.md#onconnect)就会被调用，并在该回调方法中接收到调用者传递过来的[Want](../reference/apis-ability-kit/js-apis-app-ability-want.md)对象，从而建立连接。
229
230客户端调用[connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#connectuiserviceextensionability14)连接服务端时，会接收并保存服务端返回的[UIServiceProxy](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md)对象，该proxy对象可以用于向服务端发送数据。客户端需要通过保存的[UIServiceProxy](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md)对象来调用[disconnectServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#disconnectuiserviceextensionability14)断开与服务端的连接。
231
232- 使用[connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#connectuiserviceextensionability14)建立与[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)的连接。示例中的context的获取方式请参见[获取UIAbility的上下文信息](uiability-usage.md#获取uiability的上下文信息)。
233    ```ts
234    import { common, Want } from '@kit.AbilityKit';
235    import { BusinessError } from '@kit.BasicServicesKit';
236
237    @Entry
238    @Component
239    struct Page_UIServiceExtensionAbility {
240      @State uiServiceProxy: common.UIServiceProxy | null = null;
241
242      build() {
243        Column() {
244          //...
245          Row() {
246            //...
247          }.onClick(() => {
248            const context = this.getUIContext().getHostContext() as common.UIAbilityContext;
249            const want: Want = {
250              deviceId: '',
251              bundleName: 'com.example.myapplication',
252              abilityName: ''
253            };
254            // 定义回调
255            const callback: common.UIServiceExtensionConnectCallback = {
256              onData: (data: Record<string, Object>): void => {
257                console.info(`onData, data: ${JSON.stringify(data)}.`);
258              },
259              onDisconnect: (): void => {
260                console.info(`onDisconnect.`);
261              }
262            };
263            // 连接UIServiceExtensionAbility
264            context.connectUIServiceExtensionAbility(want, callback).then((uiServiceProxy: common.UIServiceProxy) => {
265              this.uiServiceProxy = uiServiceProxy;
266              console.info(`connectUIServiceExtensionAbility success.`);
267            }).catch((error: BusinessError) => {
268              console.error(`connectUIServiceExtensionAbility failed, err code:${error.code}, err msg: ${error.message}.`);
269            });
270          })
271        }
272      }
273    }
274    ```
275
276- 使用[disconnectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#disconnectuiserviceextensionability14)断开与[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)的连接。
277    ```ts
278    import { common } from '@kit.AbilityKit';
279    import { BusinessError } from '@kit.BasicServicesKit';
280
281    @Entry
282    @Component
283    struct Page_UIServiceExtensionAbility {
284      @State uiServiceProxy: common.UIServiceProxy | null = null;
285
286      build() {
287        Column() {
288          //...
289          Row() {
290            //...
291          }.onClick(() => {
292            const context = this.getUIContext().getHostContext() as common.UIAbilityContext;
293            // this.uiServiceProxy是连接时保存的proxy对象
294            context.disconnectUIServiceExtensionAbility(this.uiServiceProxy).then(() => {
295              console.info(`disconnectUIServiceExtensionAbility success.`);
296            }).catch((error: BusinessError) => {
297              console.error(`disconnectUIServiceExtensionAbility failed, err code: ${error.code}, err msg: ${error.message}.`);
298            });
299          })
300        }
301      }
302    }
303    ```
304
305
306
307## 客户端与服务端双向通信
308
309[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)启动时，有如下操作：
310
3111. 客户端通过调用[connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md#connectuiserviceextensionability14), 返回[UIServiceProxy](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md)对象。使用该proxy对象往[UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)服务端发送数据。
3122. [UIServiceExtension](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md)通过[onConnect()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#onconnect)回调，获得[UIServiceHostProxy](../reference/apis-ability-kit/js-apis-inner-application-uiservicehostproxy-sys.md)对象。通过这个proxy往客户端发送数据。
313
314![UIServiceExtensionAbility-bidirectionalcommunication](figures/UIServiceExtension-bidirectionalcommunication.png)
315
316
317### 客户端与服务端通信
318- 客户端收发数据
319
320  客户端通过[connectUIServiceExtensionAbility()](../reference/apis-ability-kit/js-apis-inner-application-uiExtensionContext.md#connectuiserviceextensionability14)连接服务端，获得[UIServiceProxy](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md)对象。通过它的[sendData()](../reference/apis-ability-kit/js-apis-inner-application-uiserviceproxy.md#uiserviceproxysenddata)方法发送数据给服务端。服务端通过[onData()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#ondata)回调接收数据。
321    ```ts
322    import { common, Want } from '@kit.AbilityKit';
323    import { BusinessError } from '@kit.BasicServicesKit';
324
325    @Entry
326    @Component
327    struct Index {
328      comProxy: common.UIServiceProxy | null = null;
329      connectCallback: common.UIServiceExtensionConnectCallback = {
330        onData: (data: Record<string, Object>) => {
331          console.info(`onData, data: ${JSON.stringify(data)}.`);
332        },
333        onDisconnect: () => {
334          console.info(`onDisconnect.`);
335        }
336      }
337
338      build() {
339        Column() {
340          Row() {
341            // 创建连接按钮
342            Button('connect ability')
343              .enabled(true)
344              .onClick(() => {
345                let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
346                let startWant: Want = {
347                  bundleName: 'com.acts.uiserviceextensionability',
348                  abilityName: 'UiServiceExtAbility',
349                };
350                try {
351                  // 连接UIServiceExtensionAbility
352                  context.connectUIServiceExtensionAbility(startWant, this.connectCallback)
353                    .then((proxy: common.UIServiceProxy) => {
354                      this.comProxy = proxy;
355                      let formData: Record<string, string> = {
356                        'test': 'test'
357                      };
358                      try {
359                        this.comProxy.sendData(formData);
360                      } catch (err) {
361                        let code = (err as BusinessError).code;
362                        let msg = (err as BusinessError).message;
363                        console.error(`sendData failed, err code: ${code}, err msg: ${msg}.`);
364                      }
365                    })
366                    .catch((err: BusinessError) => {
367                      console.error(`connectUIServiceExtensionAbility failed, err code: ${err.code}, err msg: ${err.message}.`);
368                    });
369                } catch (err) {
370                  let code = (err as BusinessError).code;
371                  let msg = (err as BusinessError).message;
372                  console.error(`connectUIServiceExtensionAbility failed, err code: ${code}, err msg: ${msg}.`);
373                }
374              })
375          }
376        }
377      }
378    }
379    ```
380
381- 服务端收发数据
382
383  服务端通过[onData()](../reference/apis-ability-kit/js-apis-app-ability-uiServiceExtensionAbility-sys.md#ondata)接收客户端传递的数据，使用保存的客户端连接服务端时传递过来的[UIServiceHostProxy](../reference/apis-ability-kit/js-apis-inner-application-uiservicehostproxy-sys.md)对象，调用[sendData()](../reference/apis-ability-kit/js-apis-inner-application-uiservicehostproxy-sys.md#senddata)将服务端数据发送给客户端。
384    ```ts
385    import { common, Want, UIServiceExtensionAbility } from '@kit.AbilityKit';
386    import { window } from '@kit.ArkUI';
387    import { BusinessError } from '@kit.BasicServicesKit';
388
389    export default class MyServiceExtAbility extends UIServiceExtensionAbility {
390      comProxy: common.UIServiceHostProxy | null = null;
391
392      // 创建
393      onCreate(want: Want) {
394        console.info('UIServiceExtensionAbility onCreate');
395      }
396
397      // 请求处理
398      onRequest(want: Want, startId: number) {
399        console.info('UIServiceExtensionAbility onRequest');
400      }
401
402      // 连接
403      onConnect(want: Want, proxy: common.UIServiceHostProxy) {
404        console.info('UIServiceExtensionAbility onConnect');
405        this.comProxy = proxy;
406      }
407
408      // 断开连接
409      onDisconnect(want: Want, proxy: common.UIServiceHostProxy) {
410        console.info('UIServiceExtensionAbility onDisconnect');
411        this.comProxy = null;
412      }
413
414      // 接收数据
415      onData(proxy: common.UIServiceHostProxy, data: Record<string, Object>) {
416        console.info('UIServiceExtensionAbility onData');
417        try {
418          let formData: Record<string, string> = {
419            'Data': 'reply message'
420          };
421          proxy.sendData(formData);
422        } catch (err) {
423          let code = (err as BusinessError).code;
424          let msg = (err as BusinessError).message;
425          console.error(`sendData failed, err code: ${code}, err msg: ${msg}.`);
426        }
427      }
428
429      onWindowWillCreate(extensionWindowConfig: window.ExtensionWindowConfig) {
430        console.info('UIServiceExtensionAbility onWindowWillCreate');
431      }
432
433      onWindowDidCreate(window: window.Window) {
434        console.info('UIServiceExtensionAbility onWindowDidCreate');
435      }
436
437      onDestroy() {
438        console.info('UIServiceExtensionAbility onDestroy');
439      }
440    }
441    ```