【quickhybrid】JSBridge的实现

// 调用ui中alert的示例callHandler({ ???// 模块名，本文中的API划分了模块 ???module: 'ui', ???// 方法名 ???name: 'alert', ???// 需要传递给native的请求参数 ???data: { ???????message: 'hello', ???}, ???callback: function(res) { ???????/** ????????* 调用后的回调，接收原生传递的回调数据 ????????* alert如果成功，可以点击后再回调 ????????{ ???????????// 1成功/0失败 ???????????code: 1, ???????????message: '描述', ???????????// 数据 ???????????data: {}, ????????} ????????*/ ???}});

// H5端的内部逻辑处理window.JSBridge = {...}// 接收原生的调用，有回调以及主动调用两种JSBridge._handleMessageFromNative = function() {...}

// H5主动调用原生if (os.ios) { ???// ios采用 ???window.webkit.messageHandlers.WKWebViewJavascriptBridge.postMessage(...);} else { ???window.top.prompt(...);}

JSBridge = { ???// 本地注册的方法集合,原生只能主动调用本地注册的方法 ???messageHandlers: {}, ???// 短期回调函数集合，在原生调用完对应的方法后会自动删除回收 ???responseCallbacks: {}, ???// 长期存在的回调集合，可以多次调用 ???responseCallbacksLongTerm: {}, ???????_handleMessageFromNative: function(messageJSON) { ???????// 内部的处理： ???????????????／** ?????????如果是回调函数： ?????????如果是短期回调responseCallbacks中查询回调id，并执行，执行后自动销毁 ?????????如果是短期回调responseCallbacksLongTerm中查询回调id，并执行 ?????????*／ ???????????????????／** ?????????如果是Native的主动调用： ?????????去本地注册的方法池messageHandlers中搜索，并执行 ?????????*／ ???}, ???????callHandler: function(...) { ???????// 底层分别调用Android或iOS的原生接收方法 ???????????????// 如果是短期回调，会将回调添加到responseCallbacks中 ???????// 如果是长期回调，会将回调添加到responseCallbacksLongTerm中 ???????????????// 省略若干逻辑 ???????... ???????????????if (os.ios) { ???????????// ios采用 ???????????window.webkit.messageHandlers.WKWebViewJavascriptBridge.postMessage(...); ???????} else { ???????????window.top.prompt(...); ???????} ???}, ???????registerHandler: function(handlerName, handler) { ???????// H5在本地注册可供原生调用的方法 ???}, ???????...};

public class JSBridge { ???// 缓存所有的API模块（注册时添加进去） ???static exposedAPIModlues = ?new HashMap<>(); ???????static register(String apiModelName, Class<? extends IBridgeImpl> clazz) { ???????// 注册时会自动寻找所有的框架API模块，然后添加到缓存exposedAPIModlues，每一个模块中可以有若干API ???????// 每一个模块都需要实现IBridgeImpl接口 ???????... ???} ???????static callAPI(...) { ???????// 首先会解析参数（H5中传递的），解析出调用了哪一个API，传递了些什么，解析结果包括如下 ???????// port:H5传递的回调id，是responseCallbacks或responseCallbacksLongTerm中的key ???????// moduleName:调用的API的模块名，用来检索exposedAPIModlues中注册的模块 ???????// name:调用的API的方法名，在对于找到的模块中去查找API ???????// 其他:包括传递的参数等等 ???????????????// 然后会根据H5的回调端口号，生成一个回调对象（用来回调通知H5） ???????Callback callback = new Callback(port); ???????????????// 之后，根据解析的参数寻找API方法 ???????// java.lang.reflect.Method; ???????Method method = searchMethodBy(moduleName, name); ???????????????// 没有找到方法会回调对于错误信息 ???????// 否则执行对于的method，传递解析出的参数 ???????// 并且在method内部执行完毕后主动回调给H5对于信息 ???????method.invoke(..., callback); ???}}

public class Callback { ???apply(...) { ???????// 先解析拼装参数，然后将参数组装成javascript代码，参数中包含Callback对于的port值（回调id） ???????... ???????String js = javascript:JSBridge._handleMessageFromNative(对于的json参数); ???????????????callJS(js); ???} ???callHandler(...) { ???????// 主动调用H5，封装的参数中不再是回调id，而是handleName ???????... ???????callJS(js); ???} ???callJS(js) { ???????// 底层通过loadUrl执行 ???????... ???????webviewContext.loadUrl(js); ???}}

// 为了清晰，以ui.alert为例public class xxxApi implements IBridgeImpl { ???// 定义一个注册的模块别名，方便查找，譬如ui ???static RegisterName = "ui"; ???????// 模块中的某个API，譬如alert ???public static void alert(..., Callback callback) { ???????// 接下来就是在这个API中实现对于的逻辑 ???????... ???????// 最后，通过触发callback通知H5即可 ???????callback.apply(...); ???}}

public class XXXWebChromeClient extends WebChromeClient { ???@Override ???public boolean onJsPrompt(..., JsPromptResult result) { ???????// 内部触发JSBridge.callJava ???????result.confirm(JSBridge.callJava(...)); ???????return true; ???}}

@implementation WKWebViewJavascriptBridge { ???// 内部基于一个WebViewJavascriptBridgeBase基类（基类中定义交互方法） ???WebViewJavascriptBridgeBase *_base; ???}/** * API */- (void)callHandler:(NSString *)handlerName data:(id)data { ???// 主动调用H5的方法 ???// 底层调用_base的sendData，发送数据给H5}- (void)registerModuleFrameAPI { ???// 注册模块API，模块用到了别名代理 ???[self registerHandlersWithClassName:@"UIApi" moduleName:@"ui"]; ???????// 其中registerHandlersWithClassName就是将模块示例化注册到全局中的作用，不赘述}- (void)excuteMessage:(NSString *)message { ???// 内部执行API的实现，这里会解析API解析出来的数据，如 ???// module.name,port(callbackid)等 ???... ???// 然后底层调用_base的excuteMsg（它内部会根据注册的API，找到相对应的，然后执行原生功能，最后通过回调通知H5）}#pragma mark - WKScriptMessageHandler其实就是一个遵循的协议，它能让网页通过JS把消息发送给OC- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { ???// 监听到对于API调用时，底层会调用excuteMessage ???if ([message.name isEqualToString:@"WKWebViewJavascriptBridge"]) { ???????[self excuteMessage:message.body]; ???}}

@implementation WebViewJavascriptBridgeBase- (void)sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName { ???// 底层将接收到的数据组装成js代码执行 ???... ???NSString* javascriptCommand = [NSString stringWithFormat:@"JSBridge._handleMessageFromNative('%@');", messageJSON]; ???????[_webView evaluateJavaScript:javascriptCommand completionHandler:nil];}- (void)excuteMsg:(NSString *)messageQueueString moduleName:(NSString *)moduleName { ???// 底层根据对于的模块，API名，找到注册的handler ???... ???????// 然后创建一个回调对象 ???WVJBResponseCallback responseCallback = (通过sendData通知H5回调数据); ???????// 然后执行这个handler ???handler(message[@"data"], responseCallback);}

@implementation RegisterBaseClass#pragma mark - 注册api的统一方法- (void)registerHandlers { ???// 子类重写改方法实现自定义API注册}#pragma mark - handler存取- (void)registerHandlerName:(NSString *)handleName ???????????????????handler:(WVJBHandler)handler { ???// 注册某个模块下的某个API}- (WVJBHandler)handler:(NSString *)handlerName { ???// 通过名称获取对应的API}

@implementation UIApi- (void)registerHandlers { ???[self registerHandlerName:@"alert" handler:^(id data, WVJBResponseCallback responseCallback) { ???????// 同样，在接收到数据，并处理后，通过responseCallback通知H5 ???????... ???????responseCallback(...); ???}}

WKWebViewConfiguration * webConfig = [[WKWebViewConfiguration alloc] init];WKUserContentController * userContentVC = [[WKUserContentController alloc] init];webConfig.userContentController = userContentVC;WKWebView * wk = [[WKWebView alloc] initWithFrame: CGRectZero configuration: webConfig];self.wv = wk;...// 代理self.bridge = [WKWebViewJavascriptBridge bridgeForWebView: self.wv];[self.bridge setWebViewDelegate: self];// 添加供js调用oc的桥梁。这里的name对应WKScriptMessage中的name，多数情况下我们认为它就是方法名。[self.wv.configuration.userContentController addScriptMessageHandler: self.bridge name: @"WKWebViewJavascriptBridge"];