#鸿蒙通关秘籍#如何开发 EmbeddedUIExtensionAbility 提供方模块？

要开发一个 EmbeddedUIExtensionAbility 提供方模块，按照以下步骤进行：

1. 在 DevEco Studio 工程中，手动创建一个 EmbeddedUIExtensionAbility：

   • 在工程模块 (ets 目录) 右键选择“New > Directory”，新建一个目录，并命名为 EmbeddedUIExtAbility。
   • 在 EmbeddedUIExtAbility 目录中，右键选择“New > File”，新建一个 .ts 文件，并命名为 EmbeddedUIExtAbility.ts。

2. 在 EmbeddedUIExtAbility.ts 文件中，导入 EmbeddedUIExtensionAbility 的依赖包，自定义类继承 EmbeddedUIExtensionAbility，并实现生命周期回调，如下：

   typescript import EmbeddedUIExtensionAbility from '@ohos.app.ability.EmbeddedUIExtensionAbility' import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSession' import Want from '@ohos.app.ability.Want';

   const TAG: string = '[ExampleEmbeddedAbility]' export default class ExampleEmbeddedAbility extends EmbeddedUIExtensionAbility { onCreate() { console.log(TAG, onCreate); }

   onForeground() { console.log(TAG, onForeground); }

   onBackground() { console.log(TAG, onBackground); }

   onDestroy() { console.log(TAG, onDestroy); }

   onSessionCreate(want: Want, session: UIExtensionContentSession) { console.log(TAG, onSessionCreate, want: ${JSON.stringify(want)}); let param: Record<string, UIExtensionContentSession> = { 'session': session }; let storage: LocalStorage = new LocalStorage(param); session.loadContent('pages/extension', storage); }

   onSessionDestroy(session: UIExtensionContentSession) { console.log(TAG, onSessionDestroy); } }

3. 在入口文件 pages/extension.ets 中，定义界面内容：

   typescript import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSession';

   let storage = LocalStorage.getShared()

   @Entry(storage) @Component struct Extension { @State message: string = 'EmbeddedUIExtensionAbility Index'; private session: UIExtensionContentSession | undefined = storage.get<UIExtensionContentSession>('session');

   build() { Column() { Text(this.message) .fontSize(20) .fontWeight(FontWeight.Bold) Button("terminateSelfWithResult").fontSize(20).onClick(() => { this.session?.terminateSelfWithResult({ resultCode: 1, want: { bundleName: "com.example.embeddeddemo", abilityName: "ExampleEmbeddedAbility", }}); }) }.width('100%').height('100%') } }

4. 在 module.json5 文件中，注册 EmbeddedUIExtensionAbility：

   { "module": { "extensionAbilities": [ { "name": "EmbeddedUIExtAbility", "icon": "$media:icon", "description": "EmbeddedUIExtAbility", "type": "embeddedUI", "srcEntry": "./ets/EmbeddedUIExtAbility/EmbeddedUIExtAbility.ts" } ] } }