WKWebView填坑之----加载沙盒图片和音视频文件

我们APP的核心功能实现方式为:原生和JS交互。这就需要频繁的互传数据,互传数据在这里就先不说,之后写的一篇,可以看这个。WKWebView填坑之----与H5相互交互

最早用的UIWebView,交互没有WebKit方便但也还凑合,主要是太吃内存了,性能太差,而且现在最低支持iOS 8,所以决定换成WebKit,由此开始了这次的填坑之路。

我们前端显示的内容是从沙盒内加载的图片和音乐文件,用UIWebView时是我把文件的本地路径传给前端然后前端直接去访问文件的本地路径就可以了,但是换成WebKit就没办法加载出来资源文件。google了之后发现这是WebKit现在的bug,好吧,没什么好的解决方案,大部分给的都是在文件前加一个localhost,但是也没给出具体的方案实施步骤。这一看就是在本地开了一个类似Apache服务器啊,顿时感觉这思路也是可以。有了思路现在就开始干。

GitHub上有个神器:GCDWebServer,这次就用的这个
pod集成这些就不说了,直接上代码

// 官方给的示例是在AppDelegate里启动本地服务器,但是我这个并没有必要在APP启动时就启动本地服务器,所以我放在了核心功能控制器的viewDidLoad方法内
// 1.导入头文件
#import 
// 2.定义全局属性
@property (nonatomic,strong) GCDWebServer *webSever;

// 3. 主要代码
     _webSever = [[GCDWebServer alloc]init];
    [_webSever addGETHandlerForBasePath:@"/" directoryPath:NSHomeDirectory() indexFilename:nil cacheAge:3600 allowRangeRequests:YES];
    [_webSever startWithPort:80 bonjourName:nil];
// 好了,这就结束了!WTF,这就完了,是的,可以这么说
// 比方说文件存在Library下有一个123的文件
NSString *basePath = @"http://localhost/Library/123"; // 这样就可以访问到这个文件了,我只需要把我的文件名拼上localhost路径然后传给前端,他们拿到这个链接直接访问就可以拿到这个文件了

上面只是代码,还是来点调试过程吧!
进入到APP内的WebView页面,然后

WKWebView填坑之----加载沙盒图片和音视频文件_第1张图片
Snip20170309_10.png

对了,这里Safari需要把“开发”选项打开
点击链接后回打开一个网页检查器

WKWebView填坑之----加载沙盒图片和音视频文件_第2张图片
Snip20170309_14.png
WKWebView填坑之----加载沙盒图片和音视频文件_第3张图片
Snip20170309_15.png
WKWebView填坑之----加载沙盒图片和音视频文件_第4张图片
Untitled.gif

可以看到我们已经可以访问沙盒内容了,如果在mac上开过本地Apache服务器的同学看到这个界面应该一眼就能看出来这是开了一个本地服务器。
至此,大功告成。我只需要把路径告诉前端我的工作就完成了。

忘了说了,在viewDidLoad开启的话在控制器注销时需要把本地服务器停止

// 此页面并没有右滑返回手势
- (void)goBack{
    // 这也是为什么要定义全局属性的原因 
    [_webSever stop];
    _webSever = nil;
    [self.navigationController popViewControllerAnimated:YES];
}

顺便说一下,GCDWebServer我在模拟器上并不能通过IP地址或者localhost来访问。

你可能感兴趣的:(WKWebView填坑之----加载沙盒图片和音视频文件)