自己动手打造基于 WKWebView 的混合开发框架(一)WKWebView 上手

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() 函数:

查看效果

搞定!

时间: 2024-10-28 21:07:38

自己动手打造基于 WKWebView 的混合开发框架(一)WKWebView 上手的相关文章

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可以会引入一些更好更新的内容进行完善,本篇继续这个系列,主要介绍如何实现Web页面内容的打印预览和保存操作. 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预

基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

在上篇<基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用>介绍了数据的分页处理,使用了Bootstrap Paginator插件,另外对树形列表,采用了JSTree插件,本篇继续介绍在编辑页面中常用到的控件Select2,这个控件可以更加丰富传统的Select下拉列表控件,提供更多的功能和更好的用户体验. 1.Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验,它的github官网地址为:http

翻译:打造基于Sublime Text 3的全能python开发环境

原文地址:https://realpython.com/blog/python/setting-up-sublime-text-3-for-full-stack-python-development/ 原文标题:Setting Up Sublime Text 3 for Full Stack Python Development 翻译:打造基于sublime text 3的全能Python开发环境 Sublime Text 3 (ST3) is lightweight, cross-platfo

自己动手打造属于自己的智能家居(二)

上篇讲完了手机如何连接智能主机,这篇开始讲解智能主机如何去控制家中各个设备.这篇会写的比较详细,涉及到的基本知识也会讲解,意在让大家明白里面的原理. 下面我们把家里的设备分一下类:(这里写的一些典型的设备,等明白原理后对于其他的设备,也可以自己去添加了) 第一类:电视.空调 第二类:家里的各种灯 第三类:热水器.电饭煲 第四类:台灯 第五类:窗帘 ================================详细讲解分割线============================== 一.第一类

Java 并发专题 : Executor详细介绍 打造基于Executor的Web服务器

适配器模式,将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 应用场景:系统的数据和行为都正确,但接口不符时,我们应该考虑用适配器,目的是使控制范围之外的一个原有对象与某个接口匹配.适配器模式主要应用于希望复用一些现存的类,但是接口又与复用环境要求不一致的情况. 代码实现: //Adapter.h #include "stdafx.h" #include <iostream> class Adaptee

自己动手打造ajax图片上传

今天笔者需要一款图片上传插件,但是网上没有提供一款符合自己需求且好用的.于是就自己动手写了一个. 方法1,仅使用jquery代码,不用第三方插件.代码如下 <p> <label>上传图片</label> <input class="ke-input-text" type="text" id="url" value="" readonly="readonly" /&g

基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现

在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便.本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路. 1.系统的收藏夹界面处理效果 为了实现这个收藏夹功能,我们也需要

基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

在前面介绍了一系列的<基于Metronic的Bootstrap开发框架经验总结>的随笔文章,随笔主要是介绍各个知识点的内容,对框架的总体性界面没有很好的阐述,本篇随笔主要介绍这个Bootstrap框架的总体性功能界面,介绍其中用到的知识点和整体性的界面.希望读者对框架有一个更加直观.真实的认识了解,界面设计以及相关思路可以借鉴提高,也可以对相关的内容进行相互探讨,共同提高. 1.<基于Metronic的Bootstrap开发框架>技术特点 1)采用最新最炫的Bootstrap响应式

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用.关于Uploadify的控件介绍,可以参考我之前的随笔介绍<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>. 1.文件上传插件File In