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
<web-view>
加载的网页中支持调用部分 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.js
、uni.min.js
、uni.d.ts
三个文件
4. 将 uni.js
、uni.min.js
、uni.d.ts
放入egret项目 libs 目录下

5. 在 Egret 项目下 , 编辑 egretProperties.json 文件,引入 uni 模块

6. 重新对 Egret 项目进行清理、构建后,就可直接使用声明好的uni中对应的方法

7. 在uni中使用效果如下,在Egret页面中发送一次消息uni程序这边就会收到对应的消息

网友评论