uniapp webview如何與H5相互通訊

嘉豪發表於2022-01-30

uniapp webview如何與H5相互通訊

2222.gif

h5封裝的程式碼可以從這裡獲取
git:https://github.com/MyButifull...

進入主題

一、uniapp如何接收H5傳送的訊息

uniapp端:
使用@message來監聽H5的訊息
image.png

H5端:
index.htmel 匯入 uni.webview.js 最新版地址:https://js.cdn.aliyun.dcloud....
這裡有一個坑安卓端執行時會載入不了這個JS,所以要加這個js程式碼拿下來本地再引入
image.png

執行時監聽uniappjs載入完成,載入完成後可使用 window.uni.postMessage 傳送訊息至uniapp底座。 傳送內容要寫在data裡

document.addEventListener('UniAppJSBridgeReady', function(e) {
    uni.getEnv(function(res) {
      console.log('當前環境:' + JSON.stringify(res));
    });

    // 向uniapp底座傳送訊息
    uni.postMessage({
      data: 'H5傳送的訊息'
    });
  });

二、uniapp傳送訊息給H5

image.png

相關文章