首页 > 网络编程 > JavaScript > javascript类库 > vue.js > UniApp WebView双向通信

在UniApp中使用WebView实现双向通信完整代码

2025-06-24 08:29:00 作者：陶之妖妖

这篇文章主要介绍了在UniApp中使用WebView实现双向通信的相关资料,适用于需调用不支持的API（如文件上传）的场景,包含Vue与HTML间的数据交互及调试技巧,文中通过代码介绍的非常详细,需要的朋友可以参考下

为什么用WebView？

WebView是UniApp中用于嵌入网页内容的组件，允许在应用中加载和显示网页。它适用于需要在应用中集成外部网页或HTML内容的场景，如展示帮助文档、加载第三方服务等。简单来说就是：我需要在app环境做一些uniapp的api不支持的功能，如：文件上传、音源转码等；

一、在vue文件中创建webview

插入的时候注意下，如果小伙伴用了自己src的地址发现页面出不来，可以也换成百度的试一下，如果百度的出的来，那就是你地址有问题；

官方文档

<template>
  <web-view
    ref="webview"
    id="myWebview"
    src="http://baidu.com"
    :fullscreen="false"
    @message="handleMessage"
    :webview-styles="{
      process: false,
    }" />
  <up-button @click="myClickFn">点击</up-button>
</template>

二、双向通信：

2.1、uniapp→webview

vue中发送数据到html文件

    // vue中发送数据到html文件，getMsgFromApp名字自定义
    myClickFn() {
      //  #ifdef APP-PLUS
      //选择到自己的webview-------h5不支持
      var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
      currentWebview.evalJS(`getMsgFromApp(${你的数据})`) 
      // #Endif
    },

html中接收来自 uniapp 的消息

    // html中接收来自 uniapp 的消息
    window.getMsgFromApp = function (arg) {
      console.log('接收来自 uniapp 的消息，arg',arg)
    }

2.2、webview→uniapp

html向uniapp 发送消息

    // 向 uniapp 发送消息
    function sendMessageToUniapp() {
      window.uni.postMessage({
        data: {
          type: 'fromWebview',
          message: '这是来自 webview 的消息',
        },
      })
    }

uniapp接收html消息

  <web-view
   、、、、
    @message="handleMessage"
    />    

    // 接收来自 webview 的消息
    handleMessage(event) {
      console.log('收到来自 webview 的消息：', event.detail)
    },

三、完整代码

3.1UniApp:

<template>
  <web-view
    ref="webview"
    id="myWebview"
    src="http://baidu.com"
    :fullscreen="false"
    @message="handleMessage"
    :webview-styles="{
      process: false,
    }" />
  <up-button @click="myClickFn">点击</up-button>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    // 接收来自 webview 的消息
    handleMessage(event) {
      console.log('收到来自 webview 的消息：', event.detail)
    },
    // 发送数据到html文件
    myClickFn() {
      //  #ifdef APP-PLUS
      //选择到自己的webview-------h5不支持
      var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
      currentWebview.evalJS(`getMsgFromApp(${你的数据})`) // #Endif
    },
  },
}
</script>

3.2WebView的html：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>我的webview</title>
</head>

<body>
  <script src="xxxxxxxxxx" charset="UTF-8"></script> //引入的js文件
  <script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
  <div id="content" class="content">
    内容！！！！！！
  </div>

  <script type="text/javascript">
    // 接收来自 uniapp 的消息
    window.getMsgFromApp = function (arg) {
      console.log('接收来自 uniapp 的消息')
    }

    // 向 uniapp 发送消息
    function sendMessageToUniapp() {
      window.uni.postMessage({
        data: {
          type: 'fromWebview',
          message: '这是来自 webview 的消息',
        },
      })
    }

    window.onload = function () {
      // 页面创建时执行
      console.log('页面创建了')
    }

    window.addEventListener('pagehide', function (event) {
      if (event.persisted) {
        // 页面被浏览器缓存（如iOS Safari的后台标签）
        console.log('页面被缓存');
      } else {
        // 页面正在被销毁
        console.log('页面被销毁')
      }
    });
  </script>

</body>
<style>

</style>

</html>

总结

到此这篇关于在UniApp中使用WebView实现双向通信的文章就介绍到这了,更多相关UniApp WebView双向通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！