iOS H5容器的一些探究（一）：UIWebView和WKWebView的比较和选择

414 查看

一、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 = [[UIWebView alloc] initWithFrame:self.view.bounds];

webView.delegate = self;

[self.view addSubview:webView];

//网络地址

NSURL *url = [[NSURL alloc] initWithString:@"http://www.taobao.com"];

NSURLRequest *request = [NSURLRequest requestWithURL: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:(nullable NSError *)error;

2.3、Native调用JS中的方法

比如我们在加载的HTML文件中有如下js代码：

function hello(){

alert("你好！");

}

function helloWithName(name){

alert(name + "，你好！");

}

</script>

我们可以调用- (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;函数进行js调用。

1 2	[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调用代码如下：

function loadURL(url) {

var iFrame;

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方法：

function iOS_alert() {//调用自定义对话框

loadURL("alert://abc");

}

function call() {// 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 = [[UIAlertView alloc] initWithTitle:@"test" message:[url host] delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];

[alertView show];

return NO;

}else if([[url scheme] isEqualToString:@"tel"]){//拦截拨打电话请求

BOOL result = [[UIApplication sharedApplication] openURL:url];

if (!result) {

NSLog(@"您的设备不支持打电话");

} else {

NSLog(@"电话打了");

}

return NO;

}

return YES;

}

这样我们就可以让js进行native的调用。

三、WKWebView的基本用法

3.1、加载网页

WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];

NSURL *url = [NSURL URLWithString:@"http://www.taobao.com"];

NSURLRequest *request = [NSURLRequest requestWithURL:url];

[webView loadRequest:request];

[self.view addSubview:webView];