Hybrid App: 看看第三方WebViewJavascriptBridge是如何来实现Native和JavaScript交互
一、简介
在前面两篇文章中已经介绍了Native与JavaScript交互的几种方式，依次是JavaScriptCore框架、UI组件UIWebView、WebKit框架，这几种方式都是苹果公司提供的，除了UIWebView在IOS8之后被苹果淘汰了外，其他基本都能很好地满足开发者的使用。作为一个技术人员，每个人心里都有造轮子的想法，可能有时觉得原生的API使用起来感觉还是不够方便，就对苹果原生的API再进行一层封装，这不WebViewJavascriptBridge这个轮子出来了。WebViewJavascriptBridge的star和fork量还是比较高的，仔细看看WebViewJavascriptBridge类文件相当简单，使用起来也很方便，很受开发者欢迎，它的原理还是利用WKWebView或者UIWebView的相关API，通过bridge桥梁来实现OC与JS互相注册和调用。大致结构图如下：
可以看出：OC调用JS，JS需要注册函数； JS调用OC，OC需要注册函数。
二、分析
了解基本原理结构图后，再来看看框架中的类以及它们的作用定义，如下：
WebViewJavascriptBridge_JS：Javascript环境的Bridge初始化和处理。负责接收OC发给Javascript的消息，并且把Javascript环境的消息发送给OC。
WKWebViewJavascriptBridge/WebViewJavascriptBridge：主要负责OC环境的消息处理，并且把OC环境的消息发送给Javascript环境。
WebViewJavascriptBridgeBase：主要实现了OC环境的Bridge初始化和处理。
//初始化桥接器+ (instancetype)bridgeForWebView:(id)webView; + (instancetype)bridge:(id)webView; //设置日志相关+ (void)enableLogging; + (void)setLogMaxLength:(int)length; //注册函数, handlerName: 函数名称 handler：传递数据的block- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler; - (void)removeHandler:(NSString*)handlerName; //调用函数, handlerName:函数名称 data:参数 responseCallback：接收数据的block - (void)callHandler:(NSString*)handlerName; - (void)callHandler:(NSString*)handlerName data:(id)data; - (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback; //设置网页代理- (void)setWebViewDelegate:(id)webViewDelegate; //禁用超时安全弹框- (void)disableJavscriptAlertBoxSafetyTimeout;
调用相关知识点 :
// OC 调用 JS
// 1、单纯的调用 JSFunction。[self.jsBridge callHandler:@"JSFunction"]; // 2、调用 JSFunction，并传递给js需要的参数，但不需要 JSFunciton 的返回值。[self.jsBridge callHandler:@"JSFunction" data:"arg of js"]; // 3、调用 JSFunction ，并传递给js需要的参数，也需要 JSFunction 的返回值。[self.jsBridge callHandler:@"JSFunction" data:"arg of js" responseCallback:^(id responseData) { NSLog(@"%@",responseData); }]; // ------------------------------------------------------------------------------- // //JS 调用 OC // 1、JS 单纯的调用 OC 的 OCMethodWebViewJavascriptBridge.callHandler('OCMethod'); // 2、JS 调用 OC 的 OCMethod，并传递给OC需要的参数WebViewJavascriptBridge.callHandler('OCMethod',"arg of oc");