iOS開(kāi)發(fā)web控件的簡(jiǎn)單使用


前言:我們知道在app中打開(kāi)Safari來(lái)顯示網(wǎng)頁(yè)的代碼UIApplication.shared.open(url)
這次我們來(lái)學(xué)習(xí)WebView和WKWebview

1.WebView:

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


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

  • 步驟2:將WebView于代碼關(guān)聯(lián)*
    選中WebView->按住鼠標(biāo)右鍵拖入代碼->命名為 “webView”
    代碼:`@IBOutlet weak var webView: UIWebView!
  • 步驟3:載入網(wǎng)址*
    思路:在viewDidLoad方法中載入網(wǎng)頁(yè)
    代碼:
override func viewDidLoad() {
         super.viewDidLoad()
         
         if let url = URL(string: "http://www.reibang.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,可能會(huì)轉(zhuǎn)換失敗值為nil所以此處要用可選綁定
2.把要加載的鏈接轉(zhuǎn)化為請(qǐng)求,請(qǐng)求webView加載
3.加載網(wǎng)頁(yè)
但是.....
做完后效果并不理想,沒(méi)有加載出網(wǎng)頁(yè)。還出現(xiàn)了這么一段錯(cuò)誤:
::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的一項(xiàng)安全機(jī)制,默認(rèn)強(qiáng)制所有連接必須為安全鏈接即https協(xié)議。要想使用http鏈接哀托,需要手工在Info.plist里關(guān)閉ATS,而我們的鏈接并不是https協(xié)議
關(guān)閉ATS
打開(kāi)Info.plist劳秋,右擊空白處仓手,選中 Add Row,key選擇 App Transport Security Settings

設(shè)置步驟

運(yùn)行玻淑!

2.WKWebView

WKWebView比UIWebView速度更快嗽冒,內(nèi)存占用更少。是UIWebView的替代者补履。
我們?cè)谥皐ebView上的東西進(jìn)行修改
使用WKWebView必須導(dǎo)入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.實(shí)例化一個(gè)WKWebView并設(shè)置大小,使其與父視圖尺寸相同
3.將WKWebView添加到父視圖的子視圖

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

使用WKWebView頁(yè)面如果有導(dǎo)航箫锤,會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)頭部一部分潛入到導(dǎo)航條下面贬蛙。這是因?yàn)樗赩iew Controller默認(rèn)情況下雨女,頂邊延伸到導(dǎo)航條圖層之下,導(dǎo)致了遮擋

解決方案:


同時(shí)在viewDidLoad中添加代碼速客,WKWebView 高度的自適應(yīng):
wkWebview.autoresizingMask = [.flexibleHeight]

步驟4:運(yùn)行!


3.SFSafariViewController:

SFSafariViewController相當(dāng)于一個(gè)app內(nèi)部的Safari瀏覽器戚篙,具有Safari瀏覽器的基本功能;SFSafariViewController的使用步驟十分簡(jiǎn)單溺职;使用SFSafariViewController時(shí)要導(dǎo)入SafariServices
`import SafariServices

全部代碼如下:

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

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


小結(jié):

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末乱灵,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子七冲,更是在濱河造成了極大的恐慌痛倚,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件澜躺,死亡現(xiàn)場(chǎng)離奇詭異蝉稳,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)掘鄙,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)耘戚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人操漠,你說(shuō)我怎么就攤上這事收津。” “怎么了浊伙?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵撞秋,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我嚣鄙,道長(zhǎng)吻贿,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任拗慨,我火速辦了婚禮廓八,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘赵抢。我一直安慰自己,他們只是感情好声功,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布烦却。 她就那樣靜靜地躺著,像睡著了一般先巴。 火紅的嫁衣襯著肌膚如雪其爵。 梳的紋絲不亂的頭發(fā)上冒冬,一...
    開(kāi)封第一講書(shū)人閱讀 51,624評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音摩渺,去河邊找鬼简烤。 笑死,一個(gè)胖子當(dāng)著我的面吹牛摇幻,可吹牛的內(nèi)容都是我干的横侦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼绰姻,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼枉侧!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起狂芋,我...
    開(kāi)封第一講書(shū)人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤榨馁,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后帜矾,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體翼虫,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年屡萤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了珍剑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡灭衷,死狀恐怖次慢,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情翔曲,我是刑警寧澤迫像,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站瞳遍,受9級(jí)特大地震影響闻妓,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜掠械,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一由缆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧猾蒂,春花似錦均唉、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春层扶,著一層夾襖步出監(jiān)牢的瞬間箫章,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工镜会, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留檬寂,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓戳表,卻偏偏與公主長(zhǎng)得像桶至,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子扒袖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

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