支付宝小程序API web-view组件控制

2020-09-16 15:49 更新

my.createWebViewContext

版本要求:基础库 1.8.0 或更高版本;若支付宝客户端版本较低,建议做 兼容处理

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

示例代码

<!-- .axml -->
<view>
  <web-view id="web-view-1" src="..." onMessage="onMessage"></web-view>
</view>
// .js
Page({
  onLoad() {
    this.webViewContext = my.createWebViewContext('web-view-1');
  },
  // 接收来自H5的消息
  onMessage(e) {
    console.log(e); //{'sendToMiniProgram': '0'}
    // 向H5发送消息
  this.webViewContext.postMessage({'sendToWebView': '1'});
  }
})
// .js
// H5的js代码中需要先定义my.onMessage 用于接收来自小程序的消息。
my.onMessage = function(e) {
  console.log(e); //{'sendToWebView': '1'}
}
// H5向小程序发送消息
my.postMessage({'sendToMiniProgram': '0'});

说明:以上的双向通信能力的流程是 H5 先发消息给小程序,小程序接收到消息后再发消息给 H5。

入参

Object 类型,属性如下:

属性 类型 必填 说明
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
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号