Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 【Android】如何寫一個JsBridge

【Android】如何寫一個JsBridge

編輯:關於Android編程

JsBridge

簡介

Android JsBridge 就是用來在 Android app的原生 java 代碼與 javascript 代碼中架設通信(調用)橋梁的輔助工具。

原理概述

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

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

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

Javascript-bridge-rpc

當然,client 與 server 只是用來區分通信雙方責任的叫法而已,並不是一成不變的。
對於 java 與 javascript 互調的情況,當 java 主動調用 javascript 的時候,java 充當 client 角色,javascript 則扮演 server 的角色,
javascript 中的函數執行完畢後回調 java 方法,這個時候,javascript 充當 client 角色,而 javascript 則承擔 server 的責任。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxpbWcgYWx0PQ=="Javascript-bridge-circle" src="/uploadfile/Collfiles/20160413/20160413100333339.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
        }
    })

如圖:

Javascript-bridge-register

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);
        }
    })
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved