iOS H5容器的一些探究(一):UIWebView和WKWebView的比较和选择

一、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、加载网页

2.2、UIWebViewDelegate几个常用的代理方法

2.3、Native调用JS中的方法

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

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

js代码不一定要在js文件中预留,也可以在代码中通过字符串的形式进行调用,比如下面:

2.4、JS中调用Naitve的方法

具体让js通知native进行方法调用,我们可以让js产生一个特殊的请求。可以让Native代码可以拦截到,而且不然用户察觉。业界一般的实现方案是在网页中加载一个隐藏的iframe来实现该功能。通过将iframe的src指定为一个特殊的URL,实现在- (BOOL)webView:(UIWebView )webView shouldStartLoadWithRequest:(NSURLRequest )request navigationType:(UIWebViewNavigationType)navigationType;方案中进行拦截处理。对应的js调用代码如下:

比如我们在js代码中,调用一下两个js方法:

当你触发以上方法的时候,就会进入webview的代理方法中进行拦截。

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

三、WKWebView的基本用法

3.1、加载网页

3.2、几个常用的代理方法

显然WKWebView的代理方法提供了比UIWebView颗粒度更细的方法。让开发者可以进行更加细致的配置和处理。

3.3 、Native调用JS中的方法

WKWebView提供的调用js代码的函数是:

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

我们可以调用如下代码进行js的调用:

同UIWebView一样,我们也可以通过字符串的形式进行js调用。

3.4、JS中调用Naitve的方法

除了和UIWebView加载一个隐藏的ifame之外,WKWebView自身还提供了一套js调用native的规范。

我们可以在初始化WKWebView的时候,给他设置一个config参数。

我们在js可以通过NativeMethod这个Handler让js代码调用native。

比如在js代码中,我新增了一个方法

触发以上方法的时候,会在native以下方法中进行拦截处理。

四、UIWebView和WKWebView的比较和选择

WKWebView是苹果在WWDC2014发布会中发布IOS8的时候公布WebKit时候使用的新型的H5容器。它与UIWebView相比较,拥有更快的加载速度和性能,更低的内存占用。将UIWebViewDelegate和UIWebView重构成了14个类,3个协议,可以让开发者进行更加细致的配置。

但是他有一个最致命的缺陷,就是WKWebView的请求不能被NSURLProtocol截获。而我们团队开发的app中对于H5容器最佳的优化点主要就在于使用NSURLProtocol技术对于H5进行离线包的处理和H5的图片和Native的图片公用一套缓存的技术。因为该问题的存在,目前我们团队还没有使用WKWebView代替UIWebVIew。

五、联系方式

新浪微博
github
简书首页

欢迎加好友、一起交流。

1 2 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部