ios开发:用wkwebview显示网页内容
一,代码
列表页面,点击跳转:
//
// ContentView.swift
// helloworld2
//
// Created by liuhongdi on 2026/3/28.
//
import SwiftUI
import Alamofire
struct ContentView: View {
@State private var message = "加载中..."
// 初始化 ViewModel
@StateObject private var viewModel = PoemViewModel()
var body: some View {
NavigationStack {
VStack {
Text(message)
List {
if viewModel.isLoading && viewModel.poems.isEmpty {
ProgressView("加载中..")
}
ForEach(viewModel.poems){ poem in
NavigationLink(value: poem) {
PoemRow(poem: poem) // 进一步拆分出子视图
}
}
}
.navigationTitle("唐诗鉴赏1")
.navigationDestination(for: Poem.self) { poem in
WebView(urlString: "https://baidu.com")
}
// 调用逻辑
.task{
await viewModel.fetchData()
}
.refreshable{
await viewModel.fetchData()
}
}
}
}
}
// 一行元素的view
struct PoemRow: View {
let poem: Poem
var body: some View {
HStack(spacing: 15) {
AsyncImage(url: URL(string: poem.image)) { image in
image.resizable().aspectRatio(contentMode: .fit)
} placeholder: {
Color.purple.opacity(0.1)
}
.frame(width: 60, height: 60)
.background(Color.purple)
.cornerRadius(8)
VStack(alignment: .leading){
Text(poem.title).font(.headline)
Text(poem.author).font(.subheadline).foregroundColor(.secondary)
}
}
}
}
#Preview {
ContentView()
}
webview的页面:
import SwiftUI
import WebKit
struct WebView: UIViewRepresentable {
// 接收参数
let urlString: String
// 创建并返回 WKWebView 实例
func makeUIView(context: Context) -> WKWebView {
return WKWebView()
}
// 当 SwiftUI 状态更新时,加载 URL
func updateUIView(_ uiView: WKWebView, context: Context) {
if let url = URL(string: urlString) {
let request = URLRequest(url: url)
uiView.load(request)
}
}
}
二,测试效果:

浙公网安备 33010602011771号