小程序和h5页面之间的互相跳转
小程序跳转到 h5 页面 小程序代码：
wx.navigateTo({url: /pages/webview?url= + encodeURIComponent(h5页面的 url)});
1、webview.js
<web-view src="{
{url}}" bindmessage="handlePostMessage"></web-view>
Page({
data: {
url:
},
onLoad: function (options) {
this.setData({
url: decodeURIComponent(options.url),
});
},
// 接收 h5 页面传递过来的参数
handlePostMessage: function (e) {
const data = e.detail;
console.log(data);
}
})
2、h5 页面代码：
记得把 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 */
请注意，是wx.miniProgram，不是 window.wx.miniProgram
上一篇：
uniapp开发微信小程序-2.页面制作
下一篇：
创建微信公众号测试号