一、背景
最近接触公司项目，需要和原生app做交互，由此业务需求，开始了学习探索之路。
二、解决方案之WebViewJavascriptBridge
想要和app交互，必须在app上先把bridge进行实例化，这是先决条件。
oc解决方案
步骤
1、引入文件
#import "WebViewJavascriptBridge.h"
@property WebViewJavascriptBridge* bridge;
2、实例化WebViewJavascriptBridge
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
3、在oc中注册一个函数，并调用一个js处理函数
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"ObjC Echo called with: %@", data); responseCallback(data);}];[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) { NSLog(@"ObjC received response: %@", responseData);}]; 4、把这段js代码放入前端js或者页面中
1 function setupWebViewJavascriptBridge(callback) { 2 if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } 3 if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } 4 window.WVJBCallbacks = [callback]; 5 // 创建iframe 对象， 在网页中，iframe的用法非常多，主要应用于伪ajax、嵌套页面、页面重用。 6 var WVJBIframe = document.createElement('iframe'); 7 WVJBIframe.style.display = 'none'; 8 WVJBIframe.src = 'https://__bridge_loaded__'; 9 document.documentElement.appendChild(WVJBIframe);10 //保证前面的代码执行完再删除这个iframe节点，11 //setTimeout (fn,0)12 //同步代码转异步代码，这是为了手动调配优先级不高的代码靠后执行。保证当前处于事件队列中的任务全部执行完后该任务(函数)立刻得到执行。13 setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)14 } 5、在前端调用
setupWebViewJavascriptBridge(function(bridge) { /* Initialize your app here */ bridge.registerHandler('JS Echo', function(data, responseCallback) { console.log("JS Echo called with:", data) responseCallback(data) }) bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) { console.log("JS received response:", responseData) })}) API
oc调用js
// OC端 向 JS端 传数据的回调函数， 注册 registerHandler（标识符， 数据回调闭包）， 当OC端发起数据传送，会调用 function(数据, OC端给的回调函数) --------->handlerName要和OC端保持一致
bridge.registerHandler("handlerName", function(responseData) { ... }) js调用oc
bridge.callHandler("handlerName", data) // JS端 向 OC端 传数据的方式，callHandler（方法标识符， 数据， 回调） ---------->testObjcCallback要和OC端保持一致
bridge.callHandler("handlerName", data, function responseCallback(responseData) { ... }) bridge.disableJavscriptAlertBoxSafetyTimeout() 总结
交互前需要先对OC环境和JS环境进行初始化，JS环境的初始化通过Web页面加载时发送特定的URL来完成。
WebViewJavascriptBridge在OC端和JS端各自维护一个bridge对象来保存开放给另一端的方法，以及自身调用另一端后的回调方法。前者通过handlerName来映射，后者通过callBackId标识唯一性。方法调用时必定携带handlerName，若需要回调，还需携带callBackId。
WebViewJavascriptBridge中OC调用JS采用的是WebView提供的JS执行方法；而JS调用OC采用的是URL拦截的方式，OC端通过识别特定的URL来区分是否需要拦截，并做相应的逻辑处理。
android解决方案
安卓版插件传送门https://github.com/gzsll/WebViewJavascriptBridge，原理基本一致，没有深入研究。
思考
WebViewJavascriptBridge还需要做IOS和Android的兼容，那么，还有没有更好的方案呢？功夫不负有心人，我找到了DSBridge
三、解决方案之DSBridge
dsbridge最大的特点就是支持同步！中文文档传送门：https://github.com/wendux/DSBridge-Android/blob/master/readme-chs.md
文章写的比较浅，如有纰漏，欢迎指正，如果有更好方案，欢迎留言。