网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/7 浏览:3 次 )

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

<template>
  <view class="advertisement" style="width: 100%;">
    <web-view :src="/UploadFiles/2021-04-02/url">

那么在 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="/UploadFiles/2021-04-02/url">
上一篇:Vue实现可移动水平时间轴
下一篇:基于Element封装一个表格组件tableList的使用方法
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。