iOS開發(fā)web控件的簡單使用


前言:我們知道在app中打開Safari來顯示網(wǎng)頁的代碼UIApplication.shared.open(url)
這次我們來學習WebView和WKWebview

1.WebView:

  • 步驟1:創(chuàng)建WebView
    從storyboard中拖出一個WebView


使得WebView垂直水平居中且與父視圖等寬等高約束不能是左右邊距為0 約束如下圖:

  • 步驟2:將WebView于代碼關(guān)聯(lián)*
    選中WebView->按住鼠標右鍵拖入代碼->命名為 “webView”
    代碼:`@IBOutlet weak var webView: UIWebView!
  • 步驟3:載入網(wǎng)址*
    思路:在viewDidLoad方法中載入網(wǎng)頁
    代碼:
override func viewDidLoad() {
         super.viewDidLoad()
         
         if let url = URL(string: "http://www.lxweimin.com/users/2e9195cf176a/timeline"){  //1
             let request = URLRequest(url: url) //2
             webView.loadRequest(request) //3
         }
 
         // Do any additional setup after loading the view.
     }
注釋處代碼分析:

1.要把字符串轉(zhuǎn)換成鏈接即URL,可能會轉(zhuǎn)換失敗值為nil所以此處要用可選綁定
2.把要加載的鏈接轉(zhuǎn)化為請求,請求webView加載
3.加載網(wǎng)頁
但是.....
做完后效果并不理想,沒有加載出網(wǎng)頁。還出現(xiàn)了這么一段錯誤:
::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協(xié)議。要想使用http鏈接,需要手工在Info.plist里關(guān)閉ATS,而我們的鏈接并不是https協(xié)議
關(guān)閉ATS
打開Info.plist,右擊空白處,選中 Add Row,key選擇 App Transport Security Settings

設置步驟

運行!

2.WKWebView

WKWebView比UIWebView速度更快,內(nèi)存占用更少。是UIWebView的替代者。
我們在之前webView上的東西進行修改
使用WKWebView必須導入WebKit框架;代碼如下:
import WebKit

  • 步驟1:創(chuàng)建WKWebView*
    WKWebView必須使用代碼創(chuàng)建!代碼如下:在viewDidLoad添加:
 webView.isHidden = true //1
         
 let wkWebview = WKWebView(frame: view.frame) //2
 view.addSubview(wkWebview) //3
注釋處分析:

1.把之前的webView隱藏
2.實例化一個WKWebView并設置大小,使其與父視圖尺寸相同
3.將WKWebView添加到父視圖的子視圖

  • 步驟2:載入網(wǎng)頁*
    代碼如下:
 if let url = URL(string:http://www.lxweimin.com/users/2e9195cf176a/timeline"){
             let request = URLRequest(url: url)
             wkWebview.load(request)
             //webView.loadRequest(request)
         } 
  • 步驟3:修復bug*

使用WKWebView頁面如果有導航,會發(fā)現(xiàn)網(wǎng)頁頭部一部分潛入到導航條下面。這是因為所在View Controller默認情況下,頂邊延伸到導航條圖層之下,導致了遮擋

解決方案:


同時在viewDidLoad中添加代碼,WKWebView 高度的自適應:
wkWebview.autoresizingMask = [.flexibleHeight]

步驟4:運行!


3.SFSafariViewController:

SFSafariViewController相當于一個app內(nèi)部的Safari瀏覽器,具有Safari瀏覽器的基本功能;SFSafariViewController的使用步驟十分簡單;使用SFSafariViewController時要導入SafariServices
`import SafariServices

全部代碼如下:

 if let url = URL(string: "http://www.lxweimin.com/users/2e9195cf176a/timeline"){ //1
                 let sfVC = SFSafariViewController(url: url) //2
                 self.present(sfVC, animated: true, completion: nil) //3
             } 
注釋處代碼分析:

1.查看鏈接是否有效
2.實例化一個SFSafariViewController
3.現(xiàn)實SFSafariViewController


小結(jié):

本章我們學習了WebView和WKWebview以及SFSafariViewController的簡單用法。WKWebview占用內(nèi)存小且速度更快推薦使用但需要用代碼實例化,注意子視圖和父視圖之間的布局!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容