置顶
菜鸟入门，各位大佬轻喷，如有谬误之处欢迎讨论建议，也欢迎各位道友与我同行
“不积跬步，无以至千里；不积小流，无以成江海”
上一篇时间有点久了，快两周了，不是断更，是阳了😂，最近才勉强恢复过来。
继续
本文我们来讨论 WebView 的基本使用。
WebView在很多场景都是避免不了的技术，毕竟有的东西在web上实现还是相对比较快速容易的。
更何况我原本的技术栈几乎都集中在web上，要不是需要前期入门积累，我都想直接第一篇就搞 WebView 了😂。
本文将实现WebView的基本加载，示例如下：
在这里插入图片描述
思考
SwiftUI中是没有webview的，单独去引个包肯定也不划算
所以我们需要从 WebKit 中引入 WKWebView
让它在SwiftUI中可用作 View ，并且可以拿到webview的操作句柄
毕竟 webview 展示出来之后肯定是会有交互的。
实现
新增 webview.swift 文件，内容如下：
import SwiftUI
import WebKit
// 这里我理解是把 WebKit 里面的 WkWebView 转成了 SwiftUI可以使用的View类型
struct WebView:UIViewRepresentable{
let webview:WKWebView;
// 当然也可以直接在这个方法里面初始化 WKWebView，但是这样的话就拿不到操作句柄了
// 不方便后续操作
func makeUIView(context: Context) -> WKWebView {
return webview;
}
// 这两个方法都是 UIViewRepresentable 里面规定的
func updateUIView(_ uiView: WKWebView, context: Context) {}
}
// 制定一个数据模型，这里面有webview的操作句柄
// 后续我们可以把与webview 的交互写到这个类里面
class webviewModel: ObservableObject{
let webview:WKWebView;
init() {
// 实例化 WkWebView
self.webview = WKWebView(frame: .zero)
// 加载本地HTML
// 这个例子加载的是本地 Resource文件夹下的 index.html
// let HTMLSTRING = try! String(contentsOfFile: Bundle.main.path(forResource: "index", ofType: "html")!,encoding: .utf8)
// self.webview.loadHTMLString(HTMLSTRING, baseURL: Bundle.main.resourceURL);
// 加载远程HTML
let url = URL(string: "https://cn.bing.com/")!
webview.load(URLRequest(url: url))
}
}
// 显示webview的页面
struct webviewPage:View{
// 数据模型使用
@ObservedObject var web = webviewModel();
var body: some View{
VStack{
// webview
WebView(webview: web.webview)
// 点击按钮在webview内执行JavaScript
Button("here is a test button"){
web.webview.evaluateJavaScript("changeName()"){(response,error) in
// 打印返回或者报错，没有时两个值为 nil
print("执行返回：\(String(describing: response))")
print("执行报错：\(String(describing: error))")
}
}
}
}
}
修改 IndexView.swift文件，将webview页面放入tabview中：
// ... 省略
VStack{
// 一个简单的tabview，底部导航栏
TabView {
TodoView()
.tabItem {
Image(systemName: "list.dash")
Text("TODO")
}.tag(0)
SettingView()
.tabItem {
Image(systemName: "gear.circle")
Text("设置")
}.tag(1)
webviewPage()
.tabItem{
Image(systemName: "globe")
Text("网页")
}.tag(2)
}
.font(.headline)
}
}
// ... 省略
踩坑
一开始我将 WebView 直接放到了 @main 即入口文件的 View 中，想着可以快速调试修改。
结果 webview 点击一次过后就直接崩溃，点击其他地方却不影响。
后经排查发现 webview 不能直接放到 @main 里面😂。
做成一个页面就没有问题。
但是如果是在实现UIViewRepresentable 的 webview 里面直接初始化的 WkWebView 就没有问题。
总结
-
SwiftUI中webview的基本使用。 - 两种加载方式，本地加载和远程网址。
- 踩坑点击一次
webview后App直接崩溃。
欢迎关注公zhong号【思跃喵】，一起探讨。
