小程序跳轉到 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 頁面?zhèn)鬟f過來的參數
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重归，配置上已發(fā)布正式的小程序頁面，進行實踐操作即可跳轉到你想要跳轉到的小程序頁面中厦凤。
跳轉傳遞參數并接收鼻吮，無論是小程序跳轉H5頁面還是跳轉回來都是可以傳遞參數的，當然傳遞參數也很簡單泳唠，就直接拼接在跳轉鏈接的后面即可狈网。比如現在我們要從H5頁面調到小程序頁面，那么從上面的代碼圖大家也看見了笨腥，參數直接拼接在后面拓哺，跳轉到小程序頁面在目標頁面的onload的options中獲取傳遞過來的參數即可。
