开始用Swift开发iOS 10 - 21 使用WKWebView和SFSafariViewController

上一篇开始用Swift开发iOS 10 - 20 使用Tab Bar Controller 和拆分Storyboard学习了工具栏和Storyboard的拆分，这一篇学习怎么在app中显示网页内容。由于原书中使用了的网站在国内不好访问，我就用了我的简书、博客、Github代替🙂。

设计about view

下载图片拖进Assets.xcasset。
打开about.storyboard，拖进一个Image View到table view header，height为190，image为about-logo，content mode为Aspect fit。选择table view cell，identifier为Cell，style为Basic。
新建AboutTableViewController继承至UITableViewController，关联about中的table view controller。

在AboutTableViewController，添加：

1
2
3

var sectionTitles = ["Leave Feedback", "Follow Us"]
var sectionContent = [["Rate us on App Store", "Tell us your feedback"], ["Jianshu", "Blog", "Github"]]
var links = ["http://www.jianshu.com/u/efce1a2a95ab", "http://andyron.com", "https://github.com/andyRon"]

table view的相关代理协议方法实现，这次使用俩个section，tableView(_:titleForHeaderInSection:)是获取section的title方法。

override func numberOfSections(in tableView: UITableView) -> Int {
    return sectionTitles.count
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return sectionContent[section].count
}

override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
    return sectionTitles[section]
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    
    cell.textLabel?.text = sectionContent[indexPath.section][indexPath.row]
    
    return cell
}

移除Tableview下面分割线，在viewDidLoad中添加：
```
tableView.tableFooterView = UIView(frame: CGRect.zero)
```

用Mobile Safari打开Web

可直接给出网址，通过Mobile Safari打开网站，UIApplication.shared.open(_:options:completionHandler:)。

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    
    switch indexPath.section {
    case 0:
        if indexPath.row == 0 {
            if let url = URL(string: "http://www.apple.com/itunes/charts/paid-apps/") {
                UIApplication.shared.open(url, options: [:], completionHandler: nil)
            }
        }
    default:
        break
    }
    // 取消被选中状态
    tableView.deselectRow(at: indexPath, animated: false)
}

使用WKWebView载入Web

使用使用WKWebView载入Web的例子

if let url = URL(string: "http://andyron.com") {
    let request = URLRequest(url: url)
    webView.load(request)
}

直接载入本地html文件的例子：

1
2
3

let url = URL(fileURLWithPath: "about.html")
let request = URLRequest(url: url)
webView.load(request)

在about.storyboard中拖进一个新的View Controller，用来展示Web内容。使用ctrl-drag建立Show类型的segue，identifier为 showWebView。

新建WebViewController继承至UIViewController，关联上面的用来显示Web内容的View Controller。
在WebViewController.swift中添加import WebKit，变量var webView: WKWebView!。

更新 viewDidLoad：

override func viewDidLoad() {
    super.viewDidLoad()

    if let url = URL(string: "http://andyron.com") {
        let request = URLRequest(url: url)
        webView.load(request)
    }

}

添加loadView，这个方法会在viewDidLoad之前调用创建WKWebView。

override func loadView() {
    webView = WKWebView()
    view = webView
}

更新AboutTableViewController中的tableView(_didSelectRowAtIndexPath:)：

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    
    switch indexPath.section {
    case 0:
        if indexPath.row == 0 {
            if let url = URL(string: "http://www.apple.com/itunes/charts/paid-apps/") {
                UIApplication.shared.open(url, options: [:], completionHandler: nil)
            }
        } else if indexPath.row == 1 {
            performSegue(withIdentifier: "showWebView", sender: self)

        }     
    default:
        break
    }
    // 取消被选中状态
    tableView.deselectRow(at: indexPath, animated: false)
}

由于自从iOS 9之后，出于安全考虑，默认只能访问HTTPS的网站，如果需要访问HTTP的网站，就需要在plist文件中添加许可：

使用SFSafariViewController载入Web

在AboutTableViewController.swift中加入import SafariServices，然后更新tableView(_didSelectRowAtIndexPath:)，只用通过url创建一个SFSafariViewController对象，然后使用present方法展示就可以了。

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    
    switch indexPath.section {
    case 0:
        if indexPath.row == 0 {
            if let url = URL(string: "http://www.apple.com/itunes/charts/paid-apps/") {
                UIApplication.shared.open(url, options: [:], completionHandler: nil)
            }
        } else if indexPath.row == 1 {
            performSegue(withIdentifier: "showWebView", sender: self)

        }
    case 1:
        if let url = URL(string: links[indexPath.row]) {
            let safariController = SFSafariViewController(url: url)
            present(safariController, animated: true, completion: nil)
        }
    default:
        break
    }
    // 取消被选中状态
    tableView.deselectRow(at: indexPath, animated: false)
}

代码

Beginning-iOS-Programming-with-Swift

说明

此文是学习appcode网站出的一本书《Beginning iOS 10 Programming with Swift》的一篇记录