iOS WKWebView 本地HTML趾访、JS、CSS文件加載詳解
Tips:
NSString類型的文件路徑轉(zhuǎn)換為URL的時候董虱，一定要用
NSURL *pathURL = [NSURL fileURLWithPath:filePath];方法去轉(zhuǎn)換扼鞋，否則資源URL不合法，APP會崩潰
上源碼接口：
loadRequest方式加載
-
API : iOS8即可使用
- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request; -
用途：
- 1：主要用來加載網(wǎng)絡(luò)URL
- 2：也可以加載本地HTML文件（本文重點）
loadFileURL
-
API: URL:文件相對路徑 readAccessURL：訪問文件需要引用的文件的路徑 一般都是比
URL大一級或者更高幾級- (nullable WKNavigation *)loadFileURL:(NSURL *)URL allowingReadAccessToURL:(NSURL *)readAccessURL API_AVAILABLE(macosx(10.11), ios(9.0)); 用途：主要用于加載本地文件（一般指相對路徑）
loadHTMLString
API:
- (nullable WKNavigation *)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;用途：主要用于 HTML轉(zhuǎn)換成的字符串（比如：編程APP）
loadData
-
API: 值得一提的是MIMETType,text/html愤诱、image/jpg云头、text/plain
- (nullable WKNavigation *)loadData:(NSData *)data MIMEType:(NSString *)MIMEType characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL API_AVAILABLE(macosx(10.11), ios(9.0)); 用途：主要用于加載 二進制狀態(tài)下的文件，主要包括HTML淫半、Image溃槐、Text文本
開發(fā)中的HTML文件位置
HTML位于工程內(nèi)的黃色文件夾下
這是咱們一般的文件添加方式，這屬于絕對路徑的添加
loadRequest 加載方式
Tips:
iOS8 的時候只能通過這個loadRequest方法去加載
iOS8 WKWebView的加載本地文件的方式本文后面會有 詳細方案
NSString *bundleStr = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html"];
_feedbackUrl = [NSURL fileURLWithPath:bundleStr];
[_webview loadRequest:[NSURLRequest requestWithURL:_feedbackUrl]];
warning？瓶浴；璧巍猴鲫！
頁面能加載出來，但是效果是很差的谣殊，因為CSS拂共、JS、圖片資源文件沒有得到正確的引用蟹倾！
那我們該通過什么方式來讓這些附屬的文件得到正確引用呢匣缘？
iOS9之后新增了 loadFileURL 等一系列加載本地文件的方法
loadFileURL加載方式
iOS9之后才出現(xiàn)這個加載方式
NSString *bundleStr = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html"];
_feedbackUrl = [NSURL fileURLWithPath:bundleStr];
if (@available(iOS 9.0, *)) {
[_webview loadFileURL:[NSURL fileURLWithPath:bundleStr] allowingReadAccessToURL:[NSURL fileURLWithPath:[NSBundle mainBundle].bundlePath]];
} else {
// Fallback on earlier versions
}
哇塞！加載出來了耶鲜棠！但是 依舊是沒能加載其他資源文件啊 ??
客觀肌厨，稍安勿躁 ~
HTML位于工程內(nèi)的藍色文件夾下
特殊文件添加方式，尤其是文件之間有相互引用的時候用這種方式
loadRequest 方式
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html" inDirectory:@"FeedbackH5/pages"];
NSURL *pathURL = [NSURL fileURLWithPath:filePath];
if (@available(iOS 9.0, *)) {
[_webview loadRequest:[NSURLRequest requestWithURL:pathURL]];
}
loadFileURL 方式加載
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"feedback" ofType:@"html" inDirectory:@"FeedbackH5/pages"];
NSURL *pathURL = [NSURL fileURLWithPath:filePath];
if (@available(iOS 9.0, *)) {
// [_webview loadRequest:[NSURLRequest requestWithURL:pathURL]];
[_webview loadFileURL:[NSURL fileURLWithPath:filePath] allowingReadAccessToURL:[NSURL fileURLWithPath:[NSBundle mainBundle].bundlePath]];
}
由此可見：相對路徑方式加載 是可以正常引用JS豁陆、css等資源文件的
但是 iOS 8系統(tǒng)下柑爸，依舊加載不出來！：幸簟表鳍！
HTML位于APP沙盒下Document文件夾
iOS8既然添加到工程中引用，一直引用不到祥诽，我們可以讓他從document路徑下引用試試譬圣！
這個方法可以適配 iOS8系統(tǒng)下WKWebView加載本地文件了？
你還太天真Ｐ燮骸＠迨臁！
//項目中的文件夾路徑
NSString *directoryPath = [KFileManger appSourceName:@"FeedbackH5" andType:@""];
//沙盒中的document路徑
NSString *documentpath = [KFileManger documentPath];
//copy文件夾到 document 路徑下
[KFileManger copyMissingFile:directoryPath toPath:documentpath];
//document 路徑下的HTML文件路徑
NSString *homePath = [[KFileManger documentPath] stringByAppendingString:@"/FeedbackH5/pages/feedback.html"];
//document 路徑下的HTML文件 URL
NSURL *docSourceURL = [NSURL fileURLWithPath:homePath];
[_webview loadRequest:[NSURLRequest requestWithURL:docSourceURL]];
果然不出所料(zhe jiu shi wo xiang yao de)维哈，模擬器上能正常加載出界面绳姨，圖片、CSS但是JS交互是不行的
在真機 依舊加載不出任何界面阔挠！
HTML位于APP沙盒下tmp臨時緩存文件夾
親愛的客觀們飘庄，這才是iOS8系統(tǒng)下加載有相互引用關(guān)系的HTML、JS购撼、CSS以及圖片資源的正確方法(當(dāng)前知道的唯一方法如有新的方式私信我哦~)跪削！??
//項目中的文件夾路徑
NSString *directoryPath = [KFileManger appSourceName:@"FeedbackH5" andType:@""];
//tmp緩存文件夾路徑
NSString *tmpPath = [KFileManger tmpPath];
//新文件夾名字
NSString *wwwDir =@"www";
//tmp文件夾下創(chuàng)建www文件夾
[KFileManger createDirWithPath:tmpPath andDirectoryName: wwwDir];
//tmp中的www文件夾中的路徑
NSString *tmpWWW = [tmpPath stringByAppendingString: wwwDir];
//copy文件夾到 tmp/www 路徑下
[KFileManger copyMissingFile:directoryPath toPath:tmpWWW];
// 字符 tmp/www/FeedbackH5/pages/feedback.html 全路徑
NSString *tmpWWWFeedback = [tmpWWW stringByAppendingString:@"/FeedbackH5/pages/feedback.html"];
//tmp 操作，字符轉(zhuǎn)換成URL
NSURL *feedbackURL = [NSURL fileURLWithPath:tmpWWWFeedback];
//WKWebView加載
[_webview loadRequest:[NSURLRequest requestWithURL:feedbackURL]];
