App 中的很多时候我们需要直接加载展示网页视图，例如使用条款、网站页面，甚至是边缘业务打开网页视图，一般可以通过：Safari 打开、内置浏览器 SFSafariViewController 、WKWebView ，其中 WKWebView 最灵活扩展，自定义性更强，更推荐这种方式，SwiftUI 原生只支持使用 Safari 打开浏览网页，这很难满足一些要求。
Safari 方式打开网页
SwiftUI 内置 Link 控件，它会直接跳转到 Safari 打开指定地址网页
struct ContentView: View {
var body: some View {
NavigationStack {
Link(destination: URL(string: "https://www.codeun.com/")!) {
Image(systemName: "safari")
.font(.largeTitle)
.foregroundColor(.blue)
}
}
}
}使用 WKWebView 打开网页
这种方式 SwiftUI 没有提供 WKWebView 和 SFSafariViewController 原生支持，需要使用 UIKit UIViewRepresentable 帮助实现，下面的示例代码可以简单的构建一个内置 WebView 打开网页，通过跳转到 WebView 这个视图，传递 URL 即可打开指定网页。
import SwiftUI
import WebKit
struct WebView: UIViewRepresentable {
// 需打开网页的 URL 地址
let url: URL
// UIViewRepresentable 协议中必需的方法
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
// UIViewRepresentable 协议中必需的方法，当状态发生变化时，可以加载一个新的 URL。
func updateUIView(_ webView: WKWebView, context: Context) {
let request = URLRequest(url: url)
webView.load(request)
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, WKNavigationDelegate {
var parent: WebView
init(_ parent: WebView) {
self.parent = parent
}
// 可以实现 WKNavigationDelegate 的其他方法来处理页面加载状态、错误等
}
}
struct ContentView: View {
@State private var showSafari = false
// 示例在底部 Sheet 弹出网页视图
var body: some View {
Button("Open Safari View") {
showSafari = true
}
.sheet(isPresented: $showSafari) {
SafariView(url: URL(string: "https://www.example.com")!)
}
}
} 本文自 https://www.codeun.com 发布，相应代码均自主编写并严格审阅和测试，完整代码中包含丰富的学习笔记和使用方式、实用技巧。
· 如若转载，请注明出处：https://www.codeun.com/archives/1066.html ·