初始化uniMPSDK

打开鸿蒙项目文件 entry/src/main/ets/entryability，增加初始化uni小程序sdk的逻辑

共2行代码，如下图所示

import { init } from '@dcloudio/uni-app-runtime'

init(this, windowStage)

启动小程序

从宿主应用页面跳转到小程序应用

API 说明

// entry/src/main/ets/pages/Index.ets
import { openUniMP } from '@dcloudio/uni-app-runtime';

@Entry
@Component
struct Index {
  @State message: string = 'Open UniMP';

  build() {
    RelativeContainer() {
      Button(this.message)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(async () => {
          const uniMP = openUniMP(appid, uniMPOpenConfiguration)
        })
    }
    .height('100%')
    .width('100%')
  }
}

参数	类型	必填	说明
appid	String	是	小程序的 appid
uniMPOpenConfiguration	UniMPOpenConfiguration	否	小程序打开的参数集合类

返回值

类型	说明
uniMP	unimp小程序实例化接口对象

关闭小程序

宿主App中关闭方法

宿主可以直接调用 sdk 的方法，关闭当前运行的小程序

注：需要先获取uniMP接口对象！可通过openUniMP获取uniMP接口对象

关闭当前运行的小程序

uniMP.close()

监听小程序关闭触发事件

uniMP.on('close',()=>{
	console.log('UniMP-close')
})

宿主与小程序通讯

宿主 App 向小程序发送事件

宿主发送事件

API

uniMP.sendUniMPEvent(event, data)

参数说明

参数	类型	必填	说明
event	String	是	触发事件的event
data	String或JSON	是	事件的携带参数

返回值

类型	说明
boolean	true表示事件通知成功。false表示失败。可通过log查看。

示例

uniMP.sendUniMPEvent("unimp-event", {
	a: 1,
	b: "2"
});

小程序监听事件

监听宿主App发送事件

示例

uni.onNativeEventReceive((event, data) => {
  console.log(`小程序收到宿主消息，事件：${event}，消息：${JSON.stringify(data)}`);
})

参数说明

属性	类型	说明
event	String	事件名称
data	String或JsonObject	宿主传递的数据

小程序向宿主 App 发送事件

小程序发送事件

API

向宿主App发送事件

uni.sendNativeEvent(event, data, callback)

参数说明

属性	类型	说明
event	String	事件名称
data	String / JsonObject	事件携带参数
callback	Function	宿主App回调方法。参数可以是 String 或 JsonObject。取决于宿主的实现

示例

// 向宿主App发送事件
uni.sendNativeEvent('unimp-event', {
	msg: 'unimp message!!!'
}, ret => {
	this.nativeMsg = '宿主App回传的数据：' + ret;
})

宿主设置监听事件

API

uniMP.on('uniMPEvent', callback)

设置监听小程序发送给宿主的事件

参数说明

参数	类型	必填	说明
callBack	IOnUniMPEventCallBack	是	小程序触发event事件接口

返回值

无

示例

uniMP.on('uniMPEvent', (event, data, notify) => {
  console.log(`宿主收到小程序消息，事件：${event}，消息：${JSON.stringify(data)}`);
  notify('宿主成功接收小程序消息')
})

胶囊按钮

宿主中添加菜单按钮

openUniMP 可以设置相应arguments(启动参数)，如下所示，设置了右上角menuActionSheet

示例：

// entry/src/main/ets/pages/Index.ets
import { openUniMP } from '@dcloudio/uni-app-runtime';

@Entry
@Component
struct Index {
	@State message: string = 'Open UniMP';

	build() {
		RelativeContainer() {
			Button(this.message)
				.alignRules({
					center: { anchor: '__container__', align: VerticalAlign.Center },
					middle: { anchor: '__container__', align: HorizontalAlign.Center }
				})
				.onClick(async () => {
					// 替换成真实的appId，和上一步的目录对应
					const mp = openUniMP(`${小程序AppId}`, {
						capsuleMenuActionSheetItems: [
							{
								id: '1',
								title: 'title1'
							},
							{
								id: '2',
								title: 'title2'
							}
						]
					}) 
					
					mp.on('menuItemClick',(id: string)=>{
						console.log('UniMP-menuItemClick: ' + id)
					})
				})
		}
		.height('100%')
		.width('100%')
	}
}