求助大神,uni-app用web-view链接的用uni-app写的h5页面,怎么实现通信(有偿提问)
- 发布:2019-07-31 16:58
- 更新:2019-12-10 10:54
- 阅读:5986
使用h5原生的,这种方法只在h5端有效,注意加上条件编译
//子页面(webview里的页面)向父级页面传递信息
window.parent.postMessage({
key1:"key1的内容"
}, '*');
//父级页面接收信息
window.addEventListener('message', function(e) {
console.log(data.key1)
},false)
我写了一个web-view文件选择(非视频/图片),想把文件静态路径传回vue文件上传服务器,用官方的postMessage怎么都实现不了。
后来干脆将uni.getStorageSync保存的用户Id传给html文件,在html文件做上传。
部分代码:
.vue文件
<template>
<view>
<web-view :src="url" style="width: 100%;"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: '/hybrid/html/local.html?data=' + uni.getStorageSync("Id")
}
}
}
</script>
local.html文件
document.addEventListener('UniAppJSBridgeReady', function() {
uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
uni.postMessage({
data: {
action: getReg('data')
}
})
})
function getReg(data) {
let dataReg = new RegExp("(^|&)" + data + "=([^&]*)(&|$)");
let regValue = window.location.search.substr(1).match(dataReg)
if (regValue != null) {
return unescape(regValue[2]);
}
return null;
}
console.log(getReg('data')) // uni.getStorageSync("Id")的值
对你有帮助就行,有好的方法希望能分享给我,web-view通信真的搞得好烦
SimpleJalon - 个人承接PHP、uniapp项目,有案例,联系QQ 615773740,不接受外地工作,可付费提供技术支持。添加QQ时务必备注来意以及添加渠道,渠道可以写:`uniapp`
没法实时通讯 我也研究了好久了。
有一种注入webview的js 绕过 社区好像有人发了,但是不优雅 也不咋好用,,
蹦豆儿
可以在微信公众号端实现吗?
2020-06-17 16:47