IOS进阶之WKWebView

前言


Xcode8发布以后，编译器开始不支持IOS7，所以很多应用在适配IOS10之后都不在适配IOS7了，其中包括了很多大公司，网易新闻，滴滴出行等。因此，我们公司的应用也打算淘汰IOS7。

支持到IOS8，第一个要改的自然是用WKWebView替换原来的UIWebView。WKWebView有很多明显优势:

  • 更多的支持HTML5的特性
  • 官方宣称的高达60fps的滚动刷新率以及内置手势
  • 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议,以前很多不方便实现的功能得以实现。文档
  • Safari相同的JavaScript引擎
  • 占用更少的内存

UIWebView

UIWebView

WKWebView

WKWebView

因此，使用WkWebview替换UIWebView还是很有必要的。

基本使用方法


WKWebView有两个delegate,WKUIDelegate 和 WKNavigationDelegate。WKNavigationDelegate主要处理一些跳转、加载处理操作，WKUIDelegate主要处理JS脚本，确认框，警告框等。因此WKNavigationDelegate更加常用。

比较常用的方法：

#pragma mark - lifeCircle
- (void)viewDidLoad {
    [super viewDidLoad];
    webView = [[WKWebView alloc]init];
    [self.view addSubview:webView];
    [webView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.top.equalTo(self.view);
        make.bottom.equalTo(self.view);
    }];
    webView.UIDelegate = self;
    webView.navigationDelegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];

}

#pragma mark - WKNavigationDelegate
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{

}
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{

}
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

}
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation{

}
// 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{

}
// 在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{

    NSLog(@"%@",navigationResponse.response.URL.absoluteString);
    //允许跳转
    decisionHandler(WKNavigationResponsePolicyAllow);
    //不允许跳转
    //decisionHandler(WKNavigationResponsePolicyCancel);
}
// 在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

     NSLog(@"%@",navigationAction.request.URL.absoluteString);
    //允许跳转
    decisionHandler(WKNavigationActionPolicyAllow);
    //不允许跳转
    //decisionHandler(WKNavigationActionPolicyCancel);
}
#pragma mark - WKUIDelegate
// 创建一个新的WebView
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{
    return [[WKWebView alloc]init];
}
// 输入框
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler{
    completionHandler(@"http");
}
// 确认框
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler{
    completionHandler(YES);
}
// 警告框
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    NSLog(@"%@",message);
    completionHandler();
}

OC与JS交互


WKWebview提供了API实现js交互 不需要借助JavaScriptCore或者webJavaScriptBridge。使用WKUserContentController实现js native交互。简单的说就是先注册约定好的方法，然后再调用。

JS调用OC方法

oc代码(有误，内存不释放):

@interface ViewController ()<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler>{
    WKWebView * webView;
    WKUserContentController* userContentController;
}
@end
@implementation ViewController
#pragma mark - lifeCircle
- (void)viewDidLoad {
    [super viewDidLoad];
    //配置环境
    WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];
    userContentController =[[WKUserContentController alloc]init];
    configuration.userContentController = userContentController;
    webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 100, 100) configuration:configuration];
    //注册方法
    [userContentController addScriptMessageHandler:self  name:@"sayhello"];//注册一个name为sayhello的js方法

    [self.view addSubview:webView];
    [webView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.top.equalTo(self.view);
        make.bottom.equalTo(self.view);
    }];
    webView.UIDelegate = self;
    webView.navigationDelegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.test.com"]]];
}
- (void)dealloc{
    //这里需要注意，前面增加过的方法一定要remove掉。
    [userContentController removeScriptMessageHandlerForName:@"sayhello"];
}
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo);
}
@end

上面的OC代码如果认证测试一下就会发现dealloc并不会执行，这样肯定是不行的，会造成内存泄漏。原因是[userContentController addScriptMessageHandler:self name:@"sayhello"];这句代码造成无法释放内存。（ps:试了下用weak指针还是不能释放，不知道是什么原因。）因此还需要进一步改进，正确的写法是用一个新的controller来处理,新的controller再绕用delegate绕回来。

oc代码(正确写法):

@interface ViewController ()<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler>{
    WKWebView * webView;
    WKUserContentController* userContentController;
}
@end
@implementation ViewController
#pragma mark - lifeCircle
- (void)viewDidLoad {
    [super viewDidLoad];
    //配置环境
    WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];
    userContentController =[[WKUserContentController alloc]init];
    configuration.userContentController = userContentController;
    webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 100, 100) configuration:configuration];
    //注册方法
    WKDelegateController * delegateController = [[WKDelegateController alloc]init];
    delegateController.delegate = self;

    [userContentController addScriptMessageHandler:delegateController  name:@"sayhello"];

    [self.view addSubview:webView];
    [webView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view);
        make.right.equalTo(self.view);
        make.top.equalTo(self.view);
        make.bottom.equalTo(self.view);
    }];
    webView.UIDelegate = self;
    webView.navigationDelegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.test.com"]]];
}
- (void)dealloc{
    //这里需要注意，前面增加过的方法一定要remove掉。
    [userContentController removeScriptMessageHandlerForName:@"sayhello"];
}
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo);
}
@end

WKDelegateController代码：

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>
@protocol WKDelegate <NSObject>

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

@end

@interface WKDelegateController : UIViewController <WKScriptMessageHandler>

@property (weak , nonatomic) id<WKDelegate> delegate;

@end

.m代码：

#import "WKDelegateController.h"

@interface WKDelegateController ()

@end

@implementation WKDelegateController

- (void)viewDidLoad {
    [super viewDidLoad];
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {
        [self.delegate userContentController:userContentController didReceiveScriptMessage:message];
    }
}

@end

h5代码:

<html>
<head>
    <script>
function say()
{
//前端需要用 window.webkit.messageHandlers.注册的方法名.postMessage({body:传输的数据} 来给native发送消息
    window.webkit.messageHandlers.sayhello.postMessage({body: ‘hello world!‘});
}
</script>
</head>
    <body>
        <h1>hello world</h1>
        <button onclick="say()">say hello</button>
    </body>

</html>

打印出的log：

 name:sayhello
 body:{
    body = "hello world!";
}
 frameInfo:<WKFrameInfo: 0x7f872060ce20; isMainFrame = YES; request =     <NSMutableURLRequest: 0x618000010a30> { URL: http://www.test.com/ }>

注意点

  • addScriptMessageHandler要和removeScriptMessageHandlerForName配套出现，否则会造成内存泄漏。
  • h5只能传一个参数，如果需要多个参数就需要用字典或者json组装。

oc调用JS方法

代码如下：

- (void)webView:(WKWebView *)tmpWebView didFinishNavigation:(WKNavigation *)navigation{

    //say()是JS方法名，completionHandler是异步回调block
    [webView evaluateJavaScript:@"say()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
        NSLog(@"%@",result);
    }];

}

h5代码同上。

WebViewJavascriptBridge


一般来说，一个好的UI总有一个大神会开发出一个好的第三方封装框架。WebViewJavascriptBridge的作者也做了一套支持WKWebView与JS交互的第三方框架:WKWebViewJavascriptBridge。

主要方法如下：

//初始化方法
+ (instancetype)bridgeForWebView:(WKWebView*)webView;
+ (void)enableLogging;

//注册函数名
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;

//调用函数名
- (void)callHandler:(NSString*)handlerName;
- (void)callHandler:(NSString*)handlerName data:(id)data;
- (void)callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback;

//重置
- (void)reset;

//设置WKNavigationDelegate
- (void)setWebViewDelegate:(id<WKNavigationDelegate>)webViewDelegate;

基本的实现方法和上面写的差不多，就是封装了一下，有兴趣的童鞋可以自己pod下来使用。

文／o翻滚的牛宝宝o（简书作者）
原文链接：http://www.jianshu.com/p/4fa8c4eb1316
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

时间： 2024-11-04 23:03:08

IOS进阶之WKWebView的相关文章

IOS 进阶之 WKWebView

前言 Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7. 支持到IOS8,第一个要改的自然是用WKWebView替换原来的UIWebView.WKWebView有很多明显优势: 更多的支持HTML5的特性 官方宣称的高达60fps的滚动刷新率以及内置手势 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议,以前很多不方便实现的功能得

iOS 进阶 第二十一天(0531)

0531 - Autolayout 不仅可以做屏幕适配还可以做系统适配 uidynamic 做物理动画.能做的效果如下图: Autolayout Autolayout 是一种“自动布局”技术,专门用来布局UI界面的.有了Autolayout,请忘记frame Autolayout 要比 Autoresizing 强大,两者水火不相容 Autolayout的2个核心概念 参照 约束 使用代码实现Autolayout - VFL(Visual Format Language) 实现思路如下: NSL

iOS进阶_地图上定位的标志——大头针

一.添加大头针 地图使用的框架是MapKit 大头针走的是MKAnnotation协议 /* 注意:因为是满足协议MKAnnotation,所以没有MKAnnotation的系统大头针类,必须自定义大头针类,我自定义的为MyAnnotation 大头针: 在iOS开发中经常会标记某个位置,需要使用地图标注,也就是大家俗称的“大头针”.只要一个NSObject类实现MKAnnotation协议就可以作为一个大头针,通常会重写协议中coordinate(标记位置).title(标题).subtitl

iOS 进阶 第一天(0323)

0323 Storyboard连线错误 如下图: 不允许直接修改对象的结构体属性成员,但允许直接整体修改对象的结构体属性 如下图: 打印一个控件对象的frame 如下图: 如果一个控件无论怎么改变它的大小都不起作用,那么就要想到从iOS6开始出现的AutoLayout.这个面试必面 iOS 进阶 第一天(0323)

iOS 进阶 第十五天(0417)

0417 创建UICollectionViewCell的Xib方法如下图 枚举定义导航跳转方式 js跳转到网页指定锚点 如下图所示: iOS 进阶 第十五天(0417)

iOS 进阶 第二天(0324)

0324 创建transform transform 是形变属性. 如下图: 如果按照上面的方法来创建的话是这样解释:是相对初始状态来说的,不会在变化后的基础上进行形变.如果要持续变化就要自己去不断改变要变化的tx或者ty的值 如果要在当前的transform上直接进行不断改变就要按照下面的写法,如下图所示: 当然旋转也是一样,如下图: 当然缩放也是一样,如下图: plist 从本地程序包读取文件 懒加载数据 如下图: bundle 如下图: UIImageView的序列帧动画(每隔一段时间换一

iOS 进阶 第九天(0408)

0408 makekeyAndVisible解释 一个程序可以有多个Window,但只有一个窗口能够成为主窗口.如图中所示,此时的window2是主窗口.主窗口用处大了.从iOS7开始无论是主窗口还是次窗口,都可以交互,比如文本框输入文字.但在iOS6及其之前的版本,非KeyWindow(非主窗口)是无法交互的,即无法向文本框中输入文字 如果发现一个文本框不能输入文字,那就就要想到这个文本框所在的窗口是不是主窗口 iOS主窗口和非主窗口的表现: 获取当前程序的主窗口 一些总结: 键盘也是在一个窗

iOS 进阶 第六天(0402)

0402 通知和代理的区别 代理是一对一的,只能是调用实现了协议里的方法,对象作为实现了该方法才能执行方法 通知是多对多,它是通过通知中心分发 通知要及时移除,如果不及时移除可能会收到多次通知,就好像C#中的事件注册多次一样.也可能(通知中心不会保留被通知的对象)是被通知的对象已经销毁,但通知中心仍保留这个通知继续通知造成野指针错误,应用可能会崩溃. 同时的添加和移除很容易和KVO混在一起,只要注意addObserver和removeObserver的时候不选择forKeyPath就可以了. 下

iOS 进阶 第十一天(0411)

0411 UItaBbar的结构 每一个数组都有一个方法,那就是下面这个,如下图所示: 如果想看系统控件是怎么构成的,那么就采用遍历其子控件的方式来做,如上一图中所示 在iOS7及其以后的系统里,控制器ViewController的View都是通栏的,从头到脚.但在iOS6及其以前的系统里控制器ViewContorller的View的高度要去掉被遮盖的部分. strong和weak 对象销毁准则: 非ARC:只要对象的引用计数器为0,系统自动会销毁此对象 ARC:只要没有任何强指针指向此对象,系