原生与JS交互 iOS

 

前言

Hybrid App（混合模式移动应用）是指介于web-app、native-app这二者之间的app，兼具“Native App良好用户交互体验的优点”和“Web App跨平台开发的优点”。谈到Hybrid App，JS与Native code的交互就是一个绕不开的话题，这时就须要“一座桥”来链接两端。
JSBridge架起了一座链接JavaScript与Native Code的桥梁，让两端能够相互调用。

 

JSBridge.png

本文基于UIWebView，将会分别介绍3种方案。经过Iframe、Ajax、JSCore来实现JSBridge，涉及到的Demo地址，顺手给个Star呗😏。

实现方案

Iframe

废话很少说，直入主题，首先讲的这种方案比较常见。WebViewJavascriptBridge与Cordava都是采用的该方案（推荐看看我以前的文章Cordova源码解析）。
核心思路就是在UIWebView拦截Iframe的src，双方提早约定好协议，例如https://__jsbridge__就是一次调用开始。
能够学习Cordova的策略，将并发的屡次调用打包合并为一次处理，能够优化性能。

实现

1.JS暴露一个方法给Native，接收执行结果

function responseFromObjC(response) { if (!callback) { return; } callback(response); } 

2.Native实现UIWebView的代理，在webView:shouldStartLoadWithRequest:navigationType:方法拦截请求，识别到特定URL，开始一次调用流程。

// 拦截JS调用原生核心方法 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSURL *url = request.URL; // 判断url是不是JSBridge调用 if ([url.host isEqualToString:@"__jsbridge__"]) { // 处理JS调用Native return NO; } return YES; } 

3.JS开启一个Iframe，加载一个特定的URL，开始一次调用

var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = 'https://__jsbridge__?action='+ action + '&data=' + data; document.documentElement.appendChild(iframe); 

4.Native方法执行完成后，调用JS方法responseFromObjC将结果回传给JS。

...
// 获取调用参数，demo的调用方式是：'https://__jsbridge__?action=action&data=' // 参数直接放在query里面的，更好的方案是js暴露一个方法给原生，原生调用方法获取数据 NSURLComponents *urlComponents = [NSURLComponents componentsWithURL:url resolvingAgainstBaseURL:YES]; NSArray *queryItems = urlComponents.queryItems; NSMutableDictionary *params = [NSMutableDictionary dictionary]; for (NSURLQueryItem *queryItem in queryItems) { NSString *key = queryItem.name; NSString *value = queryItem.value; [params setObject:value forKey:key]; } NSString *action = params[@"action"]; NSString *data = params[@"data"]; if ([action isEqualToString:@"alertMessage"]) { // 调用原生方法，获取数据 // js暴露方法`responseFromObjC`给原生，原生经过该方法回调 // 在实际项目中，为了实现实现js并发原生方法，最好带一个callBackID，来区分不一样的调用 [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"responseFromObjC('%@')", data]]; } else { [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"responseFromObjC('Unkown action'"]]; } 

PS:demo代码为了简化，直接将参数放在URL的query里，若是只传输一些简单数据是没有问题的，更好的方案是JS先将参数存放起来，经过URL传递一个key给Native，再暴露一个经过key取数据的方法，Native主动调用这个方法取。

Ajax

第二种方案是JS使用XMLHttpRequest发起请求，在Native拦截达到调用的目的。经过自定义NSURLProtocol能够拦截到Ajax请求。Demo里有详细的代码和注释，建议结合Demo一块儿看。

实现

1.新建类继承自NSURLProtocol，并注册。

[NSURLProtocol registerClass:[CRURLProtocol class]]; 

2.实现自定义NSURLProtocol，在startLoading方法拦截Ajax请求

- (void)startLoading { NSURL *url = [[self request] URL]; // 拦截“http://__jsbridge__”请求 if ([url.host isEqualToString:@"__jsbridge__"]) { // 处理JS调用Native } } 

3.JS发起Ajax请求，URL为提早约定的特殊值，例如：http://jsbridge。请求参数放在Request Body里。

// 调用原生 function callNative(action, data) { var xhr = new window.XMLHttpRequest(), url = 'http://__jsbridge__'; xhr.open('POST', url, false); xhr.send(JSON.stringify({ action: action, data: data })); return xhr.responseText; } 

4.Naive拦截到请求，获取参数，执行Native方法，最后经过Ajax的Response把结果返回给JS。

...
// 2. 从HTTPBody中取出调用参数 NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:self.request.HTTPBody options:NSJSONReadingAllowFragments error:nil]; NSString *action = dic[@"action"]; NSString *data = dic[@"data"]; NSData *responseData; // 3. 根据action转发到不一样方法处理，param携带参数 if ([action isEqualToString:@"alertMessage"]) { responseData = [data dataUsingEncoding:NSUTF8StringEncoding]; } else { responseData = [@"Unknown action" dataUsingEncoding:NSUTF8StringEncoding]; } // 4. 处理完成，将结果返回给js [self sendResponseWithResponseCode:200 data:responseData mimeType:@"text/html"]; ... - (void)sendResponseWithResponseCode:(NSInteger)statusCode data:(NSData*)data mimeType:(NSString*)mimeType { NSHTTPURLResponse* response = [[NSHTTPURLResponse alloc] initWithURL:[[self request] URL] statusCode:statusCode HTTPVersion:@"HTTP/1.1" headerFields:@{@"Content-Type" : mimeType}]; [[self client] URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageNotAllowed]; if (data != nil) { [[self client] URLProtocol:self didLoadData:data]; } [[self client] URLProtocolDidFinishLoading:self]; } 

JSCore

前两种方案虽然实现方法不一致，可是思路都是相似的，因为JS不能直接调用Native方法，经过曲线救国的方式，找到一个载体来传递信息。
第三种方案就比较直接了，使用iOS7推出的黑科技JavaScriptCore，将Native方法直接暴露给JS，打通两端的数据通道。谈到JavaScriptCore不得不说的是bang590的JSPatch，还有ReactNative、Weex等都是利用JavaScriptCore来实现各类炫酷的功能。(强力推荐一本Lefe_x的书《一份走心的JS-Native交互电子书》，很是精彩)。
不过这种方案有个缺陷，UIWebView没有暴露JSContext，虽然能够经过KVC拿到，可是毕竟不是一种完美的解决方案，不知道上架会不会有风险（求知道的同窗指教一下）。

实现

实现流程就不细说了，流程比较简单，Demo里面有。说说关键实现代码

- (void)injectJSBridge { // 获取JSContext JSContext *context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; // 给JS注入方法callNative context[@"callNative"] = ^(JSValue *action, JSValue *data) { NSString *actionStr = [action toString]; NSString *dataStr = [data toString]; if ([actionStr isEqualToString:@"alertMessage"]) { return dataStr; } else { return @"Unkown action"; } }; } 

JS调用很是简单，一句话搞定。

callNative("alertMessage", "Hello world!") 

性能对比

为了验证三种方案的性能，设计了个简单的实验，分别执行了100、1000、10000次调用，测试手机iPhone X，系统iOS 12，时间对好比下图所示。
先说结论，JSCore的性能是最优的，JSCore>Ajax>Iframe。在低并发的时候三种方案差距不大，执行次数10000次时Iframe效率就很低了，Ajax次之，JSCore性能很稳定。固然实际使用的时候不会出现调用10000次这种极限状况。
Cordova对于并发有个优化策略，很值得参考，将并发的屡次调用打包合并为一次处理。

 

15401284999756.jpg

---

 

 

转自：https://www.jianshu.com/p/eff176e220e0