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

需要注意的是，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 的執行包裝成類似 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 函數是無法傳遞到 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));
                }
            }
        });
    }

    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;
        }
    });

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

    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);
        }
    })