uniapp与webview之间的相互传值的实现

时间:2021-05-26

1.uni-app 如何发送数据到 H5? 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中:

<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>

到此这篇关于uniapp与webview之间的相互传值的实现的文章就介绍到这了,更多相关uniapp与webview相互传值内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章