1# 实现一个划词应用（仅对系统应用开放） 2 3## 接口说明 4 5请参考[selectionInput.SelectionManager](../../reference/apis-basic-services-kit/js-apis-selectionInput-selectionManager-sys.md)文档获取接口详情。 6 7| 名称 | 描述 | 8| ---- | ---- | 9| on(type: 'selectionCompleted', callback: Callback\<SelectionInfo\>): void | 订阅划词完成事件，使用`callback`回调函数。 | 10| createPanel(ctx: Context, info: PanelInfo): Promise\<Panel\> | 创建划词面板。 | 11| show(): Promise\<void\> | 显示面板。 | 12 13## 开发步骤 14 151. 创建划词应用工程。 16 17 1. 在DevEco Studio工程Module对应的ets目录下，右键选择“New > Directory”，新建一个目录，并命名为ServiceExtAbility。 18 19 2. 在目录pages下，从菜单栏创建两个page文件MainPanel.ets和MenuPanel.ets。在ServiceExtAbility目录下，右键选择“New > File”，新建SelectionExtensionAbility.ts。目录如下： 20 21 ``` 22 /src/main/ 23 ├── ets/ 24 │ ├── pages 25 │ | ├── MainPanel.ets # 主面板 26 │ | └── MenuPanel.ets # 菜单面板 27 | └── ServiceExtAbility 28 │ └── SelectionExtensionAbility.ts # 划词扩展类 29 ├── resources/base/profile/main_pages.json 30 ├── module.json5 # 配置文件 31 ``` 32 33  34 352. 继承[SelectionExtensionAbility](../../reference/apis-basic-services-kit/js-apis-selectionInput-selectionExtensionAbility-sys.md)，实现扩展生命周期函数。 36 ```ts 37 import { selectionManager, PanelInfo, PanelType, SelectionExtensionAbility, BusinessError } from '@kit.BasicServicesKit'; 38 import { Want } from '@kit.AbilityKit'; 39 import { rpc } from '@kit.IPCKit'; 40 41 class SelectionAbilityStub extends rpc.RemoteObject { 42 constructor(des) { 43 if (typeof des === 'string') { 44 super(des); 45 } else { 46 return null; 47 } 48 } 49 50 onRemoteMessageRequest( 51 code: number, 52 data: rpc.MessageSequence, 53 reply: rpc.MessageSequence, 54 options: rpc.MessageOption 55 ): boolean | Promise<boolean> { 56 return true; 57 } 58 } 59 60 class ServiceExtAbility extends SelectionExtensionAbility { 61 panel_: selectionManager.Panel = undefined; 62 63 onConnect(want: Want): rpc.RemoteObject { 64 // 当SelectionExtensionAbility实例完成创建时，系统会触发该回调。开发者可在该回调中执行初始化逻辑（如定义变量、加载资源、监听划词事件等）。 65 return new SelectionAbilityStub('remote'); 66 } 67 68 onDisconnect(): void { 69 // 当SelectionExtensionAbility实例被销毁（例如用户关闭划词开关或切换划词应用）时，系统触发该回调。开发者可以在该生命周期中执行资源清理、数据保存等相关操作。 70 } 71 } 72 ``` 73 上述代码中，划词扩展被拉起时会触发[onConnect](../../reference/apis-basic-services-kit/js-apis-selectionInput-selectionExtensionAbility-sys.md#onconnect)回调，可以在该回调中监听划词事件，完成划词窗口的创建、窗口内容设定、窗口的移动、窗口的显示和隐藏等操作；当划词扩展退出时会触发[onDisconnect](../../reference/apis-basic-services-kit/js-apis-selectionInput-selectionExtensionAbility-sys.md#ondisconnect)回调，可以在该回调中完成窗口销毁的操作。部分操作可参见下面3、4、5步。 74 753. 在划词扩展被拉起时，使用划词Ability接口监听划词事件。 76 ```ts 77 selectionManager.on('selectionCompleted', (info: selectionManager.SelectionInfo) => { 78 }); 79 ``` 80 814. 在划词扩展被拉起时，使用划词Ability接口创建划词窗口。 82 ```ts 83 let panelInfo: PanelInfo = { 84 panelType: PanelType.MENU_PANEL, 85 x: 0, 86 y: 0, 87 width: 500, 88 height: 200 89 } 90 selectionManager.createPanel(this.context, panelInfo) 91 .then(async (panel: selectionManager.Panel) => { 92 panel.setUiContent('pages/MenuPanel') 93 .then(()=>{ 94 }) 95 .catch((error: BusinessError) => { 96 }); 97 this.panel_ = panel; 98 }) 99 .catch((error: BusinessError) => { 100 }); 101 ``` 1025. 在划词任务结束时，使用划词Ability接口销毁划词窗口。 103 ```ts 104 selectionManager.destroyPanel(this.panel_); 105 ``` 106 1076. 配置`module.json5`文件。 108 109 在`extensionAbilities`字段中配置划词扩展类文件路径。 110 111 ```json 112 { 113 "module": { 114 // ... 115 "extensionAbilities": [ 116 { 117 "name": "SelectionExtensionAbility", 118 "srcEntry": "./ets/ServiceExtAbility/SelectionExtensionAbility.ts", 119 "type": "selection", 120 "exported": false, 121 } 122 ] 123 } 124 } 125 ``` 126 127## 调测验证 128 1291. 设置系统参数以配置划词。 130 131 1. 打开划词开关。 132 2. 选择当前应用为划词应用。 133 3. 设置划词触发方式。 134 1352. 通过日志观察划词服务拉起SelectionExtensionAbility过程。 136 137 使用DevEco Studio的Hilog窗口查看日志。 138 1393. 使用鼠标左键单击选中文本，观察应用界面弹出划词窗口。 140
