JsBridge配置方法請(qǐng)看第一篇
H5頁(yè)面與原生交互的方法之 一圣勒、addJavascriptInterface

JsBridge的使用方法

js調(diào)用java

1膝迎、指定處理者
java創(chuàng)建處理者

        webView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                CusToast.showToast("皇上收到請(qǐng)求:" + data);
                function.onCallBack("朕準(zhǔn)了");
            }
        });

js指定處理者

        function testClick() {
            var str1 = document.getElementById("text1").value;

            //send message to native
            var data = {str1};
            window.WebViewJavascriptBridge.callHandler('submitFromWeb'
               , {'param': data}
               , function(responseData) {
                    document.getElementById("show").innerHTML = responseData;
               });
        }

html

<input type="text" id="text1" value="請(qǐng)皇上賞賜美女一名" />
<input type="button" id="enter" value="向皇上提出要求" onclick="testClick();"/>

2盆色、不指定處理者
java添加默認(rèn)處理者

        webView.setDefaultHandler(new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                CusToast.showToast("收到j(luò)s發(fā)送的信息" + data);
                function.onCallBack("copy that");
            }
        });

js發(fā)送信息

        //發(fā)送泛消息
        function testClick1() {
            var data = "";
            window.WebViewJavascriptBridge.send(
                    data
                    , function(responseData) {
                        document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
                    }
            );
        }

html

<input type="button" id="enter1" value="發(fā)送信息" onclick="testClick1();"/>

java調(diào)用js

1灰蛙、指定處理者
js創(chuàng)建處理者

        // 注冊(cè)回調(diào)函數(shù)，第一次連接時(shí)調(diào)用 初始化函數(shù)
        connectWebViewJavascriptBridge(function(bridge) {
            // 接收native發(fā)來(lái)的消息隔躲，指定處理者摩梧，返回給native結(jié)果
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("init").innerHTML = ("結(jié)果: = " + data);
                if (responseCallback) {
                    var responseData = "被皇上寵幸";
                    responseCallback(responseData);
                }
            });
        })

java指定處理者

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.callHandler("functionInJs", "宣老周進(jìn)殿", new CallBackFunction() {

                    @Override
                    public void onCallBack(String data) {
                        CusToast.showToast("接收到j(luò)s返回的數(shù)據(jù):" + data);
                    }
                });
            }
        });

2、不指定處理者
js接收native發(fā)送的消息

        // 注冊(cè)回調(diào)函數(shù)蹭越，第一次連接時(shí)調(diào)用 初始化函數(shù)
        connectWebViewJavascriptBridge(function(bridge) {
            //接收native發(fā)來(lái)的泛消息
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    '皇子': '朱棣',
                    '皇孫': '朱高熾'
                };
                console.log('JS responding with', data);
                responseCallback(data);
            });
        })

java發(fā)送消息

        webView.send("朱八八駕崩了", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                CusToast.showToast("進(jìn)京皇子皇孫有：" + data);
            }
        });

js初始化注冊(cè)事件監(jiān)聽(tīng)障本，固定寫(xiě)法

        function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }