Build your own Wkwebview-based hybrid development Framework (i) Wkwebview get started

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

• code example: https://github.com/johnlui/Swift-On-iOS/tree/master/BuildYourOwnHybridDevelopmentFramework/ Buildyourownhybriddevelopmentframework

• Open Source project: Blackhawk, a Wkwebview-based, high-performance Cordova replacement for pure Swift: Https://github.com/Lucky-Orange/BlackHawk

In this series of articles, I'm going to step through the steps to build your own hybrid development framework based on the new Wkwebview component of IOS 8.

Wkwebview Introduction

Wkwebview is the new component introduced by Apple in IOS 8 to give a new high-performance Web View solution to get rid of the old, bulky, and especially memory-intensive problems of the past UIWebView.

Apple's uiwebviewdelegate and UIWebView constitute 14 classes and 3 protocols, introducing a number of new functions and interfaces, which can be seen to some extent as an Apple's compensation for its blocking of the Web View kernel: Now that you're saying UIWebView's scum, , then I will build a non-slag for you to use Bai ~ ~ as we all know, even Chrome's IOS version is also the UIWebView kernel.

Wkwebview has the following major advances:

1. Extracting the browser kernel rendering process from the APP is managed centrally by the system, which reduces a significant portion of the performance penalty.

2. JS can be directly used to inject JS runtime JS interface to the Native layer transfer value, no longer through the painful iframe Manufacturing page refresh and then resolve the strange way of custom protocol.

3. Supports a scrolling refresh rate of up to a maximum of FPS with a built-in gesture detection.

Getting Started with Wkwebview

Get started with

Create a single View application project named Buildyourownhybriddevelopmentframework. Introducing WebKit at the top of the Viewcontroller:

1	import WebKit

Then create a member variable of type Wkwebview, initialize it, and add it to the page:

12345678910111213141516

varwk: 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)}

Encounter BUG

If you're using Xcode 7, you should get a Snow white screen, and we're hit by a bug. This is because access to non-HTTPS addresses is no longer supported by default in the IOS 9 SDK, and we need to make some changes:

Right-click on the info.plist to open it as source code. Such as:

Then add the following code before the first key:

Run the project again and get it done!

View Effects

Easy error Handling

To make it easier to debug problems in development, we need to deal with the failed page load events.

Join the agent:

12	class ViewController: UIViewController, WKNavigationDelegate {... ...

Set the proxy object to self:

1	self.wk.navigationDelegate = self

Handling Load Failure Events

We can use the following methods to make the View Controller more elegant and more concise:

12345678910

private typealias wkNavigationDelegate = ViewControllerextension 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)    }}

View Effects

We changed the URL from http://www.baidu.com/to http://www.baidu/and ran it to get the error:

Get!

Show pop-up window

In the UIWebView, JS's alert () Pop-up window will automatically be displayed in the form of system pop-up window, but wkwebview this interface also exposed to us, let us handle JS came from the alert (). Below we will write our own code handle live this event, and show as the system pop-up window.

Join the agent:

12	class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {... ...

Set the proxy object to self:

1	self.wk.UIDelegate = self

Handling alert () events

1234567891011

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)    }}

Execute alert ()

Change the URL to the correct http://www.baidu.com/and run the project. Then execute the alert () function using the Web View debugging tool that comes with Safari:

View Effects

Get!

Build your own Wkwebview-based hybrid development Framework (i) Wkwebview get started