iOS WKWebView与UIWebView的比较替换
在开发过程中,iOS 中实现加载 web 页面主要有两种控件,UIWebView 和 WKWebview,两种控件对应具体的实现方法不同。WKWebView是苹果公司在iOS8系统推出的,这里主要概述WebKit中更新的WKWebView控件的新特性与使用方法,以及小编在开发过程中踩的坑。
一、相比于UIWebView的优势:
- 在性能、稳定性、占用内存方面有很大提升;
- 允许JavaScript的Nitro库加载并使用(UIWebView中限制)
- 增加加载进度属性:estimatedProgress,不用在自己写假进度条了
- 支持了更多的HTML的属性
二、用法介绍
1. 导入头文件 :#import <WebKit/WebKit.h>
2. 创建WKWebView
<1>. 除了继承自父类UIView提供的initWithFrame函数外,WKWebView本身提供了一个函数用于创建:- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration;
<2>. 该函数中需要传入的参数WKWebViewConfiguration是WKWebView新添加的一个类,主要包括WKPreferences(页面属性相关),WKUserContentController(JS交互相关)两个属性
创建WKWebView.png<3> WKWebView新增了页面加载进度的属性: @property (nonatomic, readonly) double estimatedProgress;
进度条.png3. 网页导航刷新相关函数
WKWebView新添加了两个函数 reloadFromOrigin 和 goToBackForwardListItem,
reloadFromOrigin 会比较网络数据是否有变化,没有变化则使用缓存,否则从新请求;
goToBackForwardListItem 比向前向后更强大,可以跳转到某个指定历史页面。
导航栏刷新.png4. WKWebView的代理方法
<1>. WKNavigationDelegate
追踪页面加载过程的代理方法(页面开始加载、服务开始响应返回数据时、加载完成、加载失败):
WKNavigationDelegate 1.png页面跳转的三个代理方法(收到跳转与决定是否跳转两种):
WKNavigationDelegate 2.png以上代理的方法执行的顺序:1⃣️->2⃣️->3⃣️->4⃣️->5⃣️
可以在这几个代理方法中自定义实现自己的需求
注:如果实现关于是否跳转的协议方法,其中decisionHandler必须调用,传入参数为WKNavigationActionPolicyCancel,WKNavigationActionPolicyAllow。否则程序会crash
<2>. WKUIDelegate
UI界面相关,原生控件支持,三种提示框:输入、确认、警告。首先将web提示框拦截然后再做处理。
WKUIDelegate.png<3>. WKScriptMessageHandler
WKScriptMessageHandler是负责处理JS和Native交互的,下面的“JS和Native交互”部分会介绍到。
5. JS和Native交互
首先,在创建 WKWebView 的时候,客户端通过函数 - (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;
添加了ScriptMessageHandler 如下图红框内代码,向JS注册Native方法,名字为Share,可同时注册多个。
self指代的对象需要遵守WKScriptMessageHandler协议,结束时需要移除(需要在页面销毁前移除,否则该对象不会销毁,易造成内存泄漏)
销毁.png接着实现WKScriptMessageHandler的代理方法:即
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
在此方法中涉及到一个类:WKScriptMessage ,一般用到两个属性 name 和 body
注:1.window.webkit.messageHandlers.<name>.postMessage(<messageBody>) 的 name 和 - (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name; 的 name 要保持一致;并且客户端在代理方法中通过 name 来区分处理不同的需求。2.messageBody是一个对象,为页面通过JS传给客户端的参数;如果需要多个参数,可以放进数组或者字典中传过去
截止到现在客户端的编码完成了,最后只需要通知HTML的开发人员在HTML页面中添加并调用JS代码 ,即 window.webkit.messageHandlers.<name>.postMessage(<messageBody>) 就好了。
此处贴上HTML代码(红框里是调用的JS代码)
HTML.png6. 清除缓存
<1>. 清除全部缓存
清除全部缓存.png<2>. 清除部分缓存(可选择)
清除部分缓存.png总结:
简单介绍了WKWebView的创建、加载、属性配置以及JS和
OC交互的一些使用心得,包括已经踩过的坑,后续后继续补充,如有描述不当或者错误的地方,在评论区给我指出来,小编马不停蹄的更正哈