codecamp

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

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
支付宝小程序API 更新管理
支付宝小程序API 跳转支付宝应用或页面
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }