基于 WKWebView 的混合开发框架(网站生成ios应用)

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

1. 创建XCode项目

创建一个名为 WKWebViewTest 的 Single View Application 项目

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

2. 开始使用 WKWebView

  • 在 ViewController 顶部引入 WebKit
import WebKit
  • 之后创建一个 WKWebView 类型的成员变量,并对其进行初始化
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 指定地址
        let url = NSURL(string : "http://baidu.com");

        // 请求
        let request = NSURLRequest(URL : url!);
        // 加载请求
        self.webView.loadRequest(request)
    }

3. 结合UIWebView

由于WKWebView只能全屏,无法自定义控制大小。结合UIWebView实现

  • 将web view拖动到视图中,并调整好大小

    这里写图片描述

    在web view上 -》右键 -》Referencing OutLets, 拖动到关联编辑ViewController 中。

    @IBOutlet weak var containerView: UIWebView!
  • 取消Use Auto Layout和Use Size Classes选项

这里写图片描述

  • 调整属性自适应

这里写图片描述

4. 加入js调用app代码

  • 调整ViewController,加入WKScriptMessageHandler
class ViewController: UIViewController, WKScriptMessageHandler {
  • 加入JS接收函数(必须加,不然会出现错误)
     /**
     *  此方法为js接收参数(方法名不可变,改变WKScriptMessageHandler引入会出现错误)
     */
    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
        //
        print(message.name);
        print(message.body)

    }

4. 添加载入视图代码(在ViewController.swift中加入)

    override func loadView() {
        super.loadView()
        // 获得WK控制管理器
        let contentController = WKUserContentController()
        // 通过控制管理器来添加js对象
        // html页面可以通过window.webkit.messageHandlers.phone.proessMessage('XXXX')来调用
        contentController.addScriptMessageHandler(self, name: "phone")
        // 获得WKWebView配置构造器
        let config = WKWebViewConfiguration()
        // 设置控制器
        config.userContentController = contentController
        // 构造一个WKWebView
        // 第一个参数是CGRECT类型,意思就是构造容器范围,self.containerView.bounds是UIWebView的大小,
        // 这样WKWebView的大小就与UIWebView 大小一致
        self.webView = WKWebView(frame: self.containerView.bounds, configuration: config)
        // 将WKWebView添加到UIWebView容器中,这样可以保证布局的一致性,
        // 因为有的时候我们可能需要预留出顶部导航栏这时我们是需要UIWebView来进行调整
        self.containerView.addSubview(self.webView)
    }

5. 处理BUG(iOS 9 SDK 中默认不再支持访问非 HTTPS 的地址)

如果你用的是 Xcode 7,这时候你应该得到了一块雪白雪白的屏幕,我们遭遇了 bug。这是因为 iOS 9 SDK 中默认不再支持访问非 HTTPS 的地址,我们需要进行一些修改:

在 Info.plist 上右键,以源代码方式打开,在第一个 之前加入以下代码:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

示例源代码下载地址::http://download.csdn.net/detail/hanjiyu/9481868

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值