diff --git a/docs/tutorial/harmony/mp-sdk.md b/docs/tutorial/harmony/mp-sdk.md index 0ef075cc73abd6393ced8213b1dbeb09955e4ccf..20206e6d950fba42d85f73d0fe532d550a821c99 100644 --- a/docs/tutorial/harmony/mp-sdk.md +++ b/docs/tutorial/harmony/mp-sdk.md @@ -2,9 +2,7 @@ ## 已知问题 -1. 不支持x86的模拟器 -2. 只能使用 resource 资源中的小程序 -3. 支持在 DB1 版本上运行,不支持在 DB2 版本上运行 +1. 支持在 DB1 版本上运行,不支持在 DB2 版本上运行 ## 配置uni小程序SDK@mpsdk @@ -14,52 +12,59 @@ 2. 点击右上角 Sync Now,并等待 Sync 结束 -3. 打开鸿蒙项目文件 `entry/src/main/ets/entryability` 新增下图红框内的代码 +3. 打开鸿蒙项目文件 `entry/src/main/ets/entryability`,增加初始化uni小程序sdk的逻辑,初始化uni_module + +```ts +import { init } from '@dcloudio/uni-app-runtime' +import BuildProfile from 'BuildProfile' +import { UIAbility } from '@kit.AbilityKit'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { window } from '@kit.ArkUI'; + +export default class EntryAbility extends UIAbility { + onWindowStageCreate(windowStage: window.WindowStage): void { + init(this, windowStage, { // 初始化uni小程序sdk + debug: BuildProfile.DEBUG, // 传入参数控制webview及jsvm的调试开关 + }) + // Main window is created, set main page for this ability + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); + windowStage.loadContent('pages/Index', (err) => { + if (err.code) { + hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); + return; + } + hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); + }); + } +} +``` -![](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/dev/0a822b2b-147c-4aec-8f75-e68466be3911.png) +## 集成小程序到项目内 -4. 配置完成 +1. 将小程序打包出的资源(cli项目使用npm run build:app-harmony生成)拷贝到`entry/src/main/resources/resfile/apps/${小程序AppId}`目录。 -## 使用步骤 +![](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/dev/1725101625314.jpg) -1. 在鸿蒙ets页面引入uni小程序SDK +2. 在鸿蒙ets页面(例如: entry/src/main/ets/pages/Index.ets)引入uni小程序SDK,编写小程序代码 ```js +// entry/src/main/ets/pages/Index.ets import { openUniMP } from '@dcloudio/uni-app-runtime'; -interface UniMP { - on(name:string,callback:Function):void -} -``` - -2. 执行 `const mp = openUniMP('HBuilder') as UniMP` 打开小程序 - -完整ets页面代码如下 -```js -import { openUniMP } from '@dcloudio/uni-app-runtime'; -interface UniMP { - on(name:string,callback:Function):void -} @Entry @Component struct Index { - @State message: string = 'Hello World'; + @State message: string = 'Open UniMP'; build() { RelativeContainer() { - Text(this.message) - .id('HelloWorld') - .fontSize(50) - .fontWeight(FontWeight.Bold) + Button(this.message) .alignRules({ center: { anchor: '__container__', align: VerticalAlign.Center }, middle: { anchor: '__container__', align: HorizontalAlign.Center } }) - .onClick(()=>{ - const mp = openUniMP('HBuilder') as UniMP - mp.on('close',()=>{ - console.log('close') - }) + .onClick(async () => { + const mp = openUniMP(`${小程序AppId}`) // 替换成真实的appId,和上一步的目录对应 }) } .height('100%') @@ -68,9 +73,34 @@ struct Index { } ``` -## 手动更改uni-app打包后的项目的appid@updateappid +3. 运行此项目,点击按钮即可打开小程序 -按如下图所示修改 `目录名` 和 `entry\src\main\resources\rawfile\apps\HBuilder\www\manifest.json` 内的id属性 +## 小程序和宿主通讯 -![](https://web-ext-storage.dcloud.net.cn/uni-app/harmony/dev/2637224c-67c1-4470-91ab-5f62440b73ea.png) +```js +// 小程序监听宿主消息 +uni.onNativeEventReceive((event, data) => { + console.log(`小程序收到宿主消息,事件:${event},消息:${JSON.stringify(data)}`); +}) + +// 小程序向宿主发送消息 +uni.sendNativeEvent( + event, + data, + (...args) => { + console.log(`宿主处理完成并返回如下信息:${JSON.stringify(args)}`) + } +) +``` +```typescript +// const mp = openUniMP(...) +// 宿主监听小程序消息 +mp.on('uniMPEvent', (event, data, notify) => { + console.log(`宿主收到小程序消息,事件:${event},消息:${JSON.stringify(data)}`); + notify('宿主成功接收小程序消息') +}) + +// 宿主向小程序发送消息 +mp.sendUniMPEvent(event, data) +``` \ No newline at end of file