iOS UI基础-21 WKWebView

2018-02-06 20:46 jiangys 阅读(381) 评论(0) 编辑收藏举报

WKWebView，直接显示网页，需要引入第三方类：https://github.com/marcuswestin/WebViewJavascriptBridge

加上进度条代码，很完美使用

webView.h

#import <UIKit/UIKit.h>
 
@interface ECBankCardAddViewController : UIViewController
/** 请求H5的时候，需要传的token */
@property (nonatomic, copy) NSString *token;
@end

webView.m

100

101

102

103

104

105

106

107

//
//  ECBandCardAddViewController.m
//  ECardBusiness
//
//  Created by yongsheng.jiang on 2018/2/6.
//  Copyright © 2018年 bige. All rights reserved.
//
 
#import "ECBankCardAddViewController.h"
#import "WebViewJavascriptBridge.h"
 
@interface ECBankCardAddViewController ()<WKNavigationDelegate>
@property (nonatomic, strong) WKWebView *webView;
@property (nonatomic, weak) UIProgressView *progressView;
 
@end
 
@implementation ECBankCardAddViewController
 
- (void)dealloc {
    [self.webView removeObserver:self forKeyPath:NSStringFromSelector(@selector(estimatedProgress))];
    self.webView.navigationDelegate = nil;
}
 
- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"添加银行卡";
    self.view.backgroundColor = [UIColor whiteColor];
     
    WKWebView *webView = [[NSClassFromString(@"WKWebView") alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];
    self.webView = webView;
     
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@%@",web_add_bandcard,self.token]]];
    [webView loadRequest:request];
     
    [webView addObserver:self
              forKeyPath:NSStringFromSelector(@selector(estimatedProgress))
                 options:0
                 context:nil];
     
    [self setupProgressView];
}
 
- (void)setupProgressView {
    UIProgressView *progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
    progressView.frame = CGRectMake(0, 64, SCREEN_WIDTH, 5);
     
    [progressView setTrackTintColor:[UIColor colorWithRed:240.0/255
                                                    green:240.0/255
                                                     blue:240.0/255
                                                    alpha:1.0]];
    progressView.progressTintColor = [UIColor greenColor];
    [self.view addSubview:progressView];
     
    _progressView = progressView;
}
 
#pragma mark - WKNavigationDelegate
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    NSLog(@"didStartProvisionalNavigation");
    //开始加载的时候，让进度条显示
    self.progressView.hidden = NO;
}
 
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
    NSLog(@"didCommitNavigation");
}
 
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    NSLog(@"didFinishNavigation");
}
 
#pragma mark - KVO
//kvo 监听进度
-(void)observeValueForKeyPath:(NSString *)keyPath
                     ofObject:(id)object
                       change:(NSDictionary<NSKeyValueChangeKey,id> *)change
                      context:(void *)context{
     
    if ([keyPath isEqualToString:NSStringFromSelector(@selector(estimatedProgress))]
        && object == self.webView) {
        [self.progressView setAlpha:1.0f];
        BOOL animated = self.webView.estimatedProgress > self.progressView.progress;
        [self.progressView setProgress:self.webView.estimatedProgress
                              animated:animated];
         
        if (self.webView.estimatedProgress >= 1.0f) {
            [UIView animateWithDuration:0.3f
                                  delay:0.3f
                                options:UIViewAnimationOptionCurveEaseOut
                             animations:^{
                                 [self.progressView setAlpha:0.0f];
                             }
                             completion:^(BOOL finished) {
                                 [self.progressView setProgress:0.0f animated:NO];
                             }];
        }
    } else{
        [super observeValueForKeyPath:keyPath
                             ofObject:object
                               change:change
                              context:context];
    }
}
 
@end