SwiftUI 7 新 WebView：金蛇出洞，网页江湖换新天

概述

崇祯年间，华山派武学虽盛，却在应对江湖新局时渐显颓势；如今 SwiftUI 江湖亦是如此 ——WWDC 25 之前，若要在 SwiftUI 中显示网页，开发者恰似袁承志初闯江湖，纵有一身本领，却苦无称手兵刃。

直到那柄 “金蛇剑” 般的全新 WebView 横空出世，才让网页显示之道豁然开朗。

想得到那柄可以横扫武林的神兵利器金蛇剑吗？那还等什么？让我们马上开始寻“剑”之旅吧！

Let’s go！！！😉

---

一、往昔困局：华山旧功难破迷阵

想当年，SwiftUI 自身并无网页显示的独门心法，开发者们只得借 UIKit 的 WKWebView 这柄 “钝剑”，再辅以UIViewRepresentable为鞘，方能勉强施展。

这般操作，犹如袁承志在华山练剑时，需先扎三年马步 —— 基础虽牢，却失之滞涩。

且看这套 “华山入门剑法”：

import SwiftUI
import WebKit// 以UIViewRepresentable为桥，连接SwiftUI与WKWebView
struct WebViewWrapper: UIViewRepresentable {let url: URL?func makeUIView(context: Context) -> WKWebView {return WKWebView()}func updateUIView(_ uiView: WKWebView, context: Context) {guard let url = url else { return }uiView.load(URLRequest(url: url))}
}// 实战时需如此调用，恰似执钝剑闯敌营
struct ContentView: View {var body: some View {WebViewWrapper(url: URL(string: "https://apple.com")).frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)}
}

这套功夫虽能御敌，却有三大弊端：

• 其一，updateUIView反复调用时易生错乱，好比剑法中 “剑招互碍”；
• 其二，网页状态监听需另设代理，犹如练剑时还要分心护脉；
• 其三，与 SwiftUI 状态管理结合时，常现 “内力相冲” 之象 —— 稍有不慎便会数据错乱。

二、金蛇出洞：WWDC 25 的 WebView 新法

正当开发者们困于旧法之时，WWDC 25 恰似一场武林大会，苹果突然亮出 “金蛇剑”——SwiftUI 原生 WebView 横空出世！此剑一出，如金蛇郎君夏雪宜重现江湖，招式灵动，浑然天成，将网页显示之道推向新境。

1. 初窥门径：基础网页加载

新 WebView 的基础用法，恰似袁承志初得金蛇剑时的随手一挥，看似简单却暗藏玄机：

import SwiftUI
import WebKitstruct ContentView: View {// 直接使用URL初始化，无需繁琐包装var body: some View {WebView(url: URL(string: "https://apple.com")).navigationTitle("金蛇洞").edgesIgnoringSafeArea(.bottom)}
}

这般代码，较之旧法省去近八成冗余，正如金蛇剑法 “险、奇、快” 之妙 —— 无需再写UIViewRepresentable的桥接代码，无需手动管理 WebView 生命周期，SwiftUI 自会料理妥当。

真乃呜呼快哉！

2. 内功心法：WebPage 状态管理

若要深入掌控网页状态，需修习 “金蛇秘籍”——WebPage类。此物如同袁承志从山洞中所得的金蛇锥谱，将网页的标题、URL、加载进度等信息尽收其中：

import SwiftUI
import WebKit
internal import Combine// 实战运用：将心法与招式结合
struct ContentView: View {@State private var page = WebPage()@State private var id: WebPage.NavigationID?@State private var isLoading = false@State private var event: WebPage.NavigationEvent?var body: some View {NavigationStack {WebView(page).navigationTitle(page.title).toolbar {ToolbarItem(placement: .primaryAction) {Button(action: {page.reload()}) {Image(systemName: "arrow.counterclockwise")}}ToolbarItem(placement: .topBarLeading) {if isLoading {ProgressView()}}}.onChange(of: page.isLoading) { _, new inisLoading = new}.onReceive(page.currentNavigationEvent.publisher) { event inguard event.navigationID == id else { return }switch event.kind {case let .failed(underlyingError: error):print(error.localizedDescription)case .finished:print("网页加载完毕")default:break}}.task {let request = URLRequest(url: .init(string: "https://blog.csdn.net/mydo")!)id = page.load(request)}}}
}

此处关键在于@Published属性 —— 当网页标题变化时，导航栏会如响应内力般自动更新；进度条则像金蛇吐信般实时菊花旋转：

这般状态同步，较旧法中手动绑定NotificationCenter的操作，可谓 “化繁为简，返璞归真”。

3. 奇门绝技：JS 交互与平台适配

新 WebView 最令人称道之处，莫过于对 JavaScript 交互的 “化骨绵掌” 式处理。

昔日要在 Swift 与 JS 间传递数据，需写十数行桥接代码，如同袁承志在华山与温家五老缠斗时的狼狈；如今却能一剑破局：

// 实战运用：将心法与招式结合
struct ContentView: View {@State private var page = WebPage()@State private var id: WebPage.NavigationID?@State private var isLoading = false@State private var event: WebPage.NavigationEvent?@State private var titleFromJS: String?var body: some View {NavigationStack {WebView(page).navigationTitle(page.title).toolbar {ToolbarItemGroup {Button {Task {if let jsResult = try? await page.callJavaScript("""return document.title;"""), let title = jsResult as? String {titleFromJS = title}}} label: {Image(systemName: "figure.run")}Button {Task {try? await page.callJavaScript("""document.body.style.backgroundColor = 'gold'""")}} label: {Image(systemName: "figure.cricket")}Button(action: {page.reload()}) {Image(systemName: "arrow.counterclockwise")}}ToolbarItem(placement: .topBarLeading) {if isLoading {ProgressView()}}}.onChange(of: page.isLoading) { _, new inisLoading = new}.onReceive(page.currentNavigationEvent.publisher) { event inguard event.navigationID == id else { return }switch event.kind {case let .failed(underlyingError: error):print(error.localizedDescription)case .finished:print("网页加载完毕")default:break}}.task {let request = URLRequest(url: .init(string: "https://blog.csdn.net/mydo")!)id = page.load(request)}.safeAreaInset(edge: .top) {if let title = titleFromJS {Text(title).font(.title2).padding().background(.thinMaterial.opacity(0.66), in: RoundedRectangle(cornerRadius: 15))}}}}
}

在上面的代码中，我们用 JavaScript 做了两件事：

1. 动态实时获取到了网页的标题；
2. 将网页背景设置为金色；

此等操作，恰似金蛇郎君以金蛇锥破敌甲胄 —— 直接穿透 Swift 与 JS 的壁垒。

更妙者，新 WebView 对各平台特性的适配，如 visionOS 的 “看向滚动” 功能，只需一行修饰符即可大功告成：

WebView(webView: page.webView)#if os(VisionOS)// 开启 VisionOS 滚动输入”通天眼“.webViewScrollInputBehavior(.enabled, for: .look)#endif.scrollBounceBehavior(.basedOnSize) // 滚动反馈如"踏雪无痕"

三、江湖展望：金蛇之后再无钝剑

回首 SwiftUI 的网页显示之道，恰似袁承志的武学进阶：从华山派的循规蹈矩，到金蛇剑法的灵动不羁，再到融会贯通自成一派。

WWDC 25 推出的新 WebView，不仅解决了旧法中的 “招式沉冗” 之弊，更将 SwiftUI 的声明式编程理念推向新高度。

正如金蛇剑在袁承志手中终成一代传奇，这套新 WebView API 亦将成为开发者闯荡网页江湖的不二之选。

毕竟，真正的好功夫，从来都是 “大道至简，大巧若拙”—— 能以三两行代码办妥之事，何必耗费十数行力气？此乃 WWDC 25 留给 SwiftUI 开发者的最大启示，亦是江湖不变之真理。

那么，各位少侠看到这里又作何感想呢？

感谢宝子们的观看，再会啦！😎