Fork me on GitHub

开始用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,imageabout-logocontent modeAspect fit。选择table view cell,identifierCellstyleBasic

  • 新建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方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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:)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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的例子

1
2
3
4
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,identifiershowWebView

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    override func viewDidLoad() {
    super.viewDidLoad()

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

    }
  • 添加loadView,这个方法会在viewDidLoad之前调用创建WKWebView

    1
    2
    3
    4
    override func loadView() {
    webView = WKWebView()
    view = webView
    }
  • 更新AboutTableViewController中的tableView(_didSelectRowAtIndexPath:)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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方法展示就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
  • 本文作者: AndyRon
  • 发布时间: 2017年08月03日 - 00:00
  • 最后更新: 2017年09月09日 - 13:01
  • 本文链接: http://andyron.com/2017/beginning-ios-swift-21.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!