What is JsBridge
近期在做一个项目，使用的是Native+H5的方式实现的。众所周知的是在Android中，Webview所实现的java与js的交互存在一些安全问题，并且这样的使用方式，没法让一套H5同时适配Android和iOS两个平台，因此，就需要有一个中间组件来实现js与本地的代码的交互，也就是JsBridge。
在Android平台我们选用了开源项目。整个库的结构也比较简单：一个用来注入的js文件，一个自定义的Webview（包括webViewClient），以及作为载体的BridgeHandler。
JsBridge的使用
在介绍JsBridge的原理之前，先简单介绍下JsBridge的使用，也可以看github上的表述。
JsBridge库集成
集成的方式有很多种:
使用作者推荐方式：
repositories {
maven {url "https://jitpack.io"}
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}使用源码集成
下载源码，将源码拷贝至自己的工程内，作为工程的文件。自定义Module
下载源码，新建Module，将源码导入Module，并将项目依赖自定义的Module
使用JsBridge库
提供操作给Js调用
webView.registerHandler("submitFromWeb", new BridgeHandler(){ @Override public void handler(String data, CallBackFunction function){ function.onCallBack("submitFrom web exe, response data from java"); } }
Js如果需要调用Java提供的方法时候，则需要调用这个Handler，而在注册时参数submitFromWeb将作为Js调用时使用的Key值。调用方式如下：
WebViewJavascriptBridge.callHandler( 'submitFromWeb',
{'param':str1}, function(responseData){ //这里打印的应该是上面Handler实现方法中的callback的入参：submitFrom web exe, response data from java
document.getElementById("show").innerHTML = "response data from java, data = "+responseData
}
)另外，库也提供了一个简单的没有回调的调用方式：
webView.setDefaultHandler(new DefaultHandler());
Js调用的方式也可以简化为：
WebViewJavascriptBridge.send(
data, function(responseData){ //java中DefaultHandler所实现的方法中callback所定义的入参
}
)提供操作给Java调用
注册方法与Java雷同：WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) { document.getElementById("show").innerHTML = ("data from Java: = " + data); var responseData = "Javascript Says Right back aka!"; responseCallback(responseData); });
Java调用Handler时，也跟Js一样：
webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction(){ @Override
public void onCallBack(String data){
}
}
);同样的，在JS中也可以注册默认的Handler，以方便Java调用时，通过send方法发送数据
bridge.init(function(message, responseCallback) { console.log('JS got a message', message); var data = { 'Javascript Responds': 'Wee!'
}; console.log('JS responding with', data);
responseCallback(data);
});java调用send方法：
webView.send("hello");JsBridge使用原理
在讲JsBridge的实现之前，首先要讲下各个文件的作用：
WebViewJavascriptBridge.js 被注入到各个页面的js文件；提供初始化，注册Handler，调用Handler等方法。
WebViewJavascriptBridge.java bridge接口文件,定义了发送信息的方法，由BridgeWebView来实现。
BridgeWebView.java WebView的子类，提供了注册Handler，调用Handler等方法。
BridgeWebViewClient.java WebViewClient的子类，重写了ShouldOverrideUrlLoading，onPageFinish，onPageStart等方法。
BridgeHandler.java 作为Java与Js交互的载体。Java&Js通过Handler的名称来找到响应的Handler来操作。
DefaultBridgeHandler.java BridgeHandler的子类，不做任何操作。仅为Java提供默认的接收数据的Handler。
CallBackFunction.java 回调函数，Handler处理完成后，用来给Js发送消息。
Message.java 消息对象，用来封装与js交互时的json数据，callid，responseid等。
BridgeUtil.java 工具类，提供从Url中提取数据，获取回调方法，注入js等方法。
JsBridge调用过程
Native初始化webview，注册Handler；加载页面完成后，将WebViewJavascriptBridge.js文件注入页面。查询消息队列是否有信息需要被接收。
H5页面初始化，注册Handler，查询消息队列是否有信息需要别接收。
用户操作，H5调用本地功能：Js将消息内容放在
sendMessageQueue中，并设置iframe的src为yy://__QUEUE_MESSAGE__/Webview设置的WebViewClient拦截到约定url，调用Webview的刷新消息队列的方法
flushMessageQueue，此方法就是加载了一个url：javascript:WebViewJavascriptBridge._fetchQueue();,这也是Js中定义的方法，另外定义了一个回调；回调方法主要做了两件事：①判断Native是否为此返回数据保有响应回调操作，若有，则执行，若没有，则为判断callId，不为空时为这个callId初始化一个回调。②通过handlername判断是否为默认的Handler还是自定义的Handler，调用相应Handler的handler方法，入参为消息数据内容和第一步中定义的回调。【这段较为难消化，需要阅读代码来理解】Js中
_fetchQueue设置了iframe的src，内容为：yy://return/_fetchQueue/+第二步中放入sendMessageQueue中的消息内容。WebViewClient拦截到url为
yy://return/，调用WebView的handlerReturnData方法；通过url中定义的方法名，找到第四个步骤中定义的回调，并调用。回调方法走完后，删除此回调方法。如果Js在调用Handler的时候设置了回调方法，也就是在第四步骤中的含有callId，就会调用queueMessage的方法，然后往下就是走Native给Js发送消息的步骤。
Ps: Native给Js发送消息的步骤跟上述从第三步骤到第七步骤完全相同，只不过Native和Js对象调换位置即可。
JsBridge的核心
JsBridge之所以能实现Native与Js相互调用的功能，其核心实现其实就是：
拦截Url
load url("javascript:js_method()");
先说第二点，Native调用Js，通过加载以javascript:开头的url即可实现调用Js的方法。这个很好理解，在web中也是通过这种方式调用Js的方法的。
然后细说下第一点的实现：
向body中添加一个不可见的iframe元素。通过拦截url的方法来执行相应的操作，但是页面本身不能跳转，所以改变一个不可见的iframe的src就可以让webview拦截到url，而用户是无感知的。
拦截url。通过
shouldOverrideUrlLoading来拦截约定规则的Url，再做具体操作。
Ps： 添加iframe是H5自身可实现的，但是如果H5来实现的话，需要每个页面实现，且耦合较高；因此放在库里，通过加载完成注入的方式，则会降低耦合
先就这么多~~
留个思考的问题：无论是js发送消息给Native，还是Native发送消息给Js，首先都会发送一个_fetchQueue，然后再发送return;那这两步是否可以合并成一步呢？
作者：seph_von
链接：https://www.jianshu.com/p/910e058a1d63
随时随地看视频
