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 里面😂。

做成一个页面就没有问题。

但是如果是在实现UIViewRepresentablewebview 里面直接初始化的 WkWebView 就没有问题。

总结

  1. SwiftUIwebview 的基本使用。
  2. 两种加载方式,本地加载和远程网址。
  3. 踩坑点击一次 webviewApp 直接崩溃。

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容