特别说明
首先说明本文并非原创，原文在此：https://www.cnblogs.com/dailc/p/5931324.html#callback-format。相关代码会放在https://github.com/Samuel2306/JSBridge。
概述
本文介绍Android原生部分的功能开发，真正实现与JSBrige的对接。由于笔者能力有限，IOS部分就留给小伙伴自己去实现。不过以笔者的理解，IOS部分的缺失不会影响小伙伴对JSBridge的实现逻辑的理解。
功能结构图
第一步：定义一个API类，作为Native提供给H5的API集合（所有API都是静态方法）
/**
* 自定义原生API
* webLoader：当前activity实例
* wv：当前webview实例
* param：参数，JSON对象
* callback：Callback类实例，真正调用H5的实例
*/
// 显示H5返回的内容到TextView组件
public static void changeContent(final Activity webLoader, WebView wv, JSONObject param,final Callback callback) {
final String origin = param.optString("origin");
final String content = param.optString("content");
TextView textView = webLoader.findViewById(R.id.textView);
textView.setText(origin +"：" + content);
}
public static void testNativeFunc(final Activity webLoader, WebView wv, JSONObject param, final Callback callback) {
// 调用一个静态方法，将H5传入的信息写入到TextView组件
BridgeImpl.changeContent(webLoader, wv, param, callback);
wv.post(new Runnable() {
public void run() {
// 封装好业务参数，并将其传递给callback对象
try {
JSONObject object =new JSONObject();
object.put("origin","native");
object.put("content","请把Native返回的信息在H5页面中展示出来");
callback.apply(JSBridge.getSuccessJSONObject(object));
}catch (JSONException e) {
e.printStackTrace();
}
}
});
}
第二步：实现一个Callback类（真正调用H5方法的功能类）
该类的一个作用有两个：标准化返回数据 & 调用H5方法。整个类有两个核心方法：apply方法（用来执行H5的回调函数）和call方法（用来主动调用h5方法）。
因为这两个方法的实现过程大致相同，我们就以apply方法为例，具体实现如下：
/**
* 执行H5的回调函数
* @param jsonObject
*/
public void apply(JSONObject jsonObject) {
// 第一步：标准化返回结果（一个包含responseId和responseData属性的对象）
JSONObject object =new JSONObject();
try {
object.put("responseId",mPort);
object.putOpt("responseData", jsonObject);
}catch (JSONException e) {
e.printStackTrace();
}
// 第二步：生成调用H5方法的字符串
final String execJs = String.format(CALLBACK_JS_FORMAT, String.valueOf(object));
// 第三步：执行H5回调
if (mWebViewRef !=null &&mWebViewRef.get() !=null ) {
// 如果activity已经关闭则不回调
....................
// mHandler是一个消息队列管理器，post方法用来将执行H5回调的操作放入到消息队列中
mHandler.post(new Runnable() {
@Override
public void run() {
// 执行H5回调
mWebViewRef.get().loadUrl(execJs);
}
});
}
}
第三步：实现一个JSBridge类（主要功能：三个属性和三个方法）
三个属性
private static final StringEJS_SCHEME ="customjsbridge"; // 自定义的schema名称，这个名称必须与JSBridge里面定义的schema名称一样
private static Map>exposedMethods =new HashMap<>(); // native暴露给h5的方法全部定义在这个map里面
private static WebView webView; // 记录当前的WebView对象
三个方法
register方法：将API集合注册到exposedMethods这个map中；
callJava方法：响应H5的方法；
callH5方法：用来主动调用H5中的方法；
接下来我们先来看看register方法：
/**
* 将api注册到缓存中
* @param exposedName: 某一类API集合的名称
* @param clazz: 这是一个类对象（不是实例对象），java中每创建一个类，在内存中就会有一个对应的类对象
*/
public static void register(String exposedName, Class clazz) {
if (!exposedMethods.containsKey(exposedName)) {
try {
exposedMethods.put(exposedName, getAllMethod(clazz));
}catch (Exception e) {
e.printStackTrace();
}
}
}
getAllMethod方法是定义在JSBridge类中的一个私有方法，用来从类对象中获取满足条件的方法集合。
看完了register方法我们再来看看callJava方法，这方法在WebViewClient的shouldOverrideUrlLoading中进行调用，用来响应H5：
/** *
* @param webLoader：当前activity
* @param webView：webview实例对象
* @param uriString：h5提交的url
* @return
*/
// 原生响应H5调用的方法
public static String callJava(Activity webLoader, WebView webView, String uriString) {
....... // 解析h5传过来的url
if (exposedMethods.containsKey(apiName)) {
HashMap methodHashMap =exposedMethods.get(apiName);
if (methodHashMap !=null && methodHashMap.size() !=0 && methodHashMap.containsKey(methodName)) {
Method method = methodHashMap.get(methodName);
if (method !=null) {
try {
// invoke方法的作用就是为方法先指定上下文，然后调用对应的方法。
// invoke的第一个参数就是被指定的上下文
method.invoke(null, webLoader, webView, new JSONObject(param),new Callback(webView, port));
}catch (Exception e) {
e.printStackTrace();
}
}
}
}else {
//未注册API
error = apiName +"未注册";
new Callback(webView, port).apply(getFailJSONObject(error));
return error;
}
return null;
}
最后是callH5方法，这方法用来让native主动调用h5的方法：
// 原生调用H5的方法
private static void callH5(String handlerName, JSONObject jsonObject){
new Callback(JSBridge.webView, null).call(handlerName, jsonObject);
}
结语
自此，我们已经Android实现的核心部分进行介绍，具体细节请查看git项目代码。
