SwiftUI WKWebView网页视图

WKWebView 是苹果提供的 网页渲染引擎视图组件，属于 WebKit 框架。

用于iOS / macOS 应用里嵌入网页内容。

历史前身

在 iOS 8 之前，系统使用 UIWebView。但它速度慢、内存占用高、线程全在主线程上，非常落后。

于是苹果推出了现代化的 WKWebView（W = WebKit，K = KDE 来源），性能提升巨大：

WKWebView使用新版 Nitro引擎（与 Safari 同级），性能块，独立进程，JS交互更强大并且支持双向通信，沙盒隔离，安全性更高。

从 iOS 12 开始，UIWebView 已被完全弃用，WKWebView 是唯一推荐方式。

基本用法

SwiftUI 显示 UIKit 的 WKWebView：

import SwiftUI
import WebKit

struct WebView: UIViewRepresentable {
    let url: URL
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        let request = URLRequest(url: url)
        webView.load(request)
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {}
}

然后在 SwiftUI 视图里用：

WebView(url: URL(string: "https://www.fangjunyu.com")!)

实现 App 内直接浏览网页。

基本功能

1、加载网页内容

webView.load(URLRequest(url: URL(string: "https://apple.com")!))

2、加载本地HTML

webView.loadHTMLString("<h1>Hello</h1>", baseURL: nil)       3、执行JavaScript

webView.evaluateJavaScript("document.title") { result, error in
    print(result ?? "")
}

4、Swift和JavaScript通信

实现双向交互，比如网页触发按钮让 Swift 代码响应。

注册监听：

webView.configuration.userContentController.add(self, name: "iosListener")

网页端触发：

window.webkit.messageHandlers.iosListener.postMessage("Hello from JS")

Swift 端接收：

extension YourViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print(message.body)
    }
}

SwiftUI监听网页加载进度

可以在SwiftUI实现更完整的封装，并监听网页加载进度：

struct WebView: UIViewRepresentable {
    let url: URL
    @Binding var progress: Double
    
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.load(URLRequest(url: url))
        webView.addObserver(context.coordinator, forKeyPath: "estimatedProgress", options: .new, context: nil)
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {}
    
    func makeCoordinator() -> Coordinator { Coordinator(self) }
    
    class Coordinator: NSObject {
        var parent: WebView
        init(_ parent: WebView) { self.parent = parent }
        
        override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
            if keyPath == "estimatedProgress",
               let webView = object as? WKWebView {
                parent.progress = webView.estimatedProgress
            }
        }
    }
}

适用场景

App 内展示网页（比如“帮助中心”“隐私政策”）；

混合 App（Hybrid App：部分页面用 HTML/JS）；

加载自己生成的 HTML（报表、图表、富文本）；

与网页前端交互（消息通知、登录验证、支付页面等）。

总结

WKWebView属于WebKit框架，属于UIView / NSView子类。

渲染性能和Safari相同，支持JavaScript和Swift双向交互，拥有独立进程、沙盒隔离，安全性更高。

iOS 8+ 推荐唯一网页方案。

如果是单独的打开网页链接，可以使用Link或者openURL。

相关文章

1、SwiftUI打开链接openURL：https://fangjunyu.com/2025/11/07/swiftui%e6%89%93%e5%bc%80%e9%93%be%e6%8e%a5openurl/

2、SwiftUI超链接Link：https://fangjunyu.com/2024/12/31/swift%e5%ba%94%e7%94%a8%e5%86%85%e5%88%9b%e5%bb%ba%e8%b6%85%e9%93%be%e6%8e%a5%e7%9a%84link%e6%96%b9%e6%b3%95/