BAWKWebView-WebP：WKWebView 显示 HT

2017-08-03 本文已影响291人 95c9800fdf47

BAWKWebView-WebP

BAHome Team Name

1、功能及简介

1、用分类封装 WKWebView，代码无任何侵入更改
2、WKWebView 显示 HTML 中的 GIF 动图、WebP 无损图片，最简单、最方便的接入！
3、什么是WebP？简单描述一下，WebP 是 google 创造出的一种图片格式，图片的压缩和解码都由 google 提供的 API 完成（各种语言都有，不过目前好像没看到 js 可以解码 WebP 的），在无损压缩的情况下，比 png 要小28%左右。现在已经被各大浏览器厂商兼容（如：Chrome，Firefox等），不过苹果的 Safri 还没有完全兼容这种格式，所以如果 UIWebView 里面含有 WebP 的图片的话，就会显示不出来（但是我们可以通过 NSUrlProtocol 来做处理）。如果要在APP中使用得话，我们需要引入 SDWebImage 这个第三方库。
4、WebP的劣势：压缩时间长，大概是png的8倍左右（不过一般都是在服务端压缩，客户端解码，所以服务端可以做个预压缩）
解码时间比png长，大概几十毫秒。WebP是节省了流量（图片小），增加了解码时间，换句话说就是：同样的图片，网络越快（图片更小的WebP就没有明显优势），图片越多（WebP要解码），WebP 比 png要慢。
UIWebView，WKWebView都不支持WebP。（UIWebView 可以用NSUrlProtocol来解决，但是WKWebView还没有太完美的办法，谁知道的请告诉我下）不支持流式解压缩（即图片加载的时候会由模糊慢慢变清晰的过程，WebP貌似不支持这种解压缩方式）
5、注意：因为图片的压缩和解码都由 google 提供的 API 完成，所以在使用的时候，记得开启 VPN 再更新 pod ，以免更新 pod 会失败！

2、图片示例

BAWKWebView-WebP1

3、安装、导入示例和源码地址

1、文件夹拖入：下载 demo，把 BAWKWebView-WebP 文件夹拖入项目即可，另外需要 pod 导入 pod 'SDWebImage/WebP'
2、导入头文件：

#import "BAWKWebView_WebP.h"
3、项目源码地址：

OC 版：https://github.com/BAHome/BAWKWebView-WebP
5、注意：因为图片的压缩和解码都由 google 提供的 API 完成，所以在使用的时候，记得开启 VPN 再更新 pod ，以免更新 pod 会失败！

4、BAWKWebView-WebP 的类结构及 demo 示例

BAWKWebView-WebP

BAWKWebView_WebP.h

#ifndef BAWKWebView_WebP_h
#define BAWKWebView_WebP_h

//#import "BAURLSessionProtocol.h"
#import "NSURLProtocol+BAWebView.h"

/*!
 *********************************************************************************
 ************************************ 更新说明 ************************************
 *********************************************************************************
 
 欢迎使用 BAHome 系列开源代码 ！
 如有更多需求，请前往：https://github.com/BAHome
 
 项目源码地址：
 OC 版 ：https://github.com/BAHome/BAWKWebView_WebP
 
 最新更新时间：2017-08-02 【倒叙】<br>
 最新Version：【Version：1.0.0】<br>
 更新内容：<br>
 1.0.0.1、用分类封装 WKWebView，代码无任何侵入更改<br>
 1.0.0.2、WKWebView 目前可以兼容 GIF 动图显示，和 webp 的静态图片显示（webp 的动态图片显示需要等待后期版本更新）<br>
 */

#endif /* BAWKWebView_WebP_h */

NSURLProtocol+BAWebView.h

/****
 NSURLProtocol, UIWebView 直接就可以支持,但是 WKWebView 是不支持的,如何让 WKWebView 也支持 NSURLProtocol
 **/
#import <Foundation/Foundation.h>

@interface NSURLProtocol (BAWebView)

/**
 NSURLProtocol：registerScheme

 @param scheme 【http/https】
 */
+ (void)ba_web_registerScheme:(NSString*)scheme;

/**
 NSURLProtocol：webView销毁的时候注销Scheme

 @param scheme 【http/https】
 */
+ (void)ba_web_unregisterScheme:(NSString*)scheme;

@end

demo 示例

// 示例1：
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    [self.view setBackgroundColor:[UIColor whiteColor]];
    [self ba_registerURLProtocol];
    [self.view addSubview:self.wkWebview];
    [self.wkWebview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.urlString]]];
}

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    self.wkWebview.frame = CGRectMake(0, 0, BAKit_SCREEN_WIDTH, BAKit_SCREEN_HEIGHT);
}

#pragma mark - 注册自定义 NSURLProtocol
- (void)ba_registerURLProtocol
{
    [NSURLProtocol registerClass:NSClassFromString(@"BAURLSessionProtocol")];
    // 注册registerScheme使得WKWebView支持NSURLProtocol
    [NSURLProtocol ba_web_registerScheme:@"http"];
    [NSURLProtocol ba_web_registerScheme:@"https"];
}

- (void)dealloc
{
    [NSURLProtocol unregisterClass:NSClassFromString(@"BAURLSessionProtocol")];
    // 移除 registerScheme
    [NSURLProtocol ba_web_unregisterScheme:@"http"];
    [NSURLProtocol ba_web_unregisterScheme:@"https"];
}

- (WKWebView *)wkWebview
{
    if (!_wkWebview)
    {
        _wkWebview = [[WKWebView alloc]initWithFrame:CGRectZero];
    }
    return _wkWebview;
}

其他示例可下载 demo 查看源码！

5、更新记录：【倒叙】

欢迎使用【BAHome】系列开源代码！
如有更多需求，请前往：【https://github.com/BAHome】

最新更新时间：2017-08-02 【倒叙】

最新Version：【Version：1.0.0】

更新内容：

1.0.0.1、用分类封装 WKWebView，代码无任何侵入更改

1.0.0.2、WKWebView 目前可以兼容 GIF 动图显示，和 webp 的静态图片显示（webp 的动态图片显示需要等待后期版本更新）

6、bug 反馈

1、开发中遇到 bug，希望小伙伴儿们能够及时反馈与我们 BAHome 团队，我们必定会认真对待每一个问题！

2、以后提需求和 bug 的同学，记得把 git 或者博客链接给我们，我直接超链到你们那里！希望大家积极参与测试！

7、BAHome 团队成员

1、QQ 群
479663605

【注意：此群为 2 元付费群，介意的小伙伴儿勿扰！】

孙博岩

QQ：137361770

git：https://github.com/boai

简书：http://www.jianshu.com/u/95c9800fdf47

微博：

马景丽

QQ：1253540493

git：https://github.com/MaJingli

陆晓峰

QQ：442171865

git：https://github.com/zeR0Lu

陈集

QQ：3161182978

git：https://github.com/chenjipdc

简书：http://www.jianshu.com/u/90ae559fc21d

任子丰

QQ：459643690

git：https://github.com/renzifeng

吴丰收

QQ：498121294

石少庸

QQ：363605775

git：https://github.com/CrazyCoderShi

简书：http://www.jianshu.com/u/0726f4d689a3

唐海洋

QQ：790015339

git：https://github.com/tanghaiyang1992

简书：http://www.jianshu.com/u/b833cfd6bd58

8、开发环境和支持版本

开发使用最新版本 Xcode，理论上支持 iOS 8 及以上版本，如有版本适配问题，请及时反馈！多谢合作！

9、感谢

感谢 BAHome 团队成员倾力合作，后期会推出一系列常用 UI 控件的封装，大家有需求得也可以在 issue 提出，如果合理，我们会尽快推出新版本！

BAHome 的发展离不开小伙伴儿的信任与推广，再次感谢各位小伙伴儿的支持！

BAWKWebView-WebP：WKWebView 显示 HT

BAWKWebView-WebP

1、功能及简介

2、图片示例

3、安装、导入示例和源码地址

4、BAWKWebView-WebP 的类结构及 demo 示例

BAWKWebView_WebP.h

NSURLProtocol+BAWebView.h

demo 示例

5、更新记录：【倒叙】

6、bug 反馈

7、BAHome 团队成员

8、开发环境和支持版本

9、感谢

猜你喜欢

热点阅读

BAWKWebView-WebP：WKWebView 显示 HT

BAWKWebView-WebP

1、功能及简介

2、图片示例

3、安装、导入示例和源码地址

4、BAWKWebView-WebP 的类结构及 demo 示例

BAWKWebView_WebP.h

NSURLProtocol+BAWebView.h

demo 示例

5、更新记录：【倒叙】

6、bug 反馈

7、BAHome 团队成员

8、开发环境 和 支持版本

9、感谢

猜你喜欢

热点阅读

8、开发环境和支持版本