uniapp和webview之間的通信舉例詳解

更新時間：2025年06月11日 08:55:03 作者：DT——

在uniapp中與webview的通信是一個常見且重要的功能,這篇文章主要介紹了uniapp和webview之間通信的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1.背景

應(yīng)用使用了uniapp開發(fā)跨端應(yīng)用，在uniapp中內(nèi)嵌webview頁面實現(xiàn)頁面熱更新效果，不需要用戶單獨重新安裝軟件即可實現(xiàn)頁面的版本更新。

2.webview通知uniapp

在開發(fā)過程中我們難會遇到需要uniapp和webview來實現(xiàn)數(shù)據(jù)通信的場景，接下來介紹一種可行的uniapp和webview的數(shù)據(jù)通信方案。

在webview中我們可以使用當(dāng)前webview實例的postMessage方法來觸發(fā)webview組建的onPostMessage方法來傳遞數(shù)據(jù)，重點就需要放在了如何將uniapp的webview實例來加入到webview的h5項目當(dāng)中。

uniapp官方文檔中指出可以使用uni.webview.js 這個js SDK 來將當(dāng)前的uni對象注入到webview所加載的H5項目當(dāng)中。

最新版地址：https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js；

1.UniAppJSBridgeReady :

這個是在引入webview的SDK之后，當(dāng)webview頁面被加載完成之后會觸發(fā)，該事件觸發(fā)表示著uniapp和webview之間的橋成功搭建，uni對象被成功的注入到當(dāng)前H5的上下文中。

我們在index.html文件中將SDK引入，這里的SDK引入必須放在body標(biāo)簽下面。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    ...
  </head>
  <body>
    <noscript>
      <strong>Please enable JavaScript to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <!-- uni 的 SDK -->
  <!-- 需要把 uni.webview.1.5.6.js 下載到自己的服務(wù)器 -->
  <script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
  <script>
    document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {
        console.log('當(dāng)前環(huán)境：' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
  </script>
</html>

2.webview中可用的uni API

方法名	說明	平臺差異說明
uni.navigateTo	navigateTo
uni.redirectTo	redirectTo
uni.reLaunch	reLaunch
uni.switchTab	switchTab
uni.navigateBack	navigateBack
uni.postMessage	向應(yīng)用發(fā)送消息	抖音小程序不支持、H5 暫不支持（可以直接使用 window.postMessage
uni.getEnv	獲取當(dāng)前環(huán)境	抖音小程序與飛書小程序不支持

3.發(fā)送消息

我們在H5中可以使用uni.postMessage方法來向應(yīng)用發(fā)送消息，應(yīng)用中的webview的onPostMessage方法會被觸發(fā)，從而通過參數(shù)就可以拿到需要傳遞的數(shù)據(jù)。
或者因為可以使用uni.webView獲取到當(dāng)前webview實例，調(diào)用實例postMessage方法也可以傳遞數(shù)據(jù)。
注意：這種做法在H5端是不支持的，后續(xù)會介紹H5端的處理方式。

3.uniapp 通知webview

uniapp通知webview頁面，官方提供了一種巧妙地方式。在H5項目中全局暴露一個用于接收數(shù)據(jù)的函數(shù)，然后在uniapp中去觸發(fā)這個函數(shù)將參數(shù)傳遞過去即可是實現(xiàn)數(shù)據(jù)的傳遞。

evalJS

uniapp為每一個webview組件實例掛載了一個evalJS方法，用于為webview頁面注入一個可執(zhí)行的js腳本代碼。這段代碼會在webview的全局作用域中執(zhí)行。我們使用evalJS來觸發(fā)一個特定的函數(shù)，在H5的全局作用域中定義對應(yīng)的函數(shù)，并提前寫好對應(yīng)的數(shù)據(jù)處理邏輯。后續(xù)只需要在uniapp中觸發(fā)evalJS即可實現(xiàn)數(shù)據(jù)的傳遞。

注意：這種方式在H5端也是不支持的，后續(xù)會介紹。

4.H5中實現(xiàn)數(shù)據(jù)的通信

上述介紹的webview和uniapp的通信只針對于uniapp編譯的代碼是非H5環(huán)境，如果是H5環(huán)境則無效。因此使用postMessage 方案替代
postMessage

window.postMessage 是一個非常強大的 Web API，用于在不同窗口或內(nèi)嵌頁面（如 <iframe>）之間安全地傳遞消息。它允許跨源通信，即不同域名、協(xié)議或端口的頁面之間可以互相發(fā)送消息。

window.postMessage 方法允許一個窗口向另一個窗口發(fā)送消息。消息的接收方可以通過監(jiān)聽 message 事件來接收消息。為了確保安全性，postMessage 方法需要明確指定目標(biāo)窗口的來源（targetOrigin），以防止消息被發(fā)送到不安全的地址。

主頁面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Page</title>
  </head>
  <body>
    <h1>Main Page</h1>
    <iframe id="myIframe" src="https://other-origin.com/iframe.html" width="600" height="400"></iframe>
    <button id="sendMessage">Send Message to Iframe</button>

    <script>
      // 獲取 iframe 的引用
      const iframe = document.getElementById('myIframe');

      // 監(jiān)聽按鈕點擊事件，向 iframe 發(fā)送消息
      document.getElementById('sendMessage').addEventListener('click', () => {
        // 確保 iframe 已加載完成
        if (iframe.contentWindow) {
          iframe.contentWindow.postMessage('Hello from main page!', 'https://other-origin.com');
        }
      });

      // 監(jiān)聽來自 iframe 的消息
      window.addEventListener('message', (event) => {
        // 驗證來源
        if (event.origin !== 'https://other-origin.com') return;

        console.log('Received message from iframe:', event.data);
      });
    </script>
  </body>
</html>

內(nèi)嵌頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe Page</title>
</head>
<body>
    <h1>Iframe Page</h1>
    <button id="sendMessage">Send Message to Main Page</button>

    <script>
        // 監(jiān)聽按鈕點擊事件，向主頁面發(fā)送消息
        document.getElementById('sendMessage').addEventListener('click', () => {
            // 向父窗口發(fā)送消息
            window.parent.postMessage('Hello from iframe!', '*');
        });

        // 監(jiān)聽來自主頁面的消息
        window.addEventListener('message', (event) => {
            // 驗證來源
            if (event.origin !== 'http://main-page-origin.com') return;

            console.log('Received message from main page:', event.data);
        });
    </script>
</body>
</html>