脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → web-view实现app应用与网页的数据交互

web-view实现app应用与网页的数据交互方式

 更新时间：2025年05月15日 10:18:14   作者：爱编程的小学究  
这篇文章主要介绍了web-view实现app应用与网页的数据交互方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、网页向app传递数据

1、在网页项目的index.html页面引入uniapp的js文件，引入成功之后就可以在事件里面使用uni.postMessage（网页项目是用vue框架写的）

<!-- uniapp 通信必须有的 -->
  <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.2/index.js"></script>
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
  <script>
     document.addEventListener('UniAppJSBridgeReady', function() {  
      uni.getEnv(function(res) {  
          console.log('当前环境：' + JSON.stringify(res));  
      });  
    });
</script>

2、向app传递数据，可以直接写在点击事件里面

uni.postMessage({
   data: {
       action: 'scanCode'
   }
})

二、app处理接收的数据并向网页传递数据

1、app项目中引入网页

<web-view @message="handleMessage" ref="webview" :src="url"></web-view>

2、handleMessage接收网页传过来的数据

 handleMessage(event) {
     console.log("webView传递过来的消息：" + JSON.stringify(evt.detail.data))
     // #ifdef APP-PLUS
     const currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
     let data = event.detail.data.length>0?event.detail.data[0]:''
     if (data&&data.action == "scanCode") {
          console.log('数据接收成功')
          // 进行处理
     }
     // #endif
 }

3、向网页中传递数据

开发的时候使用this.$scope一直Cannot read property ‘$getAppWebview‘ of undefined，后来查找了很多才找到，组件内要用this.$parent.$scope

如果web-view是放在组件里面的用下面的方法去获取web-view窗口

//如果web-view就在当前页面里面，可以把$parent去掉
const currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
currentWebview.evalJS(`scanCode(${JSON.stringify(_data)})`);

注意：如果页面没有初始化完成，可以加个定时等初始化完成在调用

var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
setTimeout(function() {
   wv = currentWebview.children()[0]
}, 1000);

三、快速起服务测试

如果你想快速上手的话，可以直接建一个html页面起本地服务

  • 1、把index.html放到文件夹下
  • 2、打开文件夹 shift+鼠标右键，打开命令行
  • 3、下载http-server： npm install http-server -g
  • 4、开启本地服务器，输入 http-server 就可以了
  • 5、关闭本地服务器，按快捷键 CTRL-C，当显示 ^Chttp-server stopped 的时候，就是关闭成功了

用http://192.168.0.8:8080 作为url引入到web-view里面

<web-view @message="handleMessage" ref="webview" src="http://192.168.0.8:8080 "></web-view>
  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网络网页</title>
    <style type="text/css">
      .btn {
        display: block;
        margin: 20px auto;
        padding: 5px;
        background-color: #007aff;
        border: 0;
        color: #ffffff;
        height: 40px;
        width: 200px;
      }
      .btn-red {
        background-color: #dd524d;
      }
      .post-message-section {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <div class="post-message-section">
      <div class="btn-list">
        <button class="btn btn-red" type="button" id="postMessage">postMessage</button>
      </div>
    </div>
    <!-- uni 的 SDK -->
    <!-- uni.webview.1.5.4.js-->
    <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
    <script type="text/javascript">
      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
        document.getElementById('postMessage').addEventListener('click', function() {
          uni.postMessage({
            data: {
              action: 'message'
            }
          });
        });
      });
    </script>
  </body>
</html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • es6函数之尾调用优化实例分析

    es6函数之尾调用优化实例分析

    这篇文章主要介绍了es6函数之尾调用优化,结合实例形式分析了es6函数尾调用优化相关功能、原理、实现方法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • Bootstrap的Refresh Icon也spin起来

    Bootstrap的Refresh Icon也spin起来

    本文通过实例给大家介绍Bootstrap的Refresh Icon相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-07-07
  • JavaScript生成随机数的各种方法大全

    JavaScript生成随机数的各种方法大全

    JavaScript 是一门强大的编程语言,在前端和后端开发中广泛使用,生成随机数是 JavaScript 开发中的常见需求,应用场景包括游戏开发、验证码生成、数据模拟等,本文将详细介绍 JavaScript 中生成随机数的各种方法,并分析其适用场景和优缺点,需要的朋友可以参考下
    2025-03-03
  • 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

    下面小编就为大家带来一篇关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Ajv format校验使用示例分析

    Ajv format校验使用示例分析

    这篇文章主要为大家介绍了Ajv format校验使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 微信小程序比较两个数大小的实现方法

    微信小程序比较两个数大小的实现方法

    最近在工作中遇到一个需求,可以自动对比两个数的大小,下面这篇文章主要给大家介绍了关于微信小程序比较两个数大小的实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 微信小程序购物车、父子组件传值及calc的注意事项总结

    微信小程序购物车、父子组件传值及calc的注意事项总结

    这篇文章主要给大家介绍了关于微信小程序购物车、父子组件传值及calc的注意事项的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • javascript在线编码查询工具

    javascript在线编码查询工具

    在线编码查询工具,编码查询,HTML编码
    2010-10-10
  • TypeError: Cannot set properties of undefined (setting ‘xx‘)的问题及解决方法

    TypeError: Cannot set properties of 

    这篇文章主要介绍了TypeError: Cannot set properties of undefined (setting ‘xx‘)的问题,本文给大家分享完美解决方案,需要的朋友可以参考下
    2023-09-09
  • JavaScript设置获取和设置属性的方法

    JavaScript设置获取和设置属性的方法

    这篇文章主要介绍了JavaScript设置获取和设置属性的方法，学会使用getAttribute、setAttribute的用法,需要的朋友可以参考下
    2015-03-03

最新评论