開源項目：BlackHawk，純 Swift 開發(fā)的基于 WKWebView 的高性能 Cordova 替代：https://github.com/Lucky-Orange/BlackHawk
在本系列文章中，我將跟大家一起一步一步，基于 iOS 8 新推出的 WKWebView 組件，構(gòu)建出自己的混合開發(fā)框架。
WKWebView 簡介
WKWebView 是蘋果在 iOS 8 中引入的新組件，目的是給出一個新的高性能的 Web View 解決方案，擺脫過去 UIWebView 的老舊笨重特別是內(nèi)存占用量巨大的問題。
蘋果將 UIWebViewDelegate 與 UIWebView 重構(gòu)成了14 個類和 3 個協(xié)議，引入了不少新的功能和接口，這可以在一定程度上看做蘋果對其封鎖 Web View 內(nèi)核的行為作出的補(bǔ)償：既然你們都說 UIWebView 太渣，那我就造一個不渣的給你們用唄~~ 眾所周知，連 Chrome 的 iOS 版用的也是 UIWebView 的內(nèi)核。
WKWebView 有以下幾大主要進(jìn)步：
將瀏覽器內(nèi)核渲染進(jìn)程提取出 App，由系統(tǒng)進(jìn)行統(tǒng)一管理，這減少了相當(dāng)一部分的性能損失。
js 可以直接使用已經(jīng)事先注入 js runtime 的 js 接口給 Native 層傳值，不必再通過苦逼的 iframe 制造頁面刷新再解析自定義協(xié)議的奇怪方式。
支持高達(dá) 60 fps 的滾動刷新率，內(nèi)置了手勢探測。
開始使用 WKWebView
上手使用
創(chuàng)建一個名為 BuildYourOwnHybridDevelopmentFramework 的 Single View Application 項目。在 ViewController 頂部引入 WebKit：
import WebKit
之后創(chuàng)建一個 WKWebView 類型的成員變量，并對其進(jìn)行初始化，加入到頁面上：
var wk: WKWebView!override func viewDidLoad() {? ? super.viewDidLoad()}override func didReceiveMemoryWarning() {? ? super.didReceiveMemoryWarning()? ? // Dispose of any resources that can be recreated.}? ? override func viewDidAppear(animated: Bool) {? ? super.viewDidAppear(animated)? ? ? ? self.wk = WKWebView(frame: self.view.frame)? ? self.wk.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.baidu.com/")!))? ? self.view.addSubview(self.wk)}
遭遇 BUG
如果你用的是 Xcode 7，這時候你應(yīng)該得到了一塊雪白雪白的屏幕，我們遭遇了 bug。這是因為 iOS 9 SDK 中默認(rèn)不再支持訪問非 HTTPS 的地址，我們需要進(jìn)行一些修改：
在 Info.plist 上右鍵，以源代碼方式打開。如下圖：
之后在第一個 之前加入以下代碼：
NSAppTransportSecurity
NSAllowsArbitraryLoads
再次運(yùn)行項目，搞定！
查看效果
簡易錯誤處理
為了更方便地在開發(fā)中調(diào)試問題，我們需要處理一下頁面加載失敗的事件。
加入代理：
class ViewController: UIViewController, WKNavigationDelegate {
... ...
設(shè)置代理對象為 self：
self.wk.navigationDelegate = self
處理加載失敗事件
我們可以使用以下方式讓 View Controller 更優(yōu)雅，更短小精悍：
private typealias wkNavigationDelegate = ViewController
extension wkNavigationDelegate {
func webView(webView: WKWebView, didFailNavigation navigation: WKNavigation!, withError error: NSError) {
NSLog(error.debugDescription)
}
func webView(webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: NSError) {
NSLog(error.debugDescription)
}
}
查看效果
我們把 網(wǎng)址從http://www.baidu.com/改成http://www.baidu/，運(yùn)行，得到錯誤：
搞定！
顯示彈窗
在 UIWebView 里，js 的 alert() 彈窗會自動以系統(tǒng)彈窗的形式展示，但是 WKWebview 把這個接口也暴露給了我們，讓我們自己 handle js 傳來的 alert()。下面我們將自己寫代碼 handle 住這個事件，并展示為系統(tǒng)彈窗。
加入代理：
class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
... ...
設(shè)置代理對象為 self：
self.wk.UIDelegate = self
處理 alert() 事件
private typealias wkUIDelegate = ViewControllerextension wkUIDelegate {? ? ? ? func webView(webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: () -> Void) {? ? ? ? let ac = UIAlertController(title: webView.title, message: message, preferredStyle: UIAlertControllerStyle.Alert)? ? ? ? ac.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.Cancel, handler: { (aa) -> Void in? ? ? ? ? ? completionHandler()? ? ? ? }))? ? ? ? self.presentViewController(ac, animated: true, completion: nil)? ? }}
執(zhí)行 alert()
把網(wǎng)址改為正確的http://www.baidu.com/，運(yùn)行項目。然后使用 Safari 自帶的 Web View 調(diào)試工具執(zhí)行 alert() 函數(shù)：
查看效果
搞定！
