[Swift]使用WKWebView加载本地HTML文件

我们项目中有的时候会使用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以路径的方式来来加载.

最后编辑于：2017.11.28 15:08:23