随着苹果爸爸强制推动WKWebView替代UIWebView,各旧项目的替换工作随之而来,据说在2020年12月31日前未将UIWebView替换成WKWebView的项目将会被下架,而新项目在初次上线审核就会被卡。
本文主要介绍一下如何在WKWebView加载本地Web项目,包括项目中的js以及css文件。
首先我们先将Web项目打包成文件夹准备好
文件目录
将项目拖进Xcode,并选择"create folder references" ,由于前端代码引用文件,图标什么的都是使用的路径。所以用第一种方式就会发现用webview加载前端页面时,页面是乱的,因为加载不到指定路径的js和css文件。
拉进Web项目注意点
拉进Web项目后目录结构
本地html带参数加载方法1(NSURLComponents插入参数)
// 方法1
//获取html所在绝对路径
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"wk_test_project"];
//生成url 此时并未拼接参数
NSURL *fileUrl = [NSURL fileURLWithPath:htmlPath isDirectory:false];//isDirectory的意思是加载的路径是否是一个目录,传true时url最后会拼接上“ / ”,表示多一层目录结构。
//创建Components
NSURLComponents *urlComponents = [NSURLComponents componentsWithURL:fileUrl resolvingAgainstBaseURL:NO];
//创建参数数组
NSArray *itemsArr = [NSArray arrayWithObjects:[NSURLQueryItem queryItemWithName:@"userID" value:@"1010"], [NSURLQueryItem queryItemWithName:@"baseUrl" value:@"https://molecular.com"], nil];
//设置参数
[urlComponents setQueryItems:itemsArr];
// 加载 本地路径加载必须用loadFileURL方法
[_webView loadFileURL:urlComponents.URL allowingReadAccessToURL:urlComponents.URL];
本地html带参数加载方法2(stringWithFormat拼接绝对路径和参数)
// 方法2
//获取html所在绝对路径
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"wk_test_project"];
//fileUrl拼接参数
NSString* path = [NSString stringWithFormat:@"file://%@?userID=1010&baseUrl=https://molecular.com",htmlPath];//转成file路径,并且拼上参数
// 加载 本地路径加载必须用loadFileURL方法
[_webView loadFileURL:[NSURL URLWithString:path] allowingReadAccessToURL:[NSURL URLWithString:path]];
要点
加载本地路径必须使用loadFileURL方法,如果用loadRequest的话在模拟器上会加载失败,在真机上加载速度缓慢,并会有“闪屏特效”!
切勿直接将路径用fileURLWithPath转为URL!此时获得的URL中的"?"被转码成"%3F"
NSString *filePath = [htmlPath stringByAppendingPathComponent:@"?userID=1010&baseUrl=https://molecular.com"];
NSURL *fileUrl = [NSURL fileURLWithPath: filePath];
//打印结果 “?”已被转码为“%3F”
loadUrl === " file:///var/containers/Bundle/Application/D066E775-9903-4945-8E74-AFA8055B8096/WKWebViewTestProject.app/wk_test_project/index.html%3FuserID=1010&baseUrl=https://molecular.com "