關於Android 和 h5 hybrid 開發的實踐在網上有很多，Android自身就有一個webview，很多實踐都是通過webview來實現的，以下是記錄一下自己的實踐。

1、Android與H5通訊方式

主要有兩種：有基於url攔截的，也有基於prompt攔截的。 Android上面最火的這個開源專案 JsBridge就是基於url來進行攔截的

2、JsBridge原理和用法

原理 Android呼叫H5：通過webview類的loadUrl方法可以直接執行js程式碼，類似瀏覽器位址列輸入一段js一樣的效果

webview.loadUrl("javascript: alert('hello world')");
 

H5呼叫Android：webview可以攔截H5發起的任意url請求，webview通過約定的規則對攔截到的url進行處理（消費），即可實現H5呼叫Android

var ifm = document.createElement('iframe');
ifm.src = 'jsbridge://namespace.method?[...args]';

JsBridge上面已經封裝了一層協議了，關於協議的設定我們之前有這篇文章Android自定義UrlSchema。所以如果要自定義一套協議的話，可以參考下面這個方式

schema://classname/method?value={} // Android會收到這個url
 

schema即自行約定的私有協議，一般是公司名或者應用名
classname/method這兩個一起，指定API名稱，classname可以是Android的類名，當然也可以只是一個普通字串（如namespace），只要Android方便識別即可
value是與method對應的引數
請求示例：

// H5直接指定包名和方法名，這樣更容易擴充套件
iframe.src = `myschema://com.mycompany.hybrid.InteractHandler/toast?value={msg: 'hello world'}`

// 用約定的字串也可以，Android拿到之後自己再做一次map
iframe.src = `myschema://interact/toast?value={msg: 'hello world'}
 

JsBridge用法1:

java註冊handler方法以供h5裡面的js呼叫

    webView.registerHandler("submitFromWeb", new BridgeHandler() {
        @Override
        public void handler(String data, CallBackFunction function) {
            Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
            function.onCallBack("submitFromWeb exe, response data from Java");
        }
    });

js可以通過下面的方式呼叫這個的java handler的“submitFromWeb”方法

    WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

JsBridge用法2:

js註冊handler方法以供Java裡面的程式碼呼叫

WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
    });

java裡面可以通過以下方式來呼叫這個js handler的“functionInJs"方法

webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
        @Override
        public void onCallBack(String data) {

        }
    });

3、使用過程中的問題

1、最主要有一個是效能問題，通過iframe的src來進行跳轉會遇到載入慢的問題，存在js已經載入完了，但是bridge還沒有ready的情況，以至於有些情況下前端任務這個時間差太長了

2、是否存在jsbridge載入失敗，可以通過cookiemanager傳遞一些內容？

3、使用者資訊的傳遞，通過token來傳遞

4、js中如何加上許可權控制？java中如何控制js中程式碼的許可權？ 參考各種h5型別的開放平臺實現

4、結語

效能問題可以考慮不採用url方式，而採用promt方式來實現?