WKWebView（二）下载H5代码后展示

前言

使用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包，可通过接口的方式进行检测；