通過JsBridge進行app與webview通信（Vue版）

通過JsBridge進行app與webview通信（Android版）

一、問題

現在很多app都是嵌套h5頁面的混合型app，實作方式就是app加一個webview，webview加入h5的項目位址，那麼有時候我們需要擷取裝置id、擷取定位等等資訊，都是h5擷取不了的，這時候就需要app與h5建立一個通信，實作資訊傳輸，我們可以使用JsBridge來實作這個需求。

二、JsBridge

通過JsBridge，Web端可以調用Native端的Java接口，同樣Native端也可以通過JsBridge調用Web端的JavaScript接口，實作彼此的互相調用。

了解JsBridge-https://github.com/lzyzsd/JsBridge

三、Vue2結合WebViewJavascriptBridgeReady

1.封裝一個JsBridge方法

JsBridge.js

//自定義JS注冊事件監聽 connectWebViewJavascriptBridge 方法名可改
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(window.WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , ()=> {
                callback(window.WebViewJavascriptBridge)
            },
            false
        );
    }
}

//注冊回調函數，第一次連接配接時調用 初始化函數 connectWebViewJavascriptBridge和上面一緻
connectWebViewJavascriptBridge(function(jsbridge) {
    //初始化 必須有 Android 通過 JSBridge 調用 預設JS bridge.init bridgeWebView.send調用
   jsbridge.init(function(message, callback) {
       callback({'Javascript Responds': 'Android調用JS初始化方法!'});
   });
})

export default  {
    registerHandler: function(name, fun) {
        connectWebViewJavascriptBridge(function(jsbridge){
            //Android調用js方法：functionInJs方法名稱需要保持一緻 ，并傳回給Android通知
           jsbridge.registerHandler(name, function(data, responseCallback) {
                responseCallback(fun(data));
            });
        })
    },
    callHandler: function(name, data, fun) {
        connectWebViewJavascriptBridge(function(jsbridge){
            //JS調用Android方法：接收Android傳遞過來的資料，并做處理
           jsbridge.callHandler(name, data, function(data) {
                fun(data);
            });
        })
    }
}
           

2.main.js

import JsBridge from "./utils/JsBridge"

Vue.prototype.$jsbridge = JsBridge;
           

3.在app.vue使用(其他檔案也可以)

<template>
  <div id="app">
    <div class="mianBox">
      <div>app主動發送資料給h5：{{monitor}}</div>
      <div>h5觸發app方法接收的結果：{{contnet}}</div>
      <button @click="getData" >調用app方法getAppData</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      contnet:"",
      monitor:""
    }
  },
  mounted(){
  	// 監聽app觸發monitorTestData，進行監聽接收資料
    this.$jsbridge.registerHandler('monitorTestData', (data) => {
        console.log("監聽到的資料",data)
        this.monitor= data;
    })
  },
  methods:{
    getData(){
    	// 觸發 app 内部設定好的方法，觸發完成會有回調接收結果
      this.$jsbridge.callHandler('getAppData',{'param': "你好，這是我JS傳遞給你的資料"}, (data) => {
         console.log("擷取到的資料",data)
          this.contnet = data;
      })
    }
  }
}
</script>

<style>
#app {
  height: 100%;
}
</style>
           

四、結合Android實作效果

通過JsBridge進行app與webview通信（Android版）

運作出來的界面

JS 通過 JSBridge 調用 Android

Android 通過 JSBridge 調用 JS