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


Posted in Javascript onJune 29, 2020

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相互传值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 #Javascript
iview实现图片上传功能
Jun 29 #Javascript
vue+animation实现翻页动画
Jun 29 #Javascript
vue+element实现图片上传及裁剪功能
Jun 29 #Javascript
vue实现匀速轮播效果
Jun 29 #Javascript
vant实现购物车功能
Jun 29 #Javascript
js实现随机点名器精简版
Jun 29 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
我的论坛源代码(五)
2006/10/09 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
React组件refs的使用详解
2018/02/09 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
Python补齐字符串长度的实例
2018/11/15 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
读书笔记格式
2015/07/02 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python