利用 WKWebView 在 Uni-App 中加载本地 H5 以优化加载速度

2023-10-12 17:24:32

优化 Uni-App 应用加载速度：通过 WKWebView 直接加载 H5 包

简介

作为一名移动应用开发者，你不断寻求方法来提升用户体验。Uni-App 框架通过允许开发者使用 JavaScript 和 Vue.js 构建跨平台原生应用，极大地简化了这一流程。但是，H5 代码的加载速度可能会成为影响用户体验的瓶颈。本文将探讨如何通过将打包发布的 H5 包直接加载到 WKWebView 中来显著提高 Uni-App 应用的加载速度。

直接加载

直接加载是加载 H5 包的最简单方法。它涉及将包放置在 iOS 项目中，并使用 WKWebView 在应用中加载它。

步骤：

在 Xcode 项目中，创建一个名为 "www" 的文件夹。
将打包发布的 H5 包复制到 "www" 文件夹中。
在 AppDelegate.m 中，配置 WKWebView 如下：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.window.frame configuration:config];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"www"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]];
[webView loadRequest:request];
[self.window addSubview:webView];

服务器预下载

服务器预下载是一种更灵活的方法，因为它允许开发者将 H5 包从后台服务器预先下载到文件沙盒中，然后由 WKWebView 加载。这种方法的优势在于它可以减少 App Store 的安装包大小，并允许开发者在发布后更新 H5 代码。

步骤：

在服务器上部署 H5 包。
在 AppDelegate.m 中，配置 WKWebView 如下：

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.window.frame configuration:config];
NSString *filePath = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject] stringByAppendingPathComponent:@"index.html"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:filePath]];
[webView loadRequest:request];
[self.window addSubview:webView];

在应用启动时，从服务器下载 H5 包：

- (void)downloadH5Package {
    NSURL *url = [NSURL URLWithString:@"https://your-server.com/h5-package.zip"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    NSURLSession *session = [NSURLSession sharedSession];
    NSURLSessionDownloadTask *task = [session downloadTaskWithRequest:request completionHandler:^(NSURL * _Nullable location, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        if (error) {
            // 处理错误
        } else {
            NSString *filePath = [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) firstObject] stringByAppendingPathComponent:@"index.html"];
            [[NSFileManager defaultManager] moveItemAtURL:location toURL:[NSURL fileURLWithPath:filePath] error:nil];
            [webView loadRequest:request];
        }
    }];
    [task resume];
}