通过创建 webviewContext
,提供从小程序向 web-view
发送消息的能力。
说明
基础库 1.8.0 及以上版本支持本功能,低版本需做兼容处理,操作参见 小程序基础库说明。
mPaaS 10.1.32 及以上版本支持本功能。
my.createWebViewContext(webviewId)
该接口用于通过创建 webviewContext
提供从小程序向 web-view
发送消息的能力。创建并返回 web-view
上下文 webViewContext
对象。
入参
参数 | 类型 | 必填 | 说明 |
webviewId | String | 是 | 要创建的 |
返回值
为一个 webViewContext 对象。
webViewContext
通过 webviewId
跟一个 web-view
组件绑定,通过它可以实现一些功能。
webViewContext
对象的方法如下:
方法 | 参数 | 描述 | 兼容性 |
postMessage | Object | 小程序向 |
代码示例
<view>
<web-view id="web-view-1" src="..." onMessage="onMessage"></web-view>
</view>
Page({
onLoad() {
this.webViewContext = my.createWebViewContext('web-view-1');
},
// 接收来自H5的消息
onMessage(e) {
console.log(e); //{'sendToMiniProgram': '0'}
// 向H5发送消息
this.webViewContext.postMessage({'sendToWebView': '1'});
}
})
// H5的js代码中需要先定义my.onMessage 用于接收来自小程序的消息。
my.onMessage = function(e) {
console.log(e); //{'sendToWebView': '1'}
}
// H5向小程序发送消息
my.postMessage({'sendToMiniProgram': '0'});
说明
以上的双向通信能力的流程是 H5 先发消息给小程序,小程序接收到消息后再发消息给 H5。
文档内容是否对您有帮助?