开始用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，添加：

  var sectionTitles = ["Leave Feedback", "Follow Us"]
  var sectionContent = [["Rate us on App Store", "Tell us your feedback"], ["Jianshu", "Blog", "Github"]]
  var links = ["//www.greatytc.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文件的例子：

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》的一篇记录

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

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

设计about view

用Mobile Safari打开Web

使用WKWebView载入Web

使用SFSafariViewController载入Web

代码

说明

系列文章目录

推荐阅读更多精彩内容