小程序web-view不支持通过拦截url的功能等方式，来进行H5->小程序，小程序->H5的交互；这里提供“H5->小程序”的方案
小程序WXML
<web-view src="http://127.0.0.1:8848/hb/index.html" bindmessage="bindmessage"></web-view>
小程序JS
// pages/tabBar/order/order.js
Page({
/**
* 页面的初始数据
*/
data: {
url: 'http://127.0.0.1:8848/hb/index.html'
},
bindmessage:function(e){
let oid = e.detail.data[0].oid;
console.log('oid: ' + oid);
// 立即跳转想要去的页面
wx.navigateTo({
url: '/pages/book/bookDetail?oid=' + oid
})
}
})
前端页面
关键点就在于，H5页面触发了某个事件，小程序页面是无法立马响应的，它只有在退出页面才会调用小程序页面之前定义的bindmessage方法；所以这里可以利用取巧的方式，postmessage后立马pop当前页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<!-- 引入JSSDK 1.3.2-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<title></title>
<style type="text/css">
button {
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<button type="button" id="btn">傻屌</button>
</body>
</html>
<script type="text/javascript">
$("#btn").click(() => {
// 传递数据，必须有data这层
wx.miniProgram.postMessage({ data: {foo: 'barxx'} })
/**
* 由于小程序的postMessage并不会第一时间传递到小程序
* 只有页面销毁或者触发了转发才会真正的发出去
*
* 解决办法：取巧的方法就是postMessage后，立即返回上一页面
* 这样才能造成立即触发小程序bindmessage方法的样子
*/
wx.miniProgram.navigateBack({delta: 1})
});
</script>