前言
在使用uni-app進行套殼打包的app，需要和web-view引入的網頁（H5）相互通信，在此記錄分享下。
web-views官方文檔
H5 向 App 通信
H5 頁面代碼
1、在官網中下載最新的 uni.webview.js，uni.web-view.js是一個可以幫助我們在非uniapp的項目中使用uni-app方法的庫。（下載地址）
2、在子應用的index.html中引入uni.webview.js，你可下載後本地引入、也可採用cdn方式引入。
3、在 H5 頁面中，通過 uni-postMessage 向APP發送消息。
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script>
<body>
...
</body>
</html>
// 需要發消息的地方
<script>
export default {
mounted() {
document.addEventListener('UniAppJSBridgeReady', () => {
uni.postMessage({
data : {
action : "h5向app傳值"
}
})
});
},
};
</script>App 接收消息
在 web-view 組件中監聽 @message 事件：
<web-view
:src="h5Url"
@message="handleH5Message"
></web-view>
App 向 H5 通信
1、通過web-view屬性src帶參數通信
這是最直接最方便的通信方式，好處就是方便直接，只需在web-view的src中帶上參數即可，缺點就是無法在我們需要的時候實時傳遞信息，不夠靈活。
2、UniApp 調用 H5 方法
通過 evalJS 執行 H5 頁面的代碼
let currentWebview = this.$scope.$getAppWebview();
// 設置延遲，確保頁面初始化完成
setTimeout(function() {
var wv = currentWebview.children()[0]; // 獲取 WebView 組件
wv.evalJS(`handleAppMessage(${data})`)
}, 200); // 延遲 200ms，確保頁面初始化完成3、H5 頁面接收消息
在 H5 APP.vue頁面中定義全局函數：
<script>
// 供 App 調用的函數
function handleAppMessage(msg){
alert('收到 APP 消息：' + msg)
}
// 注意handleAppMessage必須要掛載到全局window上
window.handleAppMessage = handleAppMessage
</script>