iOS开发web控件的简单使用

---

前言：我们知道在app中打开Safari来显示网页的代码UIApplication.shared.open(url)
这次我们来学习WebView和WKWebview

1.WebView：

• 步骤1:创建WebView
  从storyboard中拖出一个WebView

使得WebView垂直水平居中且与父视图等宽等高约束不能是左右边距为0 约束如下图：

• 步骤2:将WebView于代码关联*
  选中WebView->按住鼠标右键拖入代码->命名为 “webView”
  代码：`@IBOutlet weak var webView: UIWebView!
• 步骤3:载入网址*
  思路：在viewDidLoad方法中载入网页
  代码：

override func viewDidLoad() {
         super.viewDidLoad()
         
         if let url = URL(string: "http://www.jianshu.com/users/2e9195cf176a/timeline"){  //1
             let request = URLRequest(url: url) //2
             webView.loadRequest(request) //3
         }
 
         // Do any additional setup after loading the view.
     }

注释处代码分析：

1.要把字符串转换成链接即URL，可能会转换失败值为nil所以此处要用可选绑定
2.把要加载的链接转化为请求，请求webView加载
3.加载网页
但是.....
做完后效果并不理想，没有加载出网页。还出现了这么一段错误：
::2015-11-17 14:16:24.017 FoodPin[1257:115282] App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.
为什么？

注意：App Transport Security 是iOS的一项安全机制，默认强制所有连接必须为安全链接即https协议。要想使用http链接，需要手工在Info.plist里关闭ATS，而我们的链接并不是https协议
关闭ATS
打开Info.plist，右击空白处，选中 Add Row，key选择 App Transport Security Settings

设置步骤

运行！

2.WKWebView

WKWebView比UIWebView速度更快，内存占用更少。是UIWebView的替代者。
我们在之前webView上的东西进行修改
使用WKWebView必须导入WebKit框架;代码如下：
import WebKit

• 步骤1:创建WKWebView*
  WKWebView必须使用代码创建！代码如下：在viewDidLoad添加：

 webView.isHidden = true //1
         
 let wkWebview = WKWebView(frame: view.frame) //2
 view.addSubview(wkWebview) //3

注释处分析：

1.把之前的webView隐藏
2.实例化一个WKWebView并设置大小，使其与父视图尺寸相同
3.将WKWebView添加到父视图的子视图

• 步骤2:载入网页*
  代码如下：

 if let url = URL(string:http://www.jianshu.com/users/2e9195cf176a/timeline"){
             let request = URLRequest(url: url)
             wkWebview.load(request)
             //webView.loadRequest(request)
         } 

• 步骤3：修复bug*

使用WKWebView页面如果有导航，会发现网页头部一部分潜入到导航条下面。这是因为所在View Controller默认情况下，顶边延伸到导航条图层之下，导致了遮挡

解决方案：

同时在viewDidLoad中添加代码，WKWebView 高度的自适应：
wkWebview.autoresizingMask = [.flexibleHeight]

步骤4:运行!

---

3.SFSafariViewController:

SFSafariViewController相当于一个app内部的Safari浏览器，具有Safari浏览器的基本功能；SFSafariViewController的使用步骤十分简单；使用SFSafariViewController时要导入SafariServices
`import SafariServices

全部代码如下：

 if let url = URL(string: "http://www.jianshu.com/users/2e9195cf176a/timeline"){ //1
                 let sfVC = SFSafariViewController(url: url) //2
                 self.present(sfVC, animated: true, completion: nil) //3
             } 

注释处代码分析：

1.查看链接是否有效
2.实例化一个SFSafariViewController
3.现实SFSafariViewController

---

小结：

本章我们学习了WebView和WKWebview以及SFSafariViewController的简单用法。WKWebview占用内存小且速度更快推荐使用但需要用代码实例化，注意子视图和父视图之间的布局！