uniapp与webview直接进行传值的代码示例

 更新时间:2024年09月29日 10:15:12   作者:骨子里的偏爱  
在使用UniApp开发应用时,经常需要实现WebView与UniApp之间的数据交互,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下

uniapp与webview直接进行传值

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

webview向uniapp传值:

<script>
  document.addEventListener('UniAppJSBridgeReady', function() {
    //向uniapp传值
    uni.postMessage({
      data: {
        action: 'message'
      }
    });
    uni.getEnv(function(res) {
      console.log('当前环境:' + JSON.stringify(res));
    });
  });
</script>  

uniapp:

<template>
  <view class="advertisement" style="width: 100%;">
    <web-view :src="url" @message="message"></web-view>
  </view>
</template>

总结 

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

相关文章

  • 提升JS编程效率的19个实用技巧分享

    提升JS编程效率的19个实用技巧分享

    在实际工作中,开发者常面临一些需巧妙编程解决的挑战,有时几行代码就能迎刃而解,本文整理了一系列实用代码片段,助您轻松处理URL、DOM操作、事件处理等常见问题,希望对大家有所帮助
    2023-11-11
  • 移动Web中图片自适应的两种JavaScript解决方法

    移动Web中图片自适应的两种JavaScript解决方法

    这篇文章主要介绍了移动Web中图片自适应的两种JavaScript解决方法,本文针对手机站点中的图片自适应问题,给出了图集解决方法和单篇文章的解决方法,需要的朋友可以参考下
    2015-06-06
  • 原生JS实现拖拽效果

    原生JS实现拖拽效果

    这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • webpack自动打包和热更新的实现方法

    webpack自动打包和热更新的实现方法

    这篇文章主要介绍了webpack自动打包和热更新的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • BootStrap CSS全局样式和表格样式源码解析

    BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 全面兼容的javascript时间格式化函数(比较实用)

    全面兼容的javascript时间格式化函数(比较实用)

    这篇文章主要介绍了全面兼容比较实用的javascript时间格式化函数,需要的朋友可以参考下
    2014-05-05
  • 纯js实现隔行变色效果

    纯js实现隔行变色效果

    这篇文章主要为大家详细介绍了纯js实现隔行变色效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 全面解析Bootstrap表单使用方法(表单按钮)

    全面解析Bootstrap表单使用方法(表单按钮)

    这篇文章全面解析了Bootstrap表单的使用方法,本文重点介绍Bootstrap表单按钮,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 一文教你实现JavaScript防抖优化代码

    一文教你实现JavaScript防抖优化代码

    在我们前端编程中,假如我们要给后端发送请求,万一手抖多点了几次,多发送了几遍怎么办,那就得用防抖处理,下面小编就来教大家如何实现防抖吧
    2023-11-11
  • uniapp分包(小程序分包)处理图文详解

    uniapp分包(小程序分包)处理图文详解

    小程序上传的时候,主包不能超过2M,如果超出,则会上传失败,这时候就需要把界面进行分包,下面这篇文章主要给大家介绍了关于uniapp分包(小程序分包)处理的相关资料,需要的朋友可以参考下
    2023-01-01

最新评论