【Android】如何寫一個JsBridge

【Android】如何寫一個JsBridge
JsBridge簡介

Android JsBridge 就是用來在 Android app的原生 java 代碼與 javascript 代碼中架設通訊（調用）橋樑的協助工具輔助。

原理概述

Javascript 運行在 WebView 中，而 WebView 只是 Javascript 執行引擎與頁面渲染引擎的一個封裝而已。

由於這種天然的隔離效應，我們可以將這種情況與 IPC 進行類比，將 Java 與 Javascript 的每次互調都看做一次 IPC 調用。
如此一來，我們可以模仿各種已有的 IPC 方式來進行設計，比如 RPC。本文模仿 Android 的 Binder 機制來實現一個 JsBridge。

首先回顧一一下基於 Binder 的經典 RPC 調用：

當然，client 與 server 只是用來區分通訊雙方責任的叫法而已，並不是一成不變的。
對於 java 與 javascript 互調的情況，當 java 主動調用 javascript 的時候，java 充當 client 角色，javascript 則扮演 server 的角色，
javascript 中的函數執行完畢後回調 java 方法，這個時候，javascript 充當 client 角色，而 javascript 則承擔 server 的責任。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxpbWcgYWx0PQ=="Javascript-bridge-circle" src="http://www.bkjia.com/uploads/allimg/160414/0423011a3-1.png" title="\" />

剩下的問題就是怎麼來實現這個機制了，大致有這麼幾個需要解決的問題：

java 如何調用 Javascript Javascript 如何調用 java 方法參數以及回調如何處理通訊的資料格式是怎樣的

下面逐個討論這些問題：

1. java 如何調用 Javascript

要實現 Java 與 Javascript 的相互調用，有兩條途徑可以考慮：

整合一個定製化的 Javascript 與 Html 渲染引擎，java 通過引擎底層與 Javascript 互動。這樣可以獲得完全的控制權。使用 Android Sdk 提供的互動方法。

對於第一種途徑，代價比較大，而且技術方案比較複雜，一般只有基於 Javascript 的跨平台開發方案才會這麼做。
所以，現在著重考查第二種途徑。

Android 的預設 Sdk 中， Java 與 Javascript 的一切互動都是依託於 WebView 的，大致有以下幾個可用方法：

第一， Java 調用 Javascript 方法

    webView.loadUrl("javascript：scriptString"); //其中 scriptString 為 Javascript 代碼

在 KITKAT 之後，又新增了一個方法：

    webView.evaluateJavascript(scriptString, new ValueCallback() {        @Override        public void onReceiveValue(String value) {        }    });//其中 scriptString 為 Javascript 代碼，ValueCallback 的用來擷取 Javascript 的執行結果。這是一個非同步掉用。

這個調用看起比上面的正常，而且更像是一個方法調用。

需要注意的是，ValueCallback 並不是在 UI 線程裡面執行的。

2. Javascript 如何調用 java

要實現 Javascript 調用 java 方法，需要先在 Javascript 環境中注入一個 Java 代理：

    class JavaProxy{        @JavascriptInterface //注意這裡的註解。出於安全的考慮，4.2 之後強制要求，不然無法從 Javascript 中發起調用        public void javaFn(){            //xxxxxx        };    }    webView.addJavascriptInterface(new JavaProxy();, "java_proxy");

然後在 Javascript 環境中直接調用 obj_proxy 代理上的方法即可。

    java_proxy.javaFn();

這裡有兩個方面需要統一：

Javascript 的執行方法比較怪異，所以，我們需要將概念統一化。如果需要執行的方法比較多，那麼，代理對象上也需要定義非常多的方法，我們需要將各種方法定義統一起來管理。

所以，我們先將 Javascript 的執行封裝成類似 java 一樣的代理對象，然後通過在各自的 stub 上註冊回調來增加功能支援。
比如，如果 java 想增加 getPackageName 方法，那麼，直接在 JavaProxy 上註冊即可：

    javaProxy.register("getPackageName", new JavaHandler(){        @Override        public void handle(Object value){            //xxxxx        }    })

3. 方法參數以及回調如何處理

很顯然，任何 IPC 通訊都涉及到參數序列化的問題， 同理 java 與 Javascript 之間只能傳遞基礎類型（注意，不單純是基本類型），包括基本類型與字串，不包括其他對象或者函數。
由於只涉及到簡單的相互調用，這裡就可以考慮採用 JSON 格式來傳遞各種資料，輕量而簡潔。

Java 調用 Javascript 沒有傳回值（這裡指 loadUrl 形式的調用），因此如果 java 端想從 Javascript 中擷取傳回值，只能使用回調的形式。
但是在執行完畢之後如何找到正確的回調方法資訊，這是一個重要的問題。比如有下面的例子：

在 java 環境中，JavaProxy 對象有一個無參數的 getPackageName 方法用來擷取當前應用的 PackageName。
擷取到 packageName 之後，傳遞給 Javascript 調用者的對應回調中。

在 Javascript 環境中，擷取當前應用的 PackageName 的大致調用如下：

    bridge.invoke('getPackageName', null, function(packageName){        console.log(packageName);    });````顯然

  ```javascript function(packageName){ console.log(packageName); }

這個 Javascript 函數是無法傳遞到 java 環境中的，所以，可以採取的一個策略就是，
在 Javascript 環境中將所有回調統一管理起來，而只是將回調的 id 傳遞到 java 環境去，java 方法執行完畢之後，
將回調參數以及對應的回調 id 返回給 Javascript 環境，由 Javascript 來負責執行正確的回調。

這樣，我們就可以實現一個簡單的回調機制：

在 java 環境中

    class JavaProxy{        public void onTransact(String jsonInvoke, String jsonParam){            json = new Json(jsonInvoke);            invokeName = json.getInvokeName(); // getPackageName            callbackId = json.getCallbackId(); // 12345678xx            invokeParam = new Param(jsonParam);// null            ...            ...            JsProxy.invoke(callbackId, callbackParam); //發起 Javascript 調用，讓 Javascript 去執行對應的回調        }    }

在 javascript 環境中

    bridge.invoke = function(name, param, callback){        var callbackId = new Date().getTime();        _callbacks[callbackId] = callback;        var invoke = {            "invokeName" : name,            "callbackId" : callbackId        };        JavaProxy.onTransact(JSON.stringify(invoke), JSON.stringify(param));    }     bridge.invoke('getPackageName', null, function(packageName){         console.log(packageName);     });  

反之亦然。

4. 通訊的資料格式是怎樣的

問題都處理了，只需要設計對應的協議即可。
按照上面的討論,

在 client 端：

我們使用

    Proxy.transact(invoke, callback);

來調用 server 端註冊的方法。

在 server 端

我們使用

    Stub.register(name, handler);

來註冊新功能，使用

    Stub.onTransact(invoke, handler);

來處理接收到的 client 端調用。

其中，invoke 包含所要執行的方法以及回調的資訊，因此，invoke 的設計如下：

{    _invoke_id : 1234,      _invoke_name : "xxx",      _callback_id : 5678,      _callback_name : "xxx"  }

注意 _invoke_id 與 _invoke_name 的區別：

如果當前 invoke 是一個直接方法調用，那麼 _invoke_id 應該是無效的。如果當前 invoke 是一個回調，那麼 _invoke_id + _invoke_name 共同決定回調的具體對象

需要注意的問題回呼函數需要及時刪除，不然會引起記憶體流失。使用

 

必要配置

請在對應的 html 頁面中引入

    <script src="js-bridge.js"></script>

Java 環境

初始化 JsBridge:

    jsBridge = new JsBridge(vWebView);

Java 註冊處理方法：

    jsBridge.register(new SimpleServerHandler("showPackageName") {        @Override        public void handle(String param, ServerCallback serverCallback) {            new Handler(Looper.getMainLooper()).post(new Runnable() {                @Override                public void run() {                    String packageName = getPackageName();                    Tip.showTip(getApplicationContext(), "showPackageName:" + packageName);                }            });        }    });

Java 在處理方法中回調 Javascript：

    @Override    public void handle(final String param, final ServerCallback serverCallback) {        new Handler(Looper.getMainLooper()).post(new Runnable() {            @Override            public void run() {                User user = getUser();                Map map = new Gson().fromJson(param, Map.class);                String prefix = map.get("name_prefix");                Tip.showTip(mContext, "user.getName():" + prefix + "/" + user.getName());                if ("standard_error".equals(prefix)) {                    Map map1 = new HashMap<>();                    map1.put("msg", "get user failed");                    String userMarshalling = new Gson().toJson(map1);                    serverCallback.invoke("fail", new MarshallableObject(userMarshalling));                } else {                    String userMarshalling = new Gson().toJson(user);                    serverCallback.invoke("success", new MarshallableObject(userMarshalling));                }            }        });    }

Java 執行 Js 函數：

    jsBridge.invoke("jsFn4", new MarshallableString("yellow"), new ClientCallback() {        @Override        public void onReceiveResult(String invokeName, final String invokeParam) {            if ("success".equals(invokeName)) {                new Handler(Looper.getMainLooper()).post(new Runnable() {                    @Override                    public void run() {                        Tip.showTip(getApplicationContext(), invokeParam);                    }                });            }        }        @Override        public String getResult(String param) {            return param;        }    });

Javascript 環境

Javascript 的靈活性比較高，所以要簡單一些：

Javascript 註冊處理函數：

    window.JavaBridge.serverRegister('jsFn4', function (transactInfo, color) {        log("jsFn4:" + color);        title.style.background = color;        log("jsFn4:callback");        transactInfo.triggerCallback('success', 'background change to ' + color);    });

Javascript 執行 Java 方法：

    var sdk = {        getUser: function (params) {            var _invokeName = 'getUser';            var _invokeParam = params;            var _clientCallback = params;            window.JavaBridge.invoke(_invokeName, _invokeParam, _clientCallback);        }    };    sdk.getUser({        "name_prefix": "standard_error",        "success": function (user) {            log('sdk.getUser,success:' + user.name);        },        "fail": function (error) {            log('sdk.getUser,fail:' + error.msg);        }    })