iOS H5容器的一些探究（一）：UIWebView和WKWeb
一、Native开发中为什么需要H5容器
Native开发原生应用是手机操作系统厂商（目前主要是苹果的iOS和google的Android）对外界提供的标准化的开发模式，他们对于native开发提供了一套标准化实现和优化方案。但是他们存在一些硬伤，比如App的发版周期偏长、有时无法跟上产品的更新节奏；灵活性差，如果有较大的方案变更，需要发版才能解决；如果存在bug，在当前版本修复的难度比较大（iOS的JSPatch方案和Android的Dex修复方案）;需要根据不同的平台写不同的代码，iOS主要为object_c和swift，android为Java。
而作为H5为主要开发模式的Web App的灵活性就比较强，他利用操作系统中的h5容器作为一个承载，对外提供一个url链接，而该url链接对应的内容可以实时在服务端进行修改，灵活行很强，避免了Native发版周期带来的时间成本。但是h5虽然灵活，但是他也有自己的硬伤。每次都需要下载完整的UI数据（html，css，js），弱网用户体验较差，流量消耗较大；无法调用系统文件系统，硬件资源等等；
Native App和Web App都有他们的优势和劣势。我们也不能一棍子拍死说谁好谁劣。通常的经验是：对于一些比较稳当的业务，对用户体验要求较高的，我们可以选择Native开发。而对于一些业务变更比较快、处在不断试水的过程，而且不涉及调用文件系统和硬件调用的业务我们可以选择h5开发。所以说，在一款app中我们需要同时支持Native代码和h5代码。这也是我们标题所说的Native开发中需要H5容器的必要性。
iOS存在的h5容器主要包括UIWebView和WKWebView，下面我们就分别来说说他们的用法和优劣。
二、UIWebView的基本用法
2.1、加载网页
UIWebView*webView = [[UIWebViewalloc] initWithFrame:self.view.bounds]; webView.delegate =self; [self.view addSubview:webView];//网络地址NSURL*url = [[NSURLalloc] initWithString:@"http://www.taobao.com"];NSURLRequest*request = [NSURLRequestrequestWithURL:url]; [webView loadRequest:request];
2.2、UIWebViewDelegate几个常用的代理方法
//进行加载前的预判断，如果返回YES，则会进入后续流程（StartLoad,FinishLoad）。如果返回NO，这不会进入后续流程。- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType;//开始加载网页- (void)webViewDidStartLoad:(UIWebView*)webView;//加载完成- (void)webViewDidFinishLoad:(UIWebView*)webView;//加载失败- (void)webView:(UIWebView*)webView didFailLoadWithError:(nullableNSError*)error;
2.3、Native调用JS中的方法
比如我们在加载的HTML文件中有如下js代码：
functionhello(){ alert("你好！");}functionhelloWithName(name){ alert(name +"，你好！");}
我们可以调用- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;函数进行js调用。
[webView stringByEvaluatingJavaScriptFromString:@"hello()"];[webView stringByEvaluatingJavaScriptFromString:@"helloWithName('jack')"];
js代码不一定要在js文件中预留，也可以在代码中通过字符串的形式进行调用，比如下面：
//自定义js函数NSString*jsString =@"function sayHello(){ \
alert('jack11') \
} \
sayHello()"; [_webView stringByEvaluatingJavaScriptFromString:jsString];NSString*jsString =@" var p = document.createElement('p'); \
p.innerText = 'New Line'; \
document.body.appendChild(p); \
"; [_webView stringByEvaluatingJavaScriptFromString:jsString];
2.4、JS中调用Naitve的方法
具体让js通知native进行方法调用，我们可以让js产生一个特殊的请求。可以让Native代码可以拦截到，而且不然用户察觉。业界一般的实现方案是在网页中加载一个隐藏的iframe来实现该功能。通过将iframe的src指定为一个特殊的URL，实现在- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;方案中进行拦截处理。对应的js调用代码如下：
functionloadURL(url){variFrame; iFrame =document.createElement("iframe"); iFrame.setAttribute("src", url); iFrame.setAttribute("style","display:none;"); iFrame.setAttribute("height","0px"); iFrame.setAttribute("width","0px"); iFrame.setAttribute("frameborder","0");document.body.appendChild(iFrame);// 发起请求后这个iFrame就没用了，所以把它从dom上移除掉iFrame.parentNode.removeChild(iFrame); iFrame =null; }
比如我们在js代码中，调用一下两个js方法：
functioniOS_alert(){//调用自定义对话框loadURL("alert://abc"); }functioncall(){// js中进行拨打电话处理loadURL("tel://17715022071"); }
当你触发以上方法的时候，就会进入webview的代理方法中进行拦截。
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{NSURL* url = [request URL];if([[url scheme] isEqualToString:@"alert"]) {//拦截请求，弹出自定义对话框UIAlertView* alertView = [[UIAlertViewalloc] initWithTitle:@"test"message:[url host] delegate:nilcancelButtonTitle:@"OK"otherButtonTitles:nil]; [alertView show];returnNO; }elseif([[url scheme] isEqualToString:@"tel"]){//拦截拨打电话请求BOOLresult = [[UIApplicationsharedApplication] openURL:url];if(!result) {NSLog(@"您的设备不支持打电话"); }else{NSLog(@"电话打了"); }returnNO; }returnYES;}
这样我们就可以让js进行native的调用。
三、WKWebView的基本用法
3.1、加载网页
WKWebView*webView = [[WKWebViewalloc] initWithFrame:[UIScreenmainScreen].bounds];NSURL*url = [NSURLURLWithString:@"http://www.taobao.com"];NSURLRequest*request = [NSURLRequestrequestWithURL:url]; [webView loadRequest:request]; [self.view addSubview:webView];
3.2、几个常用的代理方法
/**
* 根据webView、navigationAction相关信息决定这次跳转是否可以继续进行,这些信息包含HTTP发送请求，如头部包含User-Agent,Accept,refer
* 在发送请求之前，决定是否跳转的代理
* @param webView
* @param navigationAction
* @param decisionHandler
*/- (void)webView:(WKWebView*)webView decidePolicyForNavigationAction:(WKNavigationAction*)navigationAction decisionHandler:(void(^)(WKNavigationActionPolicy))decisionHandler{ decisionHandler(WKNavigationActionPolicyAllow);}/**
* 这个代理方法表示当客户端收到服务器的响应头，根据response相关信息，可以决定这次跳转是否可以继续进行。
* 在收到响应后，决定是否跳转的代理
* @param webView
* @param navigationResponse
* @param decisionHandler
*/- (void)webView:(WKWebView*)webView decidePolicyForNavigationResponse:(WKNavigationResponse*)navigationResponse decisionHandler:(void(^)(WKNavigationResponsePolicy))decisionHandler{ decisionHandler(WKNavigationResponsePolicyAllow);}/**
* 准备加载页面。等同于UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
*
* @param webView
* @param navigation
*/- (void)webView:(WKWebView*)webView didStartProvisionalNavigation:(null_unspecifiedWKNavigation*)navigation{}/**
* 这个代理是服务器redirect时调用
* 接收到服务器跳转请求的代理
* @param webView
* @param navigation
*/- (void)webView:(WKWebView*)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecifiedWKNavigation*)navigation{ }- (void)webView:(WKWebView*)webView didFailProvisionalNavigation:(null_unspecifiedWKNavigation*)navigation withError:(NSError*)error{ }/**
* 内容开始加载. 等同于UIWebViewDelegate: - webViewDidStartLoad:
*
* @param webView
* @param navigation
*/- (void)webView:(WKWebView*)webView didCommitNavigation:(null_unspecifiedWKNavigation*)navigation{ }/**
* 页面加载完成。 等同于UIWebViewDelegate: - webViewDidFinishLoad:
*
* @param webView
* @param navigation
*/- (void)webView:(WKWebView*)webView didFinishNavigation:(null_unspecifiedWKNavigation*)navigation{ }/**
* 页面加载失败。 等同于UIWebViewDelegate: - webView:didFailLoadWithError:
*
* @param webView
* @param navigation
* @param error
*/- (void)webView:(WKWebView*)webView didFailNavigation:(null_unspecifiedWKNavigation*)navigation withError:(NSError*)error{ }- (void)webViewWebContentProcessDidTerminate:(WKWebView*)webViewNS_AVAILABLE(10_11,9_0){ }/*
我们看看WKUIDelegate的几个代理方法，虽然不是必须实现的，但是如果我们的页面中有调用了js的alert、confirm、prompt方法，我们应该实现下面这几个代理方法，然后在原来这里调用native的弹出窗，因为使用WKWebView后，HTML中的alert、confirm、prompt方法调用是不会再弹出窗口了，只是转化成ios的native回调代理方法
*/#pragma mark - WKUIDelegate- (void)webView:(WKWebView*)webView runJavaScriptAlertPanelWithMessage:(NSString*)message initiatedByFrame:(WKFrameInfo*)frame completionHandler:(void(^)(void))completionHandler{UIAlertController*alertView = [UIAlertControlleralertControllerWithTitle:@"h5Container"message:message preferredStyle:UIAlertControllerStyleAlert];// [alertView addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {// textField.textColor = [UIColor redColor];// }];[alertView addAction:[UIAlertActionactionWithTitle:@"我很确定"style:UIAlertActionStyleDefaulthandler:^(UIAlertAction* _Nonnull action) { completionHandler(); }]]; [selfpresentViewController:alertView animated:YEScompletion:nil];}
显然WKWebView的代理方法提供了比UIWebView颗粒度更细的方法。让开发者可以进行更加细致的配置和处理。
3.3 、Native调用JS中的方法
WKWebView提供的调用js代码的函数是：
- (void)evaluateJavaScript:(NSString*)javaScriptString completionHandler:(void(^ __nullable)(__nullableid,NSError* __nullableerror))completionHandler;
比如我们在加载的HTML文件中有如下js代码：
functionhello(){ alert("你好！");}functionhelloWithName(name){ alert(name +"，你好！");}
我们可以调用如下代码进行js的调用：
[_wkView evaluateJavaScript:@"hello()"completionHandler:^(iditem,NSError* error) { }]; [_wkView evaluateJavaScript:@"helloWithName('jack')"completionHandler:^(iditem,NSError*error) { }];
同UIWebView一样，我们也可以通过字符串的形式进行js调用。
NSString*jsString =@"function sayHello(){ \
alert('jack11') \
} \
sayHello()"; [_wkView evaluateJavaScript:jsString completionHandler:^(iditem,NSError*error) { }]; jsString =@" var p = document.createElement('p'); \
p.innerText = 'New Line'; \
document.body.appendChild(p); \
"; [_wkView evaluateJavaScript:jsString completionHandler:^(iditem,NSError*error) { }];
3.4、JS中调用Naitve的方法
除了和UIWebView加载一个隐藏的ifame之外，WKWebView自身还提供了一套js调用native的规范。
我们可以在初始化WKWebView的时候，给他设置一个config参数。
//高端配置//创建配置WKWebViewConfiguration*config = [[WKWebViewConfigurationalloc] init];//创建UserContentController(提供javaScript向webView发送消息的方法)WKUserContentController*userContent = [[WKUserContentControlleralloc] init];//添加消息处理，注意：self指代的是需要遵守WKScriptMessageHandler协议，结束时需要移除[userContent addScriptMessageHandler:selfname:@"NativeMethod"];//将UserContentController设置到配置文件中config.userContentController = userContent;//高端的自定义配置创建WKWebView_wkView = [[YXWKView alloc] initWithFrame:self.view.bounds configuration:config];NSURL*url = [NSURLURLWithString:@"http://localhost:8080/myDiary/index.html"];NSURLRequest*request = [NSURLRequestrequestWithURL:url]; [_wkView loadRequest:request]; _wkView.UIDelegate =self; _wkView.navigationDelegate =self; [self.view addSubview:_wkView];
我们在js可以通过NativeMethod这个Handler让js代码调用native。
比如在js代码中，我新增了一个方法
functioninvokeNativeMethod(){window.webkit.messageHandlers.NativeMethod.postMessage("我要调用native的方法"); }
触发以上方法的时候，会在native以下方法中进行拦截处理。
#pragma mark - WKScriptMessageHandler- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message{//这里就是使用高端配置，js调用native的处理地方。我们可以根据name和body，进行桥协议的处理。NSString*messageName = message.name;if([@"NativeMethod"isEqualToString:messageName]) {idmessageBody = message.body;NSLog(@"%@",messageBody); }}
四、UIWebView和WKWebView的比较和选择
WKWebView是苹果在WWDC2014发布会中发布IOS8的时候公布WebKit时候使用的新型的H5容器。它与UIWebView相比较，拥有更快的加载速度和性能，更低的内存占用。将UIWebViewDelegate和UIWebView重构成了14个类，3个协议，可以让开发者进行更加细致的配置。
但是他有一个最致命的缺陷，就是WKWebView的请求不能被NSURLProtocol截获。而我们团队开发的app中对于H5容器最佳的优化点主要就在于使用NSURLProtocol技术对于H5进行离线包的处理和H5的图片和Native的图片公用一套缓存的技术。因为该问题的存在，目前我们团队还没有使用WKWebView代替UIWebVIew。
本文转自链接：https://www.jianshu.com/p/84a6b1ac974a
