现在其实很多app采用了hybrid混合编程，所以jsbridge的使用也变成了一个android程序员所必须的技能，github上也有很多优秀的jsbridge框架。
如：
https://github.com/lzyzsd/JsBridge
我自己本身也在使用。但是本身可能对其源码实现没有过多的关注。
所以打算自己也能实现一个。
这里先附上我自己的jsbridge，觉得还可以麻烦点个赞哦。
https://github.com/javalong/jsbridge
README还没写，近期补上。
有demo
这里我先大致讲下使用的方法。
使用方法
js端
document.addEventListener(
'onBridgeLoaded', function () {
Bridge.registerHandler("testNative", function (data, callback) {
console.log("native成功调用js中注册的方法testNative")
callback(data);
})
})
document.getElementById("testJs callAsyncHandler").onclick = function () {
Bridge.callAsyncHandler("testJs", {a: "111111", b: "ccc"}, function (responseData) {
console.log("js异步调用native中的注册方法testJs,native执行注册方法时回调callback方法，并传入参数:" + responseData);
})
Bridge.callAsyncHandler("testJs", {a: "2222222", b: "www"}, function (responseData) {
console.log("js异步调用native中的注册方法testJs,native执行注册方法时回调callback方法，并传入参数:" + responseData);
})
}
document.getElementById("testJs callSyncHandler").onclick = function () {
Bridge.callSyncHandler("testJs", {a: "aaa", b: "ccc"}, function (responseData) {
console.log("js同步调用native中的注册方法testJs,native执行注册方法时回调callback方法，并传入参数:" + responseData);
})
Bridge.callSyncHandler("testJs", {a: "vvv", b: "www"}, function (responseData) {
console.log("js同步调用native中的注册方法testJs,native执行注册方法时回调callback方法，并传入参数:" + responseData);
})
}
猛的一看可能会觉得跟上面提到的jsbridge的使用方式大同小异，确实使有所借鉴。但是肯定不使抄咯，都使自己写的，可能有些地方有参考。
使用注意事项:
-
jsbridge加载完成后会触发
onBridgeLoaded事件。在这之前是没有Bridge这个对象的。所以可以把相关的js方法都写在onBridgeLoaded触发的方法内。
如果是在点击按钮时去调用Bridge这个对象，那么不写在onBridgeLoaded触发的方法内，也是可以的，因为当你可以点击按钮的时候，一般情况下，onBridgeLoaded肯定是触发了的。 -
jsbridge主要的方法有这么几个
registerHandler,call**Handler。
registerHandler其实就是注册方法提供给native端调用。而call**Handler呢则是调用native端注册的方法。这里需要说明的是。call**Handler有callSyncHandler（同步调用）,callAsyncHandler（异步调用）。
callSyncHandler ：会把消息放入队列，等待一个消息执行完成后，再去执行另外一个消息，（执行完成的标志为，这个消息对应的callback方法执行完成。）
callaAsyncHandler: 调用后会把消息放入队列，然后等待一段很短的时间，因为在这段短时间内可能又会调用多次callaAsyncHandler。等待时间到了，把消息队列中的所有的消息拼成字符串，一起发送给native端。 -
native端的代码其实是跟js端的代码非常相似，但是有一些不同。这里我把不同的地方说明下。-
为了方便，
native端可以在bridge未加载成功的时候去调用BridgeHelper.registerHandler还有BridgeHelper.call**Handler。
原因：registerHandler其实还好，主要是BridgeHelper.call**Handler，就算你调用了,由于js端的Bridge并未加载完成，所以是调用失败的。这里之所以能够这样调用，是因为，我先把消息存放在队列，然后收到Bridge加载成功的事件后 马上处理这些消息，造成了可以直接使用的假象，但是相对来说使用起来会比较方便。 -
native端调用callAsyncHandler的时候，是不存放在队列中等待一段短时间的，而是直接发送消息。js中使用等待一段短时间，然后一起发送消息的原因是因为，我使用的是location.href与native进行交互，频繁改变location.href可能只会有一次生效，这样会造成消息丢失。但是native端不会，为了保证消息的时效性，还是直接发送会比较好。
-
-
native中使用BridgeHelper对象最好是一个BridgeHelper对应一个WebView,不然可能会有问题。还有使用BridgeHelper之前要调用init初始化。
js端使用起来，其实也是比较简单的，我就不过多介绍了。
下面我贴出native端的使用代码，其实是差不多的。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//这里开启debug模式 可以在chrome中进行调试
WebView.setWebContentsDebuggingEnabled(true)
webView.settings.javaScriptEnabled = true
var helper = BridgeHelper()
var handler = Handler()
//这里的webViewClient可以实现自己的做一些特殊的处理
helper.init(webView, null)
//注册方法提供给js端调用
helper.registerHandler("testJs", object : BridgeHandler {
override fun call(data: JSONObject, callback: ResponseCallback) {
Toast.makeText(this@MainActivity, data.toJSONString(), Toast.LENGTH_LONG).show()
var mockData = JSONObject()
mockData.put("data1", "aaa")
mockData.put("data2", "sss")
//这里延迟，可以使调用同步方法和调用异步方法的效果更加明显
handler.postDelayed(Runnable { callback.call(mockData) }, 2000)
Log.e(TAG, "js成功调用native中注册的方法testJs")
}
})
webView.loadUrl("file:///android_asset/test.html")
var mockData1 = JSONObject()
mockData1.put("data1", "111")
mockData1.put("data2", "222")
//异步调用js方法
helper.callAsyncHandler("testNative", mockData1, object : ResponseCallback {
override fun call(data: JSONObject?) {
Log.e(TAG, "native异步调用js中注册的方法testNative,js在执行注册方法时回调callback方法，并传入参数:" + data?.toJSONString())
}
})
var mockData2 = JSONObject()
mockData2.put("data1", "333")
mockData2.put("data2", "4444")
//异步调用js方法
helper.callAsyncHandler("testNative", mockData2, object : ResponseCallback {
override fun call(data: JSONObject?) {
Log.e(TAG, "native异步调用js中注册的方法testNative,js在执行注册方法时回调callback方法，并传入参数:" + data?.toJSONString())
}
})
//同步调用js方法
helper.callSyncHandler("testNative", mockData1, object : ResponseCallback {
override fun call(data: JSONObject?) {
Log.e(TAG, "native同步调用js中注册的方法testNative,js在执行注册方法时回调callback方法，并传入参数:" + data?.toJSONString())
}
})
//同步调用js方法
helper.callSyncHandler("testNative", mockData2, object : ResponseCallback {
override fun call(data: JSONObject?) {
Log.e(TAG, "native同步调用js中注册的方法testNative,js在执行注册方法时回调callback方法，并传入参数:" + data?.toJSONString())
}
})
btTestNative.setOnClickListener({
var a = JSONObject()
a.put("a", "111")
a.put("v", "222")
helper.callAsyncHandler("testNative", a, object : ResponseCallback {
override fun call(data: JSONObject?) {
Log.e(TAG, "native同步调用js中注册的方法testNative,js在执行注册方法时回调callback方法，并传入参数:" + data?.toJSONString())
}
})
var b = JSONObject()
b.put("a", "333")
b.put("v", "4444")
helper.callAsyncHandler("testNative", b, object : ResponseCallback {
override fun call(data: JSONObject?) {
Log.e(TAG, "native同步调用js中注册的方法testNative,js在执行注册方法时回调callback方法，并传入参数:" + data?.toJSONString())
}
})
})
}
注释应该比较清楚了，如果不太清楚的可以留言，由于是最近写出来的，可能会有一些bug，所以如果用在商业项目中，希望大家谨慎。最近我会再写一篇整体的架构分析，希望能帮助大家更好的理解。
网友评论