Mikel
来源： uniapp与webview之间的相互传值 – 奔跑吧前端（李钊） – 博客园
1.uni-app 如何发送数据到 H5？ 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view> </view></template><script>export default { data() { return { url:'/hybrid/html/local.html?data=' }; }, onLoad(data) {<br> //这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码 this.url+=encodeURIComponent(data.data) }, mounted() {}, methods: { message(event){ console.log(event.detail.data); } }};</script><style scoped="scoped" lang="scss">@import './advertisement.scss';</style> |
那么在 H5 中是如何接收值得呢？
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);
console.log(r);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
2.webview向uniapp传值
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
//向uniapp传值
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
});
</script>
uniapp接受
//message接受方法 <template>
<view class="advertisement" style="width: 100%;">
<web-view :src="url" @message="message"></web-view>
</view>
</template>
如果你遇到h5传值给app，无法接收到消息，请转移到我的另一篇博客，看看是否是这个问题https://www.cnblogs.com/lizhao123/p/16170173.html
