uniapp与webview直接进行传值
骨子里的偏爱 2024-10-23 15:33:02 阅读 57
uniapp与webview直接进行传值
<code><template>
<view class="advertisement" style="width: 100%;">code>
<web-view :src="url" @message="message"></web-view>code>
</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';code>
</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;
}
webview向uniapp传值:
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
//向uniapp传值
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
</script>
uniapp:
<template>
<view class="advertisement" style="width: 100%;">code>
<web-view :src="url" @message="message"></web-view>code>
</view>
</template>
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。