需求
- 在小程序中打开一个H5页，完成一系列的操作（图片合成）；
- 小程序要能传参给H5；
- H5能获取小程序的传参；
- H5中操作完成后，返回小程序指定页面；
- H5返回小程序时，能传递参数给小程序；
- 小程序能获取H5的传参；
配置
- 小程序管理后台新增业务域名：
https://miniapp-test.xxx.com - 下载校验文件，并放在业务域名的根目录下；
注意事项
- 实际开发中，参数需要使用base64编码，因为参数中会带有中文、符号等；
- 使用encodeURI，encodeURLComment，escape等编码，web-view可能会白屏；
小程序跳转页-用于打开H5页面
<!--h5.wxml-->
<view class="container">
<block>
<text>小程序H5交互-跳转</text>
</block>
<block>
<web-view src="https://miniapp-test.wemeshops.com/miniapp-jump.html?p="></web-view>
</block>
</view>
// h5.js
const app = getApp()
Page({
data: {
p:"abc",
},
})
小程序落地页-用于从H5调回小程序后接收落地参数
<!--ret.wxml-->
<view class="container">
<block>
<text>小程序H5交互-返回</text>
</block>
<block>
<text></text>
</block>
</view>
// ret.js
const app = getApp()
Page({
data: {
ret:"empty"
},
onLoad: function (e) {
console.log(e)
this.setData({
ret: "来自H5的参数："+e.ret
})
},
})
H5页面
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
</head>
<body>
<h1>H5网页</h1>
<input type="button" name="button" style="width:100%;" value="返回并传值" onclick="javascript:butOnclick();"/>
<label id="p"></label>
<script>
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
var p = getQueryString("p");
// https://miniapp-test.wemeshops.com/miniapp-jump.html?p=123
document.getElementById("p").innerText = "来自小程序的参数："+p;
function butOnclick() {
wx.miniProgram.navigateTo({url: '/pages/h5/ret?ret=123'});
// wx.miniProgram.getEnv(function (res) {
// console.log(res.miniprogram) // true })
// });
}
</script>
</body>
</html>