我們項目中有的時候會使用HTML寫一些靜態頁面, 然后直接加載顯示到我們的APP中, 之前一直使用的UIWebView來加載, 是這樣的:

let webView = UIWebView()
        self.view.addSubview(webView)
        webView.frame = self.view.bounds
        
        let filePath = Bundle.main.path(forResource: "test", ofType: "html")
        guard let path = filePath else {
            return
        }
        
        guard let url = URL(string: path) else {
            return
        }
        
        let request = URLRequest(url: url)
        
        webView.loadRequest(request)

如果想使用WKWebView來加載, 好像失敗了:

PS:使用WKWebView需要引用頭文件:

import WebKit

let webView = WKWebView()
        self.view.addSubview(webView)
        webView.frame = self.view.bounds
        
        let filePath = Bundle.main.path(forResource: "test", ofType: "html")
        guard let path = filePath else {
            return
        }
        
        guard let url = URL(string: path) else {
            return
        }
        
        let request = URLRequest(url: url)
        
        webView.load(request)

這樣是加載不了本地的HTML文件的. 下面就來看一下加載本地HTML的方法.

方法一

一般我們直接添加到項目中的文件是默認Create groups的, 即: 在我們添加文件到項目中, 例如一個文件夾, 選項是這樣的:

我們選擇的是Create groups

這樣在項目中添加的文件夾是黃色的, 這時我們在加載HTML的不能使用path來加載了, 應該使用URL, 即:

if let url = Bundle.main.url(forResource: "test", withExtension: "html") {
            let request = URLRequest(url: url)
            webView.load(request)
        }

方法二

如果還是使用filePath來加載, 也是可以的, 但是將HTML文件添加到資源目錄的時候需要注意: 我們需要選擇Create folder references, 為便于區分, 我同樣是添加了一個文件夾, 然后將HTML文件添加到這個文件下面:

選擇Create folder references

這時候會發現, 文件夾是藍色的, 項目中是這樣的:

將HTML文件放到這個藍色文件夾下面后, 我們就可以在項目中這樣使用WKWebView來加載了:

let webView = WKWebView()
        self.view.addSubview(webView)
        webView.frame = self.view.bounds
        
        let bundlePath = Bundle.main.bundlePath
        
        let path = "file://\(bundlePath)/HTML_Files/newTest.html"
        
        guard let url = URL(string: path) else {
            return
        }
        
        let request = URLRequest(url: url)
        
        webView.load(request)

這里最主要的是需要自己來拼接完整的文件路徑:

格式:
file:// + bundlePath + 項目內相對路徑
例如, 本示例: 文件是放在項目中HTML_Files文件夾下的, 其相對路徑為: HTML_Files/newTest.html, 這樣完整的路徑就是: "file://(bundlePath)/HTML_Files/newTest.html"

上面黃色文件夾Files下的HTML可以使用UIWebView, 使用之前的方式加載, 也可以使用WKWebView以URL的方式來加載; 藍色HTML_Files文件夾下的HTML文件, 可以使用上面的方式用WKWebView以路徑的方式來來加載.