uni-app 與 Vue H5 項目通訊

什麼是WebView

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

可以内嵌在移動端，實作前端的混合式開發，大多數混合式開發架構都是基于WebView模式進行二次開發的。比如：

APIcloud

、

uni-app

等等的架構。

uni-app裡的web-view

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

各小程式平台，web-view 加載的 url 需要在背景配置域名白名單，包括内部再次 iframe 内嵌的其他 url 。

詳細屬性檢視：

通訊方法

引入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 // 傳回頁面層級

• 當web-view嵌入的h5 是

  uni-app

  生成的h5資源的話
  • 使用

    uni.webView.navigateTo

    //其中的webView指的是你嵌入的h5的跳轉想要跳轉回應用

踩坑

• uni.showToast

  會清掉 loading 狀态
  • 同理 hideLoading 也會關閉 showToast
  • 解決方案：使用 H5+ 的

    plus.nativeUI.toast

• 頻繁使用

  uni.showLoading

  會閃爍，比如上傳進度場景

  • plus.nativeUI.showWaiting

• ing...