现在大部分的app只支持iOS8以上的系统了，在接入H5时可以只管最新的WKWebView了。
WKWebView的优势
- 性能高，稳定性好，占用的内存比较小，
- 支持JS交互
- 支持HTML5 新特性
- 可以添加进度条（然并卵，不好用，还是习惯第三方的）。
- 支持内建手势，
- 据说高达60fps的刷新频率（不卡）
接下来直接进入主题
- 首先需要导入库文件
#import <WebKit/WebKit.h> - 同时继承2个代理事件
<WKNavigationDelegate,WKUIDelegate> - 创建WKWebView
self.webView = [[WKWebView alloc] initWithFrame:self.view.frame];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://192.168.99.81:8020/goldenWater/watersupermarketList.html"]]];
self.webView.navigationDelegate = self;
self.webView.UIDelegate = self;
//开了支持滑动返回
self.webView.allowsBackForwardNavigationGestures = YES;
[self.view addSubview:self.webView];
- WKUIDelegate代理事件
// 页面开始加载时调用
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
}
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
}
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{//这里修改导航栏的标题，动态改变
self.title = webView.title;
}
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation{
}
// 接收到服务器跳转请求之后再执行
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{
}
// 在收到响应后，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
DLog(@"%@",webView);
DLog(@"%@",navigationResponse);
WKNavigationResponsePolicy actionPolicy = WKNavigationResponsePolicyAllow;
//这句是必须加上的，不然会异常
decisionHandler(actionPolicy);
}
// 在发送请求之前，决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
self.title = webView.title;
WKNavigationActionPolicy actionPolicy = WKNavigationActionPolicyAllow;
if (navigationAction.navigationType==WKNavigationTypeBackForward) {//判断是返回类型
//同时设置返回按钮和关闭按钮为导航栏左边的按钮 这里可以监听左滑返回事件，仿微信添加关闭按钮。
self.navigationItem.leftBarButtonItems = @[self.backBtn, self.closeBtn];
//可以在这里找到指定的历史页面做跳转
// if (webView.backForwardList.backList.count>0) { //得到栈里面的list
// DLog(@"%@",webView.backForwardList.backList);
// DLog(@"%@",webView.backForwardList.currentItem);
// WKBackForwardListItem * item = webView.backForwardList.currentItem; //得到现在加载的list
// for (WKBackForwardListItem * backItem in webView.backForwardList.backList) { //循环遍历，得到你想退出到
// //添加判断条件
// [webView goToBackForwardListItem:[webView.backForwardList.backList firstObject]];
// }
// }
}
//这句是必须加上的，不然会异常
decisionHandler(actionPolicy);
}
- WKUIDelegate代理事件,主要实现与js的交互
//显示一个JS的Alert（与JS交互）
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
DLog(@"弹窗alert");
DLog(@"%@",message);
DLog(@"%@",frame);
[self.view makeToast:message];
completionHandler();
}
//弹出一个输入框（与JS交互的）
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler{
DLog(@"弹窗输入框");
DLog(@"%@",prompt);
DLog(@"%@",defaultText);
DLog(@"%@",frame);
UIAlertController *alert = [UIAlertController alertControllerWithTitle:prompt message:defaultText preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *a1 = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
//这里必须执行不然页面会加载不出来
completionHandler(@"");
}];
UIAlertAction *a2 = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
DLog(@"%@",
[alert.textFields firstObject].text);
completionHandler([alert.textFields firstObject].text);
}];
[alert addAction:a1];
[alert addAction:a2];
[alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) {
DLog(@"%@",textField.text);
}];
[self presentViewController:alert animated:YES completion:nil];
}
//显示一个确认框（JS的）
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler{
DLog(@"弹窗确认框");
DLog(@"%@",message);
DLog(@"%@",frame);
UIAlertController *alertController = [UIAlertController alertControllerWithTitle:message message:nil preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
completionHandler(NO);
}];
UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDestructive handler:^(UIAlertAction * _Nonnull action) {
completionHandler(YES);
}];
[alertController addAction:cancelAction];
[alertController addAction:okAction];
[self presentViewController:alertController animated:YES completion:nil];
}
重写左上角返回按钮，这个很重要，用户体验影响很大
-(void)backNative{
//判断是否有上一层H5页面
if ([self.webView canGoBack]) {
//如果有则返回
[self.webView goBack];
//同时设置返回按钮和关闭按钮为导航栏左边的按钮
self.navigationItem.leftBarButtonItems = @[self.backBtn, self.closeBtn];
} else {
[self closeNative];
}
}
如果需要显示网页加载进度，移步我之前的文章
到这里基本上就实现了内嵌H5的加载，大家可以放http://m.jd.com试试事件效果
示例图
【原创出品 未经授权 禁止转载】
【欢迎微友分享转发 禁止公号等未经授权的转载】
