小程序和h5页面之间的互相跳转
2019-05-22 本文已影响0人
侯工
小程序跳转到 H5 页面
wxml1：
<view>
<navigator url="/pages/wxml2?url="+ encodeURIComponent('h5页面的 url')>
点击跳转到H5页面
</navigator>
</view>
wxml2：
<view>
<view>
<web-view src="{{url}}" bindmessage="handlePostMessage"></web-view>
</view>
</view>
onLoad: function (options) {
this.setData({
url: decodeURIComponent(options.url),
});
},
// 接收 h5 页面传递过来的参数
handlePostMessage: function (e) {
const data = e.detail;
console.log(data);
}
注：微信小程序web-view组件嵌入h5页面内的请求必须是https。
H5 页面跳回小程序
<head>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
在 h5 页面的任何点击事件中：
<script>
/* eslint-disable */
$('p').on("click", function(){
wx.miniProgram.getEnv(function (res) {
if (res.miniprogram) {
wx.miniProgram.switchTab({url: '/pages/home/home'});
wx.miniProgram.postMessage({data: {id: '1234'}}); // 传的参数
}
});
}
/* eslint-enable */
</script>
注：是wx.miniProgram，不是 window.wx.miniProgram
在H5页面引入 https://res.wx.qq.com/open/js/jweixin-1.3.2.js 文件，然后根据自己的需要选择下方适当的跳转方式api，配置上已发布正式的小程序页面，进行实践操作即可跳转到你想要跳转到的小程序页面中。
跳转传递参数并接收，无论是小程序跳转H5页面还是跳转回来都是可以传递参数的，当然传递参数也很简单，就直接拼接在跳转链接的后面即可。比如现在我们要从H5页面调到小程序页面，那么从上面的代码图大家也看见了，参数直接拼接在后面，跳转到小程序页面在目标页面的onload的options中获取传递过来的参数即可。
