uniapp中webview和H5网页之间互相传参
1. uni-app 如何发送数据到 H5?
1.在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中:
<template>
<div>
<web-view :src="webViewUrl" @message="getMessage"></web-view>
</div>
</template>
<script>
export default {
data() {
return {
url: '',
}
},
created() {
this.webViewUrl =
`http://30.30.127.22:5500/pdf.html?url=${encodeURIComponent(this.url)}` //pdf地址添加参数
},
methods: {
getMessage(e) {
console.log(e.detail.data)
},
},
}
</script>
2.那么在 H5 中是接收url参数
console.log(getQuery('data')); //获取 uni-app 传来的值//取url中的参数值
function getQuery(name) {
// 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
2. webview向uniapp传值
1.通过触发UniAppJSBridgeReady监听,使用uni.postMessage传值
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
//向uniapp传值
uni.postMessage({
data: {
action: 'h5传递的参数'
}
});
uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
</script>
2.uniapp接收参数
//message接受方法
<template>
<view>
<web-view :src="url" @message="getMessage"></web-view>
</view>
</template>
<script>
export default {
methods: {
getMessage(e) {
//微信小程序
// #ifdef MP-WEIXIN
console.log(e.target.data) //多次postMessage的参数数组
// #endif
// #ifndef MP-WEIXIN
console.log(e.detail.data)
// #endif
},
},
}
</script>
*网页向小程序 postMessage 时,不是实时发送的,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组
微信小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html