iOS与H5交互（WKWbebView）

前言：

在iOS开发中，或多或少的会嵌入一些H5页面，有时候需要原生代码和H5页面进行交互。iOS8开始苹果推出性能更强大的WKWebView,所以一下方法是关于WKWebView与JS的交互。

创建WKWebView:

遵守协议

<WKNavigationDelegate, WKUIDelegate, WKScriptMessageHandler>

-(WKWebView *)wkwebview

{

if (!_wkwebview) {

_wkwebview = [[WKWebView alloc] initWithFrame:CGRectMake(0, HeightSignal, ScreenWidth, ScreenHeight-HeightSignal-HeightBottomSafe)];

_wkwebview.scrollView.backgroundColor = [UIColor whiteColor];

_wkwebview.navigationDelegate = self;

_wkwebview.UIDelegate = self;

[self.view addSubview:_wkwebview];

}

return _wkwebview;

}

顶部网页加载进度条:

self.progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(0, HeightSignal, [[UIScreen mainScreen] bounds].size.width, 2)];

self.progressView.backgroundColor = [UIColor blueColor];

//设置进度条的高度，下面这句代码表示进度条的宽度变为原来的1倍，高度变为原来的1.5倍.

self.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f);

[self.view addSubview:self.progressView];

[self.wkwebview addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];//进度监听

#pragma mark 加载进度监听

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {

if ([keyPath isEqualToString:@"estimatedProgress"]) {

self.progressView.progress = self.wkwebview.estimatedProgress;

if (self.progressView.progress == 1) {

/*

*添加一个简单的动画，将progressView的Height变为1.4倍，在开始加载网页的代理中会恢复为1.5倍

*动画时长0.25s，延时0.3s后开始动画

*动画结束后将progressView隐藏

*/

__weak typeof (self)weakSelf = self;

[UIView animateWithDuration:0.25f delay:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{

weakSelf.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.4f);

} completion:^(BOOL finished) {

weakSelf.progressView.hidden = YES;

}];

}

}else{

[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];

}

}

添加JS事件监控：

-(void)viewWillAppear:(BOOL)animated

{

[super viewWillAppear:animated];

[self.wkwebview.configuration.userContentController addScriptMessageHandler:self name:@"share"];//分享

}

移除JS事件监控：

-(void)viewWillDisappear:(BOOL)animated

{

[super viewWillDisappear:animated];

[self.wkwebview.configuration.userContentController removeScriptMessageHandlerForName:@"share"];//分享

}

监听方法：

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

{

if ([message.name isEqualToString:@"share"]) {

}

}