[移动开发]webviewH5与小程序之间相互通信

?桥接文件 JSSDK
<script type="text/javascript" src="https://public-1251849568.cos.ap-guangzhou.myqcloud.com/jssdk/finclip-jssdk-1.4.2.js"></script>

1. H5 页面发送事件给小程序 webviewH5 to miniProgram

window.ft.miniProgram.sendWebviewEvent({
    url: window.location.href
});

小程序接收信息

视图层
<web-view src='{{h5Url}}' bindevent="onEvent"></web-view>

逻辑层
// 获取应用实例
const app = getApp()
Page({
  data: {
    url: '',
    h5Url: 'xxxxxxxxxxxxx',
  },
  onEvent(e) {
    console.log(e.detail.data.url);    
  },  
})

2. 小程序发送事件给 H5 页面?miniProgram to?webviewH5

方案一：

• webview组件存在一个src属性, 用于展示指定的h5页面,
• webview组件上的src属性如果只是改变了hash值, 当前组件上的页面是不会刷新的. 所以我们可以利用这个特性在miniProgram页面把想要传递给webviewH5的信息带到当前webview组件的src上. 当然, 是操作当前src的hash值

方案二：

H5页面

function onEvent(e) {
  console.log(e.test); // 123
}
// 注册监听
window.ft.miniProgram.onWebviewEvent(onEvent);

// 移除监听
// window.ft.miniProgram.offWebviewEvent(onEvent);

小程序

ft.sendWebviewEvent({ test: 123 });