SwiftUI入门 - 18. WebView的基本使用

置顶

菜鸟入门，各位大佬轻喷，如有谬误之处欢迎讨论建议，也欢迎各位道友与我同行

“不积跬步，无以至千里；不积小流，无以成江海”

上一篇时间有点久了，快两周了，不是断更，是阳了😂，最近才勉强恢复过来。

继续

本文我们来讨论 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 就没有问题。

总结

1. SwiftUI中 webview 的基本使用。
2. 两种加载方式，本地加载和远程网址。
3. 踩坑点击一次 webview 后 App 直接崩溃。

欢迎关注公zhong号【思跃喵】，一起探讨。