vue 项目 iOS WKWebView 加载


Posted in Javascript onApril 17, 2019

1、首先让前端的同事打一个包(index.html,static文件包含css、资源文件、js等)导入项目;

:warning: 注意:

把index.html放入项目根目录下,command+n创建一个资源文件.bundle,资源文件里也的包含一份 index.html

vue 项目 iOS WKWebView 加载

vue 项目 iOS WKWebView 加载

下面开始代码:

懒加载WKWebView

引入#import <WebKit/WebKit.h> #import <WebKit/WKWebView.h>

继承 WKNavigationDelegate,WKUIDelegate,

- (WKWebView *)wkWebView{
  if (!_wkWebView) {
    //设置网页的配置文件
    WKWebViewConfiguration * Configuration = [[WKWebViewConfiguration alloc]init];
    //允许视频播放
    if (@available(iOS 9.0, *)) {
      Configuration.allowsAirPlayForMediaPlayback = YES;
    } else {
      // Fallback on earlier versions
    }
    // 允许在线播放
    Configuration.allowsInlineMediaPlayback = YES;
    // 允许可以与网页交互,选择视图
    Configuration.selectionGranularity = YES;
    // 关于 WKWebView 无法跳转新页面 设置
    Configuration.preferences.javaScriptCanOpenWindowsAutomatically = YES;
    // web内容处理池
    Configuration.processPool = [[WKProcessPool alloc] init];
    //自定义配置,一般用于 js调用oc方法(OC拦截URL中的数据做自定义操作)
    WKUserContentController * UserContentController = [[WKUserContentController alloc]init];
    // 添加消息处理,注意:self指代的对象需要遵守WKScriptMessageHandler协议,结束时需要移除
    [UserContentController addScriptMessageHandler:self name:@"download"];//DownloadPolicy
    // 是否支持记忆读取
    Configuration.suppressesIncrementalRendering = YES;
    // 允许用户更改网页的设置
    Configuration.userContentController = UserContentController;
    
    _wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, kIs_iPhoneX? self.view.frame.size.height-34:self.view.frame.size.height) configuration:Configuration];
    _wkWebView.backgroundColor = [UIColor colorWithRed:240.0/255 green:240.0/255 blue:240.0/255 alpha:1.0];
    // 设置代理
    _wkWebView.navigationDelegate = self;
    _wkWebView.UIDelegate = self;
    // 垂直滚动
    [_wkWebView.scrollView setShowsVerticalScrollIndicator:NO];
    _wkWebView.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, kIs_iPhoneX? self.view.frame.size.height-34:self.view.frame.size.height);
    //开启手势触摸
    _wkWebView.allowsBackForwardNavigationGestures = YES;
    // 设置 可以前进 和 后退
    //适应你设定的尺寸
    [_wkWebView sizeToFit];
    [self.view addSubview:_wkWebView];
  }
  return _wkWebView;
}

iOS 9 以后和 iOS 8 之前 加载方法不一样,做区分

- (void)viewDidLoad {
  [super viewDidLoad];
  NSFileManager *fileManager = [NSFileManager defaultManager];
  NSArray *array1 = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
  NSString *matPath1 = [[array1 objectAtIndex:0] stringByAppendingPathComponent:@"QueHTML"];;
  if (![fileManager fileExistsAtPath:matPath1]) {
    NSString *matString = [[NSBundle mainBundle] pathForResource:@"QueHTML" ofType:@"bundle"];
    dispatch_async(dispatch_get_global_queue(0, 0), ^{
      [fileManager removeItemAtPath:matPath1 error:nil];
      [fileManager copyItemAtPath:matString toPath:matPath1 error:nil];
      dispatch_async(dispatch_get_main_queue(), ^{
        NSLog(@"创建完了");
        if ([[[UIDevice currentDevice] systemVersion] floatValue] < 9.0) {
          [self ios8Load];
        }
        else{
          [self ios9Load];
        }
      });
    });
  }
  else{
    if ([[[UIDevice currentDevice] systemVersion] floatValue] <9.0) {
      [self ios8Load];
    }
    else{
      [self ios9Load];
    }
  }
}
- (void)ios8Load {
  NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
  NSString *path = [paths objectAtIndex:0];
  NSString *basePath = [NSString stringWithFormat:@"%@/%@",path,@"QueHTML/"];
  [self.wkWebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[NSTemporaryDirectory() stringByAppendingPathComponent:[NSString stringWithFormat:@"www/QueHTML/index.html"]]]]];
}
- (void)ios9Load {
  NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
  NSString *path = [paths objectAtIndex:0];
  NSString *basePath = [NSString stringWithFormat:@"%@/%@",path,@"QueHTML/"];
  NSString *htmlPath = [NSString stringWithFormat:@"%@/%@",path,@"QueHTML/index.html"];
  NSURL *fileURL = [NSURL fileURLWithPath:htmlPath];
  if (@available(iOS 9.0, *)) {
    [self.wkWebView loadFileURL:fileURL allowingReadAccessToURL:[NSURL fileURLWithPath:basePath isDirectory:YES]];
  }
}

实现代理方法

// 接收到服务器跳转请求之后调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{
  NSLog(@"接收到服务器跳转请求----%@",navigation);
}
// 在收到响应后,决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
  NSLog(@"在收到响应后,决定是否跳转---%@",navigationResponse.response.URL.absoluteString);
  //允许跳转
  decisionHandler(WKNavigationResponsePolicyAllow);
  //不允许跳转
  //decisionHandler(WKNavigationResponsePolicyCancel);
}
// 在发送请求之前,决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
  NSLog(@"在发送请求之前,决定是否跳转---%@",navigationAction.request.URL.absoluteString);
  //允许跳转
  decisionHandler(WKNavigationActionPolicyAllow);
  //不允许跳转
  //decisionHandler(WKNavigationActionPolicyCancel);
}
#pragma mark - WKNavigationDelegate
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
  NSLog(@"页面开始加载");
}
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
  NSLog(@"内容开始返回");
}
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
  NSLog(@"页面加载完成");
}
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation{
  NSLog(@"页面加载失败");
}

如果是https访问需加上一下代码

- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler {
  if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
    if ([challenge previousFailureCount] == 0) {
      NSURLCredential *credential = [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust];
      completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
    } else {
      completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
    }
  } else {
   completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
  }
}

总结

以上所述是小编给大家介绍的vue 项目 iOS WKWebView 加载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
vue 实现走马灯效果
Oct 28 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 #Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 #Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 #Javascript
基于JS实现web端录音与播放功能
Apr 17 #Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 #Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 #Javascript
Vue项目路由刷新的实现代码
Apr 17 #Javascript
You might like
php桌面中心(二) 数据库写入
2007/03/11 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
Python实现的简单发送邮件脚本分享
2014/11/07 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
python中的闭包函数
2018/02/09 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
从0开始的Python学习016异常
2019/04/08 Python
Python笔记之facade模式
2019/11/20 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
总经理岗位职责范本
2014/02/02 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
学校安全管理制度
2015/08/06 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server