[Uni] Uni-App 嵌入 Egret 实现通信对接

Uni 使用 web-view 组件显示外部页面,如果需要进行通讯操作,例如web-view里面展示的页面,需要通过 'postMessage' 通知uni程序,那么外部的H5页面就需要引入uni提供的 uni.webview.1.5.2.js
  • 参考Uni web-view 组件文档 https://uniapp.dcloud.io/component/web-view
正常H5页面都可直接引入使用就行,但在Egret中需要声明d.ts 文件后引入模块才能使用
1. 将 uni.webview.1.5.2.js 下载,改名为 uni.js
uni.webview.1.5.2.js使用uni进行调用方法,所以将js名称和d.ts名称都为uni

加载的网页中支持调用部分 uni 接口:

方法名 说明 平台差异说明
uni.navigateTo navigateTo
uni.redirectTo redirectTo
uni.reLaunch reLaunch
uni.switchTab switchTab
uni.navigateBack navigateBack
uni.postMessage 向应用发送消息 字节跳动小程序不支持
uni.getEnv 获取当前环境 字节跳动小程序不支持
2. 将 uni.js 封装声明为 uni.d.ts
具体可参照文档 《如何生成 .d.ts》
目前我这里只用到了 postMessage ,例子如下:
declare var uni : {
    // 这里声明uni对于的方法名称
    postMessage(object);
}
3. 编译成 Egret 所需模块结构
具体可参照文档《第三方库得使用方法》

编译成功后将得到 uni.jsuni.min.jsuni.d.ts 三个文件

4. 将 uni.jsuni.min.jsuni.d.ts 放入egret项目 libs 目录下
5. 在 Egret 项目下 , 编辑 egretProperties.json 文件,引入 uni 模块
6. 重新对 Egret 项目进行清理、构建后,就可直接使用声明好的uni中对应的方法
7. 在uni中使用效果如下,在Egret页面中发送一次消息uni程序这边就会收到对应的消息

你可能感兴趣的:([Uni] Uni-App 嵌入 Egret 实现通信对接)