swiftUI 显示网页内容

测试环境

名称	内容
系统版本	macOS Big Sur 11.2.2
`XCode`	12.4 (12D4e)

新建工程

打开 XCode ，在顶部菜单栏中依次点击 File/New -> Project 新建一个工程

选择新建 ios -> App

设置项目名称为 Show-Web-Page ，选择 Interface 为 Swift ， Life Cycle 为 SwiftAPP

之后就进入了 Hello, world 界面，工程新建完成

功能实现

实现网页内容显示需要用到 WebView 控件，该控件可以通过一个 URL 来进行网页视图的渲染，或是加载本地的 HTML 文件

导入包含 WebView 的库 WebKit

import SwiftUI
import WebKit

创建一个结构体 myWebView

struct myWebView: UIViewRepresentable {
    var url: String
    var webView = WKWebView()
    
    func makeUIView(context: Context) -> WKWebView {
        guard let url = URL(string: self.url) else {
            return WKWebView()
        }
        let request = URLRequest(url: url)
        webView.load(request)
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<myWebView>) {
        
    }
}

名称	类型	内容
url	变量	输入参数，目标的 url
webView	变量	WKWebView 的窗口视图
makeUIView()	函数	渲染网页并创建视图
updateUIView()	函数	更新视图

对 ContentView 结构体中的内容进行修改

创建 view 的常量，实例化视图时传入 url 地址
在 body 中调用窗口显示

struct ContentView: View {
    let view = myWebView(url: "https://apple.com")
    
    var body: some View {
        self.view.ignoresSafeArea()
    }
}

预览画布中点击 Resume ，代码右侧的画布中将更新视图

点击画布预览中的运行按钮，可以实时预览效果

至此简单实现了 SwiftUI 渲染显示网页的内容

正片环节

既然能够显示网页内容，那岂不是可以 ······ 🐠🐠🐠

将传入实例的 url 稍作修改，比如改成

let view = myWebView(url: "https://bilibili.com")

让我看看这周又更新了什么新番 🤩

let view = myWebView(url: "https://taobao.com")

甚至可以顺便往购物车里在添加点东西

买个新杯子，在公司也能泡上枸杞了

let view = myWebView(url: "https://www.msn.cn/zh-cn/money/markets")

如果你手头富裕，心态良好，平时喜欢炒股

好家伙，明天早餐又没了

原来除了 VSCode 之外， XCode 也能成为上班摸鱼的利器······

本项目源码

待整理······

测试环境​

新建工程​

功能实现​

正片环节​

本项目源码​

参考​

测试环境

新建工程

功能实现

正片环节

本项目源码

参考