闲聊：
小颖公司最近在做小程序，里面有个需求需要在小程序中嵌入第三方人脸的HTML5页面，然后从中拿到某个参数再传递到小程序中，拿到参数后调用接口查询人脸识别结果。功能做完后，小颖想着发个笔记，不然后期又忘记啦，所以就有了这篇文章·················
前期准备：
如果想要在微信小程序中使用web-view加载HTML5，需要先在 微信公众平台 中配置域名，步骤如下：
1.登录 微信公众平台，然后点击左侧导航：开发管理
2.下拉至：业务域名
按需配置后，就可以在小程序中使用web-view加载HTML5啦
HTML5向小程序传参
1.通过bindload 方法传参
如果HTML5地址栏有参数，并且不想触发任何事件就要在小程序中获取到HTML5的地址栏中的参数则可以使用web-view 中的：bindload 方法
具体代码如下：
小程序代码：
<template>
<web-view src="https://xx/index.html?uuid=123&name='张三'" @load="loadFun"></web-view>
</template>
<script>
export default {
methods: {
loadFun(e) {
const {
src
} = e.detail;
if(src){
const query = this.parseUrl(src);
console.log(query);
this.getMSG(query.uuid)
}
},
parseUrl(url) {
return url
.split('?')[1]
.split('&')
.reduce((acc, cur) => {
const [key, value] = cur.split('=');
acc[key] = decodeURIComponent(value);
return acc;
}, {});
},
async getMSG(uuid) {
const params = {
url: '/rest/public/cfvr?uuid=' + uuid,
method: 'GET',
};
const result = await this.serverApi.request(params);
const [success, data] = result;
if (success && data.Passed == true) {
uni.navigateTo({
url: '/pages/index/product/successfulCertification'
});
} else {
uni.navigateTo({
url: '/pages/index/product/faceRecognition'
});
}
},
}
}
</script>
打印结果：
2.通过：bindmessage方法传参
注意：网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。
具体代码如下：
HTML代码：
<body>
<h1>我已修改2</h1>
<button onclick="ceshiFun()">ceshi </button>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
function ceshiFun() {
wx.miniProgram.postMessage({
data: {
uuid: 'ceshi'
}
});
wx.miniProgram.navigateBack();
}
</script>
</body>
小程序代码：
<template>
<web-view src="https://xx/index.html" @message="getMSG"></web-view>
</template>
<script>
export default {
methods: {
getMSG({detail }){
console.log(detail)
}
},
}
</script>
<style scoped></style>
打印结果：
3.通过：wx.miniProgram.navigateTo 方法传参
但该方法有个弊端就是会引起页面切换，如果本身就要在A页面中引入HTML5，然后在HTML5中跳转到B页面，在B页面接收参数的话其实还好，如果本身就在A页面引入HTML5，并且从HTML5中又跳转到A页面用户体验就不是很好。
具体代码如下：
调用该方法的话则需要在HTML5中引入：
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
HTML代码：
<body>
<h1>我已修改2</h1>
<button onclick="ceshiFun()">ceshi </button>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
function ceshiFun() {
wx.miniProgram.navigateTo({
url: '/pages/index/product/successfulCertification?uid=12345'
});
}
</script>
</body>
小程序代码：
<template>
<web-view src="https://xxx/index.html"></web-view>
</template>
<script>
export default {
onLoad(Option){
console.log(Option)
}
}
</script>
<style scoped></style>
