全部产品
云市场
云游戏

webview 组件控制

更新时间:2020-07-07 19:42:03

通过创建 webviewContext,提供从小程序向 web-view 发送消息的能力。

说明
  • 基础库 1.8.0 及以上版本支持本功能,低版本需做兼容处理,操作参见 小程序基础库说明
  • mPaaS 10.1.32 及以上版本支持本功能。

my.createWebViewContext(webviewId)

该接口用于通过创建 webviewContext 提供从小程序向 web-view 发送消息的能力。创建并返回 web-view 上下文 webViewContext 对象。

入参

参数 类型 必填 说明
webviewId String 要创建的 web-view 所对应的 ID 属性。

返回值

为一个 webViewContext 对象。

webViewContext 通过 webviewId 跟一个 web-view 组件绑定,通过它可以实现一些功能。

webViewContext 对象的方法如下:

方法 参数 描述 兼容性
postMessage Object 小程序向 web-view 组件发送消息,配合 web-view.js 中提供的 my.postMessage 可以实现小程序和 web-view 网页的双向通信。 1.8.0

代码示例

  1. <view>
  2. <web-view id="web-view-1" src="..." onMessage="onMessage"></web-view>
  3. </view>
  1. Page({
  2. onLoad() {
  3. this.webViewContext = my.createWebViewContext('web-view-1');
  4. },
  5. // 接收来自H5的消息
  6. onMessage(e) {
  7. console.log(e); //{'sendToMiniProgram': '0'}
  8. // 向H5发送消息
  9. this.webViewContext.postMessage({'sendToWebView': '1'});
  10. }
  11. })
  1. // H5的js代码中需要先定义my.onMessage 用于接收来自小程序的消息。
  2. my.onMessage = function(e) {
  3. console.log(e); //{'sendToWebView': '1'}
  4. }
  5. // H5向小程序发送消息
  6. my.postMessage({'sendToMiniProgram': '0'});
说明:以上的双向通信能力的流程是 H5 先发消息给小程序,小程序接收到消息后再发消息给 H5。