WKWebView Demo实践：iOS网页视图组件的快速上手教程

一、引言

在iOS应用开发中，经常需要在原生应用中嵌入网页内容。自iOS 8.0起，Apple推出了WKWebView作为新一代网页视图组件，取代了传统的UIWebView。WKWebView基于现代WebKit引擎，提供了更优的性能、更低的内存占用和更丰富的功能。

本文将通过一个完整的Demo项目，带领你快速掌握WKWebView的核心使用方法和最佳实践。

二、WKWebView的核心优势

相比旧版UIWebView，WKWebView具有以下显著优势：

性能提升：
- JavaScript执行速度提升高达20-40倍
- 内存占用仅为UIWebView的1/4左右
- 支持60fps的滚动刷新率
功能增强：
- 原生支持Web Inspector（调试工具）
- 提供更精细的网页加载进度监听
- 支持JavaScript与原生代码的双向通信
- 内置内容过滤和安全机制
API优化：
- 更简洁的接口设计
- 完善的代理方法体系
- 支持异步加载和多进程处理

三、环境准备

3.1 开发环境要求

Xcode 12.0+
iOS 11.0+（建议目标版本设为iOS 13.0+）
Swift 5.0+

3.2 创建项目

打开Xcode，选择"Create a new Xcode project"
选择"iOS" -> "App"模板，点击"Next"
填写项目信息：
- Product Name: WKWebViewDemo
- Interface: Storyboard
- Language: Swift
选择项目存储位置，点击"Create"

四、WKWebView基本使用Demo

4.1 界面布局

4.1.1 Storyboard方式

打开Main.storyboard，拖拽一个WKWebView到ViewController
配置约束：将WKWebView与ViewController的四个边缘对齐
关联WKWebView到代码：
```
@IBOutlet weak var webView: WKWebView!
```

4.1.2 纯代码方式

import UIKit
import WebKit
 
class ViewController: UIViewController {
    var webView: WKWebView!
 
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 配置WKWebView
        let configuration = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: configuration)
        webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        
        // 加载网页
        if let url = URL(string: "https://www.apple.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
        
        view.addSubview(webView)
    }
}

4.2 加载网页

4.2.1 加载网络URL

let url = URL(string: "https://www.example.com")!
let request = URLRequest(url: url)
webView.load(request)

4.2.2 加载本地HTML文件

// 加载项目中的本地HTML文件
if let htmlPath = Bundle.main.path(forResource: "index", ofType: "html") {
    let htmlURL = URL(fileURLWithPath: htmlPath)
    webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())
}

4.2.3 加载HTML字符串

let htmlString = """
<html>
    <body>
        <h1>Hello, WKWebView!</h1>
        <p>This is a local HTML content.</p>
    </body>
</html>
"""
webView.loadHTMLString(htmlString, baseURL: nil)

4.3 实现核心代理方法

要监听网页加载状态，需要遵守WKNavigationDelegate协议：

class ViewController: UIViewController, WKNavigationDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        webView.navigationDelegate = self
        // ... 其他配置
    }
    
    // 网页开始加载时调用
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("开始加载网页")
        // 可以显示加载指示器
    }
    
    // 网页加载完成时调用
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("网页加载完成")
        // 隐藏加载指示器
        // 可以在此处执行JavaScript代码
    }
    
    // 网页加载失败时调用
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("网页加载失败: \(error.localizedDescription)")
        // 显示错误提示
    }
    
    // 决定是否允许导航（拦截请求）
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        // 可以在此处拦截特定URL或请求类型
        decisionHandler(.allow) // 允许导航
        // decisionHandler(.cancel) // 取消导航
    }
}

五、高级功能实现

5.1 JavaScript与原生代码交互

5.1.1 原生调用JavaScript

// 调用网页中的JavaScript函数
webView.evaluateJavaScript("sayHello('iOS')") { (result, error) in
    if let error = error {
        print("JS调用失败: \(error.localizedDescription)")
        return
    }
    if let result = result {
        print("JS调用结果: \(result)")
    }
}

5.1.2 JavaScript调用原生代码

配置WKWebViewConfiguration：

let configuration = WKWebViewConfiguration()
let userContentController = WKUserContentController()
// 添加消息处理程序，name参数与JS中的名称一致
userContentController.add(self, name: "iOSBridge")
configuration.userContentController = userContentController
webView = WKWebView(frame: view.bounds, configuration: configuration)

实现WKScriptMessageHandler协议：

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "iOSBridge" {
            print("收到JS消息: \(message.body)")
            // 处理JS传递的数据
            if let params = message.body as? [String: Any] {
                let action = params["action"] as? String
                let data = params["data"] as? [String: Any]
                // 根据action执行相应操作
            }
        }
    }
}

JavaScript中调用：

// JS代码
window.webkit.messageHandlers.iOSBridge.postMessage({
    "action": "showAlert",
    "data": {"title": "提示", "content": "来自JS的消息"}
});

5.2 网页加载进度监听

// 监听estimatedProgress属性
webView.addObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress), options: .new, context: nil)
 
// 实现KVO回调
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if keyPath == #keyPath(WKWebView.estimatedProgress) {
        let progress = webView.estimatedProgress
        print("加载进度: \(progress * 100)%")
        // 可以更新进度条UI
    }
}
 
// 记得在deinit中移除观察者
deinit {
    webView.removeObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress))
}

5.3 前进后退与刷新

// 前进
if webView.canGoForward {
    webView.goForward()
}
 
// 后退
if webView.canGoBack {
    webView.goBack()
}
 
// 刷新
webView.reload()
 
// 停止加载
webView.stopLoading()

六、安全与性能优化

6.1 HTTPS支持

WKWebView默认支持HTTPS
如需支持HTTP，需在Info.plist中配置ATS（App Transport Security）例外：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

6.2 内存优化

// 在视图控制器销毁前正确释放资源
deinit {
    webView.navigationDelegate = nil
    webView.uiDelegate = nil
    webView.stopLoading()
    // 如果使用了WKScriptMessageHandler，记得移除
    webView.configuration.userContentController.removeScriptMessageHandler(forName: "iOSBridge")
    webView.removeFromSuperview()
}

6.3 内容安全策略

建议在网页中设置Content-Security-Policy（CSP）头
在原生代码中可以通过WKWebViewConfiguration的userContentController添加脚本

七、常见问题与解决方案

7.1 网页无法加载

检查网络连接和URL格式
检查ATS配置（HTTP请求）
检查是否有代理拦截或防火墙限制

7.2 JavaScript交互失败

检查messageHandler的name是否一致
确保JS代码在网页加载完成后执行
检查是否在deinit中移除了messageHandler

7.3 内存泄漏

确保正确设置delegate为nil
及时移除KVO观察者和messageHandler
避免循环引用

八、Demo项目总结

通过本文的学习，你已经掌握了：

WKWebView的基本创建和布局方法
加载网络网页和本地HTML内容
实现网页加载状态监听和进度显示
JavaScript与原生代码的双向通信
前进、后退、刷新等基本操作
安全和性能优化的最佳实践

完整的Demo项目可以帮助你快速理解WKWebView的使用流程，你可以在此基础上扩展更多功能，如：

自定义导航栏
网页内容适配
文件上传下载
网页截图等

九、学习资源推荐

希望本文能帮助你快速上手WKWebView，开发出高性能的iOS网页嵌入应用！

说明：本文Demo项目基于Swift 5.7和Xcode 15.0开发，兼容iOS 13.0+系统。

（此内容由 AI 辅助生成，仅供参考）