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 相关文章推荐
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
React和Vue中监听变量变化的方法
Nov 14 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
基于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
实现“上一页”和“下一页按钮
2006/10/09 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
一些主流JS框架中DOMReady事件的实现小结
2011/02/12 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
Vue-cli3多页面配置详解
2020/03/22 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
视觉直观感受若干常用排序算法
2017/04/13 Python
Python探索之pLSA实现代码
2017/10/25 Python
通过cmd进入python的实例操作
2019/06/26 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
挂职思想汇报
2013/12/31 职场文书
户外活动策划方案
2014/03/12 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python