web-view實現網頁html和uniapp之間的通信

工作中遇到問題：

使用web-view實現了加載html文件預覽pdf文件的功能，但是在預覽pdf文件的時候，可以點擊返回按鈕返回上一個頁面，前提是在pdf文件的預覽頁面默認的頂部導航都去掉的情況下。

 

解決方案：

一、引入依賴文件

在 web-view 加載的 HTML 中調用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK

<!-- 微信 JS-SDK 如果不需要兼容小程序，則無需引用此 JS 文件。 -->  
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni 的 SDK，必須引用。 -->  
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

注：

這些 JS 文件是在 web-view 加載的那個 HTML 文件中引用的，而不是 uni-app 項目中的文件。
如果不考慮微信小程序，則無需引入微信的 JS-SDK。
兩個文件同時引入時，注意引入的順序，微信的需要在前。

二、從 HTML 向應用發送消息，實現點擊返回頁面跳轉

uni.postMessage 中的參數格式，必須是 data: {}。也就是說，傳遞的消息信息必須在 data 這個對象中。

<div class="back" id="pdfBack"><img src="../../../static/image/back_arrow.png"></div>

<script> document.addEventListener('UniAppJSBridgeReady', function() { console.log('UniAppJSBridgeReady'); document.querySelector('#pdfBack').addEventListener('click', function(evt) { uni.postMessage({ data: { action: 'back' } }); }); }); </script>

注：

每次執行 postMessage 后，傳遞的消息會以數組的形式存放。因此，在 web-view 的 message 事件回調中，接收到的 event.detail.data 的值是一個數組。

三、在uniapp 中接受信息back

監聽 web-view 的 message 事件，必須是@message，然后在事件回調的 event.detail.data 中接收傳遞過來的消息。

<template>  
    <view>  
        <web-view src="http://www.yourdomain.com/test.html" @message="handleMessage"></web-view>  
    </view>  
</template>  

<script> export default { methods: { handleMessage(evt) { console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
　　　　　　　　　 uni.navigateBack();
 } } } </script>

我寫的可能不太明了，更多細節借鑒博主的日志鏈接：https://www.zhiboblog.com/1493.html