wkwebview入门教程-白红宇

我从简书搬家了

本文原地址：

背景：公司的老项目，使用的是uiwebview，我也没用过，第一次做混合开发，所以想直接使用wkwebview去替换当前的uiwebview，毕竟性能上提升了4倍，还有很多乱七八糟的优化等，废话不多说。

1.首先wkwebview有三个代理方法WKUIDelegate,WKScriptMessageHandler,WKNavigationDelegate

2.wkwebview创建的时候可以写配置

有一个属性的集合，叫WKWebViewConfiguration 其中还有一些首选项的配置WKPreferences 例如我是这么创建的:

//    wkwebview属性的集合    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];    //    webview一些首选项的配置    WKPreferences *preferences = [[WKPreferences alloc]init];    //    在没有用户交互的情况下，是否允许js打开窗口，macOS默认是yes，iOS默认是no    preferences.javaScriptCanOpenWindowsAutomatically = YES;    //    webview的最小字体大小//    preferences.minimumFontSize = 40.0;        configuration.preferences = preferences;        self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];    self.webView.UIDelegate = self;    self.webView.navigationDelegate = self;    [self.view addSubview:self.webView];复制代码

3.加载网页，本地加载和加载服务器网页

1.加载本地网页

将html与css和js拖进项目，使用蓝色物理文件夹放入。加载本地网页，使用

[self.webView loadFileURL:htmlPathUrl allowingReadAccessToURL:folderPathUrl];复制代码

其中htmlPathUrl代表html的路径其中folderPathUrl代表存放js与css的路径只有这样才能加载完整的网页，否则你可能加载不出css样式和js方法。例如：

#pragma mark 加载url展示页面//加载本地网页-(void)loadUrl{    NSString *folderPath = [[NSBundle mainBundle] pathForResource:@"sdk" ofType:@""];    NSURL *folderPathUrl = [NSURL fileURLWithPath:folderPath];        NSString *htmlPath = [folderPath stringByAppendingString:@"/h5/index.html"];    NSURL *htmlPathUrl = [NSURL fileURLWithPath:htmlPath];    [self.webView loadFileURL:htmlPathUrl allowingReadAccessToURL:folderPathUrl];}复制代码

当然，如果网页有ajax请求，注意跨域问题。试试jsonp。这里就提一下，略过。

2.加载服务器网页

这就没什么好说的了。。直接加载就行。例如：

-(void)loadUrl{    NSString *urlString = @"https://www.baidu.com";    urlString = [urlString stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];    NSURL *url = [NSURL URLWithString:urlString];        NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];        [SdkTools requestSetHeader:request];    [self.webView loadRequest:request];}复制代码

4.与js交互的方法怎么写

这里就要说到代理方法了，还记得第一点写的WKScriptMessageHandler这个代理么。就是用来交互的。和uiwebview不一样，wk不能使用JavaScriptCore这个框架。

1.首先你需要使用

[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"方法名"];复制代码

用完记得写remove

[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"方法名"];复制代码

这里建议大家将add写在viewWillAppear中将remove写在viewWillDisappear中，原因是防止循环引用。可能会有兄弟有疑问循环在哪，循环在self.webView.configuration.userContentController中的userContentController，详细大家可以查一下。

2.js那边怎么调用呢？如下

window.webkit.messageHandlers.方法名.postMessage(参数);复制代码

3.oc如何接收？如下

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{}复制代码

使用这个代理方法接收js的调用，具体是调了哪个方法可以通过message.name分别，因为message.name就是方法名。而message.body则是参数，是一个json字符串，经过解析就可以使用了。

4.oc方法执行完毕如何将结果回调传给js？如下

NSString *jss = [NSString stringWithFormat:@"%@('%@')",js接收的方法名,oc传递给js的结果（是一个不含换行符不含空格的json字符串）];    [self.webView evaluateJavaScript:jss completionHandler:^(id _Nullable result, NSError * _Nullable error) {        //正常时，result和error都为null        NSLog(@"result = %@,error = %@",result,error);    }];复制代码

5.ok，那么下面放出一个例子，如何进行交互：

//oc.m-(void)viewWillAppear:(BOOL)animated{    [super viewWillAppear:animated];//    退出    [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"exitSdk" ];}-(void)viewWillDisappear:(BOOL)animated{    [super viewWillDisappear:animated];    [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"exitSdk"];#pragma mark - 与js交互入口-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{    NSLog(@"wx.body ------  %@",message.body);    NSLog(@"wx.name ------  %@",message.name);    if ([message.name isEqualToString:@"exitSdk"]) {        [self exitSdk];    }}#pragma mark - 函数回调给js-(void) exitSdk{    NSDictionary *dicParam = @{@"key":@"value"};    NSString *jsParam = [SdkTools dictionaryToJsonString:dicParam];    NSString *jss = [NSString stringWithFormat:@"%@('%@')",js方法名,jsParam];    [self.webView evaluateJavaScript:jss completionHandler:^(id _Nullable result, NSError * _Nullable error) {        NSLog(@"result = %@,error = %@",result,error);    }];}复制代码

5.alert怎么弹

可能有些原生开发的老哥不知道js咋打断点或者因为一些原因不方便打断点，一般都会用alert去弹窗,获取自己希望知道的结果，uiwebview还好，一使用wkwebview之后发现，卧槽，alert不弹窗了。其实是有代理方法没写。

#pragma mark 弹窗展示//只有一个确定按钮实现这个代理方法-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{        UIAlertController *alertCtrl = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];        [alertCtrl addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {        completionHandler();    }]];        [self presentViewController:alertCtrl animated:YES completion:nil];    }复制代码

当然，有多个按钮的就有劳各位老哥自己查一下，我这里就不放了。

6.页面加载情况

都知道有很多代理方法，大家搜一搜也都有,其中大部分是对的，不过加载失败有很多都是写的错误的，至少在我搜索的结果中发现有相当一部分是错误的。这里放两个，一个是加载开始，还有一个是加载失败。

#pragma mark - 页面开始加载时调用- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {    NSLog(@"页面开始加载时调用");}#pragma mark 页面加载失败- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(nonnull NSError *)error{    NSLog(@"页面加载失败");}复制代码

7.加载不受信任的服务器证书

#pragma mark - 加载不受信任的服务器- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler{        if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {                NSURLCredential *card = [[NSURLCredential alloc]initWithTrust:challenge.protectionSpace.serverTrust];                completionHandler(NSURLSessionAuthChallengeUseCredential,card);            }}复制代码

8.隐藏界面发现顶部少了20PX的uiview

WKWebView加载web页面，隐藏导航栏，全屏显示，发现顶部出现20px的空白。解决方法： iOS 7以上，iOS 11以下：

self.edgesForExtendedLayout = UIRectEdgeNone;复制代码

iOS 11对安全区域做了一些修改，以下方法是iOS 11新增方法。 iOS 11：

self.webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;复制代码

写在最后

其他应该也没什么了，大家结合自己情况使用就好。毕竟听说性能提升了至少4倍呢。还有一些iOS8有的bug，比如iOS8本地加载只能复制到tmp才能加载之类的东西，各位老哥就自己查一查，看一看，应该就能找到详细的解决方法。各位老哥开发愉快~