uniapp与与webview之间的相互传值的实现之间的相互传值的实现
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接受方法
资源评论
weixin_445209122021-12-24别下载,是pdf
weixin_38502915
- 粉丝: 5
- 资源: 914
最新资源
- 3.5Ni钢焊接接头经不同加热冷却后组织和性能的变化.pdf
- 3R60UG尿素级不锈钢的焊接工艺评定 - .pdf
- 3轴联动数控焊接机设计研究.pdf
- 04SG309 钢筋焊接网混凝土楼板与剪力墙构造详图.pdf
- 脑肿瘤医学影像数据集，脑部肿瘤图像数据集，脑部癌症图像数据集
- 基于java+springboot+mysql+微信小程序的小微金融企业系统 源码+数据库+论文(高分毕业设计).zip
- 基于java+springboot+mysql+微信小程序的小区服务管理系统 源码+数据库+论文(高分毕业设计).zip
- 基于java+springboot+mysql+微信小程序的小区物业新冠疫情物资管理平台 源码+数据库+论文(高分毕业设计).zip
- 基于java+springboot+mysql+微信小程序的小演员招募小程序 源码+数据库+论文(高分毕业设计).zip
- 基于java+springboot+mysql+微信小程序的校园心声墙小程序 源码+数据库+论文(高分毕业设计).zip
- 飞轮储能充放电控制simulink仿真模型，采用永磁同步电机 充电过程外环控制转速，内环控制dq轴电流； 放电过程外环控制直流母线电压，内环控制dq轴电流 整体都采用矢量控制、dq轴解耦控制，跟随
- 基于java+springboot+mysql+微信小程序的校园生活服务系统 源码+数据库+论文(高分毕业设计).zip
- 基于Python的简易天气预报系统开发项目
- Masked LM 完整使用介绍及代码解释
- 基于java+springboot+mysql+微信小程序的校园选课小程序 源码+数据库+论文(高分毕业设计).zip
- 基于java+springboot+mysql+微信小程序的中医知源小程序 源码+数据库+论文(高分毕业设计).zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
