Android中Hybrid的使用

一：首先明白什么是JsBridge

WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁，用作者的话来说就是实现java（ios为oc）和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得开发者更方便的让js和native灵活交互，使我们的开发更加灵活和安全。

二：JsBridge的优点

Android API 4.4以前，谷歌的webview存在安全漏洞，网站可以通过js注入就可以随便拿到客户端的重要信息，甚至轻而易举的调用本地代码进行流氓行为，谷歌后来发现有此漏洞后，在API 4.4以后增加了防御措施，如果用js调用本地代码，开发者必须在代码申明JavascriptInterface， 列如在4.0之前我们要使得webView加载js只需如下代码：
mWebView.addJavascriptInterface(new JsToJava(), "myjsfunction");
4.4之后使用时需要在调用Java方法加入@JavascriptInterface注解，如果代码无此申明，那么也就无法使得js生效，也就是说这样就可以避免恶意网页利用js对客户端的进行窃取和攻击。 但是即使这样，我们很多时候需要在js调用本地java代码的时候，要做一些判断和限制，或者有的场景也会做些过滤或者对用户友好提示，甚至更复杂的Hybrid模式下，需要js和native之间进行交互通讯，拍照上传，因此原生的JavascriptInterface 就比较维护了，特此有了基于JavascriptInterface 封装的WebViewJavascriptBridge框架。

三：使用方式。

（1）添加项目依赖（在app文件夹下加）：

repositories {
    maven { url "https://jitpack.io" }
}
compile 'com.github.lzyzsd:jsbridge:1.0.4'

（2）在布局文件中使用com.github.lzyzsd.jsbridge.BridgeWebView来代替Android自带的webView。

<com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

（3）java调用js的方法。因为js和java进行互调的时候，是基于订阅的模式，所以java需要在本地注册一个函数，然后在js中才能调用java中的注册的方法。

java端：

第一个参数：订阅的方法名。第二个参数：回调Handler，参数返回js请求的数据，function.onCallBack()回调到js，调用function(responseData)

webView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Toast.makeText(menu.this, "js的数据:"+ data, Toast.LENGTH_LONG).show();
                //memberLoginBM = (memberLoginBackMessage) getIntent().getSerializableExtra("allMessage");
                //Android返回数据给js
                function.onCallBack('本地java的数据！');
            }
        });

js端：

var data = "js端数据！";
    window.WebViewJavascriptBridge.callHandler(
		'submitFromWeb'
		, { 'Data': data }  //该类型是任意类型,返回给java的js数据。
		, function (responseData) {
		    //从后台获取的信息
		    alert(responseData);
		}
	);

（4）js调用java的方法。此时js要订阅一个方法名。

js端：

 bridge.registerHandler("functionJs", function(data, responseCallback) {
             //java中的数据：data   
		alert(data);
                var responseData = "Javascript回传数据";
                responseCallback(responseData);
            });

java端：

//memberLoginBM.toString()给js的数据
webView.callHandler("functionJs", memberLoginBM.toString(), new CallBackFunction() {
            @Override
            //data是js给Android的数据，
            public void onCallBack(String data) {
	    Toase.makeText(menu.this,"来自就是的数据："+data,Toast.LENGTH_LONG).show();		 
            }
        });

(5)做完上面需要需要在js端注册和初始化JsBridge

//android传递数据给Js（Js注册监听）
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(
			'WebViewJavascriptBridgeReady'
			, function () {
			    callback(WebViewJavascriptBridge)
			},
			false
		);
    }
}
//android传递数据给Js（Js建立链接）
connectWebViewJavascriptBridge(function (bridge) {
    bridge.init(function (message, responseCallback) { });
})。

（6）网上给出的例子都是点击后才能进行js和java互调都是进行点击的时候，我进行Android开发是时候，在加载网页的时候，需要自动加载JsBridge和调用本地的java方法，然后传参数给js进行初始化操作。然而然而在进行调用的时候，出错了，无奈之下，百度了好久也没有解决问题，无奈就模拟了个按钮点击来调用java方法，然后传参数给js，才能初始化好页面信息。初始化代码如下：

setTimeout(function () {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById("androidBt").dispatchEvent(e);
        }, 1000);

<input id="androidBt" type="button" style="display:none" onclick="noticeServerAndroid();"  />