http://www.cocoachina.com/ios/20150911/13301.html

在本系列文章中，我将跟大家一起一步一步，基于 iOS 8 新推出的 WKWebView 组件，构建出自己的混合开发框架。

WKWebView 简介

WKWebView 是苹果在 iOS 8 中引入的新组件，目的是给出一个新的高性能的 Web View 解决方案，摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题。

苹果将 UIWebViewDelegate 与 UIWebView 重构成了 14 个类和 3 个协议，引入了不少新的功能和接口，这可以在一定程度上看做苹果对其封锁 Web View 内核的行为作出的补偿：既然你们都说 UIWebView 太渣，那我就造一个不渣的给你们用呗~~ 众所周知，连 Chrome 的 iOS 版用的也是 UIWebView 的内核。

WKWebView 有以下几大主要进步：

  1. 将浏览器内核渲染进程提取出 App，由系统进行统一管理，这减少了相当一部分的性能损失。

  2. js 可以直接使用已经事先注入 js runtime 的 js 接口给 Native 层传值，不必再通过苦逼的 iframe 制造页面刷新再解析自定义协议的奇怪方式。

  3. 支持高达 60 fps 的滚动刷新率，内置了手势探测。

开始使用 WKWebView

上手使用

创建一个名为 BuildYourOwnHybridDevelopmentFramework 的 Single View Application 项目。在 ViewController 顶部引入 WebKit：

1
import WebKit

之后创建一个 WKWebView 类型的成员变量，并对其进行初始化，加入到页面上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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，这时候你应该得到了一块雪白雪白的屏幕，我们遭遇了 bug。这是因为 iOS 9 SDK 中默认不再支持访问非 HTTPS 的地址，我们需要进行一些修改：

在 Info.plist 上右键，以源代码方式打开。如下图：

之后在第一个 《key》之前加入以下代码：

再次运行项目，搞定！

查看效果

简易错误处理

为了更方便地在开发中调试问题，我们需要处理一下页面加载失败的事件。

加入代理：

1
2
class ViewController: UIViewController, WKNavigationDelegate {
... ...

设置代理对象为 self：

1
self.wk.navigationDelegate = self

处理加载失败事件

我们可以使用以下方式让 View Controller 更优雅，更短小精悍：

1
2
3
4
5
6
7
8
9
10
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)
    }
}

查看效果

我们把 网址从 http://www.baidu.com/ 改成 http://www.baidu/，运行，得到错误：

搞定！

显示弹窗

在 UIWebView 里，js 的 alert() 弹窗会自动以系统弹窗的形式展示，但是 WKWebview 把这个接口也暴露给了我们，让我们自己 handle js 传来的 alert()。下面我们将自己写代码 handle 住这个事件，并展示为系统弹窗。

加入代理：

1
2
class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
... ...

设置代理对象为 self：

1
self.wk.UIDelegate = self

处理 alert() 事件

1
2
3
4
5
6
7
8
9
10
11
private typealias wkUIDelegate = ViewController
extension 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)
    }
}

执行 alert()

把网址改为正确的 http://www.baidu.com/，运行项目。然后使用 Safari 自带的 Web View 调试工具执行 alert() 函数：

查看效果

搞定！

 
 

最新文章

  1. 第14章 Linux启动管理（3）_系统修复模式
  2. 读书笔记_Effective_C++_条款四十九：了解new_handler的行为
  3. css文字截取
  4. Asp.Net微信登录-手机网站APP应用
  5. [转]directsound抓取麦克风PCM数据封装类
  6. selector的理解
  7. js回调函数callback()
  8. 开发者MAC电脑里的十八般兵器
  9. table表格cellspacing与cellpadding属性
  10. 使用 VMAccess 扩展程序重置 Linux 虚拟机的登录凭据
  11. Effective C++ 第二版 5)new和delete形式 6) 析构函数里的delete
  12. Junit 测试常见错误
  13. zoj 3665 数论 二分法 两个参数
  14. MySQL集群（三）mysql-proxy搭建负载均衡与读写分离
  15. 构建Nginx均衡LAMP高性能服务器
  16. ACM Let the Balloon Rise
  17. thinkphp 5.0 在appache下隐藏index.php入口代码
  18. tomcat 网页管理tomcat
  19. Qt框架及模块认识
  20. Deep Learning--week1~week3

热门文章

  1. 适配器模式(Adapter\Adaptee)
  2. dubbo admin详解
  3. Latex报错： Could not start the command: xelatex.exe -synctex=1 -interaction=nonstopmode?
  4. T2483 电梯（模拟题）
  5. angular7.X配置同时使用localhost和本机IP访问项目
  6. 洛谷 3089 [USACO13NOV]POGO的牛Pogo-Cow
  7. [转]js的垃圾回收机制
  8. 公司-广告-WPP：WPP
  9. flexget安装
  10. jnhs[未解决]无法使用选定的hibernate配置文件建立数据库连接.请验证hibernate.cfg.xml中的数据库连接详情信息