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 相关文章推荐
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 Javascript
基于jQuery实现可编辑的表格
Dec 11 jQuery
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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP出错界面
2006/10/09 PHP
php 文章调用类代码
2011/08/11 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
js实现继承的方法及优缺点总结
2019/05/08 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
python购物车程序简单代码
2018/04/18 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
linux安装python修改默认python版本方法
2019/03/31 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
tensorflow实现tensor中满足某一条件的数值取出组成新的tensor
2020/01/04 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
Python sublime安装及配置过程详解
2020/06/29 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
仓库管理制度
2014/01/21 职场文书
学习之星事迹材料
2014/05/17 职场文书
班训口号大全
2014/06/18 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android