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