开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
文档中心
凯发app官方网站的技术支持 & 案例 faq 
支付宝小程序
案例分析
sdk & demo下载
常见问题
常用工具
iot小程序
运维保障
小程序 > 支付宝小程序 > 案例分析 > 小程序与web-view内嵌h5相互通信
贡献者
收藏
我的文档
设置
通信说明
web-view 内嵌 h5 内通过 my.postmessage 向小程序 postmessage 消息,通过 my.onmessage 接收来自小程序的消息。
小程序通过 onmessage 属性注册函数接收 h5 发生过来的信息,在接收到信息后可通过 this.webviewcontext.postmessage 向 h5 发送 postmessage 消息。
支持 web-view 的 postmessage 传递多个参数。
注意:双向通信能力的流程是 h5 先发消息给小程序,小程序接收到消息后再发消息给 h5。
示例代码
web-view h5 页面代码:
html
复制代码
<html lang="en">

<head>
<meta charset="utf-8">
<title>webview与小程序通信title>
head>

<body>
<button onclick="send()">发送button>
<button onclick="isminiapp()">判断是否在小程序内button>
<button onclick="onmessage()">开始监听小程序发送的消息button>
<button onclick="getminiappid()">我要调用小程序获取appid的apibutton>
<script src="https://cdn.jsdelivr.net/npm/eruda">script>
<script>
eruda.init();
script>
<script>
if (navigator.useragent.indexof('alipayclient') > -1) {
document.writeln('
网站地图