在UniApp中使用WebView實現(xiàn)雙向通信完整代碼

更新時間：2025年06月24日 08:30:19 作者：陶之妖妖

這篇文章主要介紹了在UniApp中使用WebView實現(xiàn)雙向通信的相關資料,適用于需調用不支持的API（如文件上傳）的場景,包含Vue與HTML間的數(shù)據(jù)交互及調試技巧,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

為什么用WebView？

WebView是UniApp中用于嵌入網(wǎng)頁內容的組件，允許在應用中加載和顯示網(wǎng)頁。它適用于需要在應用中集成外部網(wǎng)頁或HTML內容的場景，如展示幫助文檔、加載第三方服務等。簡單來說就是：我需要在app環(huán)境做一些uniapp的api不支持的功能，如：文件上傳、音源轉碼等；

一、在vue文件中創(chuàng)建webview

插入的時候注意下，如果小伙伴用了自己src的地址發(fā)現(xiàn)頁面出不來，可以也換成百度的試一下，如果百度的出的來，那就是你地址有問題；

官方文檔

<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中發(fā)送數(shù)據(jù)到html文件

    // vue中發(fā)送數(shù)據(jù)到html文件，getMsgFromApp名字自定義
    myClickFn() {
      //  #ifdef APP-PLUS
      //選擇到自己的webview-------h5不支持
      var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
      currentWebview.evalJS(`getMsgFromApp(${你的數(shù)據(jù)})`) 
      // #Endif
    },

html中接收來自 uniapp 的消息

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

2.2、webview→uniapp

html向uniapp 發(fā)送消息

    // 向 uniapp 發(fā)送消息
    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)
    },
    // 發(fā)送數(shù)據(jù)到html文件
    myClickFn() {
      //  #ifdef APP-PLUS
      //選擇到自己的webview-------h5不支持
      var currentWebview = this.$parent.$scope.$getAppWebview().children()[0]
      currentWebview.evalJS(`getMsgFromApp(${你的數(shù)據(jù)})`) // #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 發(fā)送消息
    function sendMessageToUniapp() {
      window.uni.postMessage({
        data: {
          type: 'fromWebview',
          message: '這是來自 webview 的消息',
        },
      })
    }

    window.onload = function () {
      // 頁面創(chuàng)建時執(zhí)行
      console.log('頁面創(chuàng)建了')
    }

    window.addEventListener('pagehide', function (event) {
      if (event.persisted) {
        // 頁面被瀏覽器緩存（如iOS Safari的后臺標簽）
        console.log('頁面被緩存');
      } else {
        // 頁面正在被銷毀
        console.log('頁面被銷毀')
      }
    });
  </script>

</body>
<style>

</style>

</html>