WKWebView 开源项目教程

WKWebView 开源项目教程

WKWebView项目地址:https://gitcode.com/gh_mirrors/wkwe/WKWebView

项目介绍

WKWebView 是一个基于 Apple 的 WebKit 框架的开源项目，旨在提供一个高效、灵活的网页渲染解决方案。该项目不仅支持网页内容的加载，还提供了 JavaScript 与 Objective-C 之间的交互功能，以及网页内容加载进度条的实现。此外，WKWebView 还支持与 UITableView 混排和离线缓存功能，使其在移动应用开发中具有广泛的应用前景。

项目快速启动

安装

首先，通过 CocoaPods 安装 WKWebView：

pod 'WKWebView', :git => 'https://github.com/wslcmk/WKWebView.git'

初始化

在您的项目中引入 WKWebView，并进行初始化：

#import <WebKit/WebKit.h>

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
WKPreferences *preference = [[WKPreferences alloc] init];
preference.minimumFontSize = 0;
preference.javaScriptEnabled = YES;
preference.javaScriptCanOpenWindowsAutomatically = YES;
config.preferences = preference;

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
webView.UIDelegate = self;
webView.navigationDelegate = self;
webView.allowsBackForwardNavigationGestures = YES;

[self.view addSubview:webView];

NSURL *url = [NSURL URLWithString:@"https://www.example.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];

应用案例和最佳实践

网页内容加载进度条

通过 KVO 监听 estimatedProgress 属性，实现加载进度条：

[webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        CGFloat progress = webView.estimatedProgress;
        // 更新进度条
    }
}

JS 与 OC 交互

通过 WKScriptMessageHandler 实现 JavaScript 与 Objective-C 的交互：

WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[userContentController addScriptMessageHandler:self name:@"jsToOc"];
config.userContentController = userContentController;

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"jsToOc"]) {
        // 处理 JavaScript 发送的消息
    }
}

典型生态项目

WKWebView+UITableView 混排

结合 UITableView 和 WKWebView，实现复杂的页面布局：

UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
tableView.delegate = self;
tableView.dataSource = self;
[self.view addSubview:tableView];

// 在 tableView 的某个 cell 中添加 WKWebView
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 300) configuration:config];
[cell.contentView addSubview:webView];

WKWebView 离线缓存

通过 NSURLProtocol 实现离线缓存功能：

[NSURLProtocol registerClass:[CustomURLProtocol class]];

@interface CustomURLProtocol : NSURLProtocol
@end

@implementation CustomURLProtocol
+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    // 判断是否需要处理该请求
    return YES;
}

+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
    return request;
}

- (void)startLoading {
    // 加载缓存数据或发起网络请求
}

- (void)stopLoading {
    //

WKWebView项目地址:https://gitcode.com/gh_mirrors/wkwe/WKWebView