web view内嵌的h5页面与小程序直接相互跳转的实现
在小程序中使用web-view组件嵌套的H5页面，如何实现和小程序页面之间的相互跳转呢？下面就简单介绍下如何实现的，希望能帮助到您
小程序跳转到 h5 页面
小程序代码：
wx.navigateTo({url: '/pages/webview?url=' + encodeURIComponent('h5页面的 url')});webview.js
<web-view src="{{url}}" bindmessage="handlePostMessage"></web-view>
onLoad: function (options) {
this.setData({
url: decodeURIComponent(options.url),
});
},
// 接收 h5 页面传递过来的参数
handlePostMessage: function (e) {
const data = e.detail;
console.log(data);
}h5 页面代码：
<head>
···
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>记得把 url 的 host 添加到后台的合法域名中。
h5 页面跳回小程序
在 h5 页面的任何点击事件中：
/* eslint-disable */
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
wx.miniProgram.switchTab({url: '/pages/home/home'});
wx.miniProgram.postMessage({data: {id: '1234'}}); // 传的参数
}
});
/* eslint-enable */如果是外部h5的网页是不可以直接跳转到小程序，但可以设置图片二维码进行间接跳转。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
