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

你可能感兴趣的:(wkwebview入门教程)