快捷導(dǎo)航

web-view實(shí)現(xiàn)app應(yīng)用與網(wǎng)頁的數(shù)據(jù)交互方式

更新時(shí)間：2025年05月15日 10:18:14 作者：愛編程的小學(xué)究

這篇文章主要介紹了web-view實(shí)現(xiàn)app應(yīng)用與網(wǎng)頁的數(shù)據(jù)交互方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、網(wǎng)頁向app傳遞數(shù)據(jù)

1、在網(wǎng)頁項(xiàng)目的index.html頁面引入uniapp的js文件，引入成功之后就可以在事件里面使用uni.postMessage（網(wǎng)頁項(xiàng)目是用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('當(dāng)前環(huán)境：' + JSON.stringify(res));  
      });  
    });
</script>

2、向app傳遞數(shù)據(jù)，可以直接寫在點(diǎn)擊事件里面

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

二、app處理接收的數(shù)據(jù)并向網(wǎng)頁傳遞數(shù)據(jù)

1、app項(xiàng)目中引入網(wǎng)頁

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

2、handleMessage接收網(wǎng)頁傳過來的數(shù)據(jù)

 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('數(shù)據(jù)接收成功')
          // 進(jìn)行處理
     }
     // #endif
 }

3、向網(wǎng)頁中傳遞數(shù)據(jù)

開發(fā)的時(shí)候使用this.$scope一直Cannot read property ‘$getAppWebview‘ of undefined，后來查找了很多才找到，組件內(nèi)要用this.$parent.$scope

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

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

注意：如果頁面沒有初始化完成，可以加個(gè)定時(shí)等初始化完成在調(diào)用

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

三、快速起服務(wù)測試

如果你想快速上手的話，可以直接建一個(gè)html頁面起本地服務(wù)

1、把index.html放到文件夾下
2、打開文件夾 shift+鼠標(biāo)右鍵，打開命令行
3、下載http-server： npm install http-server -g
4、開啟本地服務(wù)器，輸入 http-server 就可以了
5、關(guān)閉本地服務(wù)器，按快捷鍵 CTRL-C，當(dāng)顯示 ^Chttp-server stopped 的時(shí)候，就是關(guān)閉成功了

用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>網(wǎng)絡(luò)網(wǎng)頁</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">
      // 待觸發(fā) `UniAppJSBridgeReady` 事件后，即可調(diào)用 uni 的 API。
      document.addEventListener('UniAppJSBridgeReady', function() {
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('當(dāng)前環(huán)境：' + JSON.stringify(res));
        });
        document.getElementById('postMessage').addEventListener('click', function() {
          uni.postMessage({
            data: {
              action: 'message'
            }
          });
        });
      });
    </script>
  </body>
</html>