前言
使用WKWebView
可打开H5页面;但是可以有两种方式加载H5
- 链接方式:H5的代码部署到服务器环境中,WKWebView通过部署的链接地址加载H5页面
- 本地资源:把H5的代码,当成本地资源的方式,引入到项目中,WKWebView直接加载本地的资源;
但是二者都有各自的优缺点:
链接的方式
:
优点:可进行热更新,H5的代码发生了变化,只需要重新部署到服务器环境中,APP中的页面可自动刷新,不需要通过版本更新;
缺点:加载慢,每一次打开H5页面,都需要下载页面资源(包括js
、css
、图片等)可通过缓存进行优化
本地资源
优点:H5页面的所有资源都保存在了本地,不需要通过网络去获取,加载速度快;
缺点:不能热更新,若H5页面有改动,需要重新更新APP的版本,才能更新页面;
一、本地资源加载的优化
基于本地资源加载方式
不能热更新的缺点,提出了一些尝试,是否可通过把H5的包,通过网络的方式,直接下载到APP中,然后通过WKWebView去加载本地的包呢
1、H5打包,并网络下载到本地
使用vue
的项目打包为dist
文件夹,并进行压缩dist.zip
下载到本地
2、把下载下来的dist.zip
// 通过SSZipArchive进行解压
SSZipArchive.unzipFile(atPath: savePath, toDestination: resultPath)
3、WKWebView加载解压后的dist
let loginPath = path.appending("/dist/index.html")
let url = URL(fileURLWithPath: loginPath)
let request = URLRequest(url: url)
let documentPath = NSHomeDirectory().appending("/Documents")
if #available(iOS 15.0, *) {
self.webview.loadFileRequest(request, allowingReadAccessTo: URL(fileURLWithPath: documentPath))
} else {
self.webview.loadFileURL(url, allowingReadAccessTo: URL(fileURLWithPath: documentPath))
}
通过上述的尝试,说明是可行的;至于何时下载
dist
包,可通过接口的方式进行检测;