在UniApp中使用WebView，实现双向通信

为什么用WebView？

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

一、在[vue]文件中创建webview

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

官方文档

ini 复制代码

<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>
AI写代码html

二、[双向通信]：

2.1、uniapp→webview

vue中发送数据到html文件

javascript 复制代码

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

html中接收来自 uniapp 的消息

javascript 复制代码

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

2.2、webview→uniapp

html向uniapp 发送消息

php 复制代码

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

uniapp接收html消息

typescript 复制代码

  <web-view
   、、、、
    @message="handleMessage"
    />    
 
    // 接收来自 webview 的消息
    handleMessage(event) {
      console.log('收到来自 webview 的消息：', event.detail)
    },
AI写代码html

三、完整代码

3.1UniApp:

xml 复制代码

<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>
AI写代码html

3.2WebView的html：

xml 复制代码

<!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>
AI写代码html