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才能加载之类的东西，各位老哥就自己查一查，看一看，应该就能找到详细的解决方法。 各位老哥开发愉快~