uni-app 與 Vue H5 項目通訊 – 小科科的春天

什麼是WebView

WebView是術語，是指網頁視圖。能加載顯示網頁，可以將其視為一個瀏覽器。它使用了WebKit渲染引擎加載顯示網頁。

可以內嵌在移動端，實現前端的混合式開發，大多數混合式開發框架都是基於WebView模式進行二次開發的。比如：APIcloud、uni-app等等的框架。

uni-app裡的web-view

web-view是一個web瀏覽器組件，可以用來承擔網頁的容器，會自動鋪滿整個屏幕

各小程序平臺，web-view 加載的 url 需要在後臺配置域名白名單，包括內部再次 iframe 內嵌的其他 url 。

詳細屬性查看：uni-app裡的web-view

通訊方法

引入SDK

嵌入的h5項目或者頁面不是uni-app項目搭建的話，需要在 index.html 頁面或者是當前的HTML頁面引入uni-app項目的API ,這樣才能使用,才能相互通訊。

我們是用的Vue-cli腳手架搭建的項目，直接在 html 模板引入

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

Tips

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

調用的時機

在引用依賴的文件後，需要在 HTML 中監聽 UniAppJSBridgeReady 事件觸發後，才能安全調用 uni 的 API。

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

APP端

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

// 引入需要嵌入的h5 鏈接
<template>
    <view>
        <web-view
            @message="getMessage" 
            src="https://uniapp.dcloud.io/static/web-view.html"
        >
        </web-view>
    </view>
</template>
<script>
//在methods中接收h5發送的消息
/**
* @information message中 接收到的是由h5項目通過uni.postMessage中傳遞出來的數據，以數組的形式接收每次的消息
*/
getMessage(event){
    console.log('接收到消息'，event.detail.data)
}
</script>

H5端

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

<script>
// 在使用到的頁面 添加如下代碼
 mounted () {
    this.$nextTick(()=>{
      document.addEventListener('UniAppJSBridgeReady', function() {  
        // 向 app 發送消息
        uni.postMessage({  
            data: {  
                action: 'postMessage'  
            }  
        });
      });
    })
  }
</script>

APP 向 H5 發送消息可以動態設置URL，然後 H5 獲取 query 參數

<template>
    <web-view
       @message="getMessage" 
       :src="url">
    </web-view>
</template>
<script>
export default {
  data () {
    return {
      url: 'http://192.168.0.1/test?id=1' // APP URL傳遞參數
    }
  },
  created () {
      // H5 獲取參數
    this.params = this.$route.query.id
  }
}
</script>

跳轉頁面

在h5頁面中引入web-view的方法的基礎上，不但可以像上面一樣進行通訊，還可以跳轉頁面，達到從嵌入h5跳回到本地應用的頁面上的效果，跳轉頁面的方式與uni-app一致，在h5頁面寫入方法就好。

uni.navigateTo // 跳轉到指定頁面
uni.redirectTo // 關閉當前頁面跳轉到指定頁面
uni.reLaunch // 關閉所有頁面跳轉到指定頁面
uni.switchTab // 跳轉tab頁面--只能跳轉tab頁
uni.navigateBack // 返回頁面層級