iOS UIWebView 和 WKWebView 使用总结

最近在做一些与H5 交互的活动，刚开始接触，也不是很了解，然后跟H5 同事对接上有点吃不消，然后在网上找了一些文章学习了一下。现在就总结一下自己跟H5 调试的一些经验。

<!--这里是 html 代码-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 50px">
<h3>与H5 交互的那点事
</h3>
<input type="button"value="OpenCamera" onclick="client.openCamera()">
</div>
<div style="margin-top: 20px">
<input type="button"value="Share" onclick="jsShare()">
</div>
<div style="margin-top: 20px">
<input type="button"value="WKOpenCamera" onclick="WKOpenCamera()">
</div>
<div style="margin-top: 20px">
<h3>拦截协议
</h3>
<button><a href="app://showAlert">显示弹窗</a></button>
<button><a href="app://presentVC">显示控制器</a></button>
</div>
<script>
var jsShare =  function(json){
json = JSON.stringify({
'title':'标题',
'desc': '信息',
'shareUrl':'http://www.jianshu.com'
});
window.webkit.messageHandlers.jsWkShare.postMessage(json);
<!--如果是UIWebView 调用 jsShare() 方法 注释上面👆这句 -->
client.share(json);
}
var WKOpenCamera = function(){
window.webkit.messageHandlers.WKOpenCamera.postMessage('WKOpenCamera');
}
</script>
</body>
</html>

一、UIWebView 的简单使用

1. 加载 html 的方式：加载本地html 和网络html

加载本地 html：

- (void)setupUIWebView
{
    UIWebView *web = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    //加载网络 html
    //    [web loadRequest:[self urlRequest]];
    web.delegate = self;
    [self.view addSubview:web];
    _webView = web;
    //加载本地 html
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"java" ofType:@"html"];
    NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    NSURL *url = [[NSURL alloc] initWithString:filePath];
    [_webView loadHTMLString:htmlString baseURL:url];
}

加载网络 html：（如果网页约定要校验的话，按照双方的约定，制定请求头）例如：

- (NSURLRequest *)urlRequest
{
    NSString *urlStr = @"http://xxxx.xxxx.com/share_test/index";
    NSURL *url = [NSURL URLWithString:urlStr];
    NSMutableDictionary *dict=[NSMutableDictionary dictionary];
    
    [dict setObject:@"123" forKey:@"username"];
    [dict setObject:@"true" forKey:@"isapp"];
    [dict setObject:@"ios" forKey:@"os"];
    [dict setObject:[NSString stringWithFormat:@"%@",@"v1.4.2"] forKey:@"version"];
    
    NSDate *dat = [NSDate dateWithTimeIntervalSinceNow:0];
    NSTimeInterval a=[dat timeIntervalSince1970];
    NSString *timeString = [NSString stringWithFormat:@"%0.f", a];//转为字符型
    NSInteger rand10_num = arc4random()%9000000000 + 1000000000;
    NSString *signFirstStr = [NSString stringWithFormat:@"%@%@%@",timeString,@"123",@"DM23985xxxx"];
    NSString * md5First = [signFirstStr md5];
    NSString * singSecStr = [NSString stringWithFormat:@"%@%zd",md5First,rand10_num];
    NSString * md5SignStr = [singSecStr md5];
    [dict setObject:timeString forKey:@"timestamp"];
    [dict setObject:[NSString stringWithFormat:@"%zd",rand10_num] forKey:@"key"];
    [dict setObject:md5SignStr forKey:@"sign"];
    
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
    [request setAllHTTPHeaderFields:dict];
    return request;
}

⚠️前方高能：接下来就是交互的事情了

1.1 首先是客户端调用 H5 方法

方法一：
通过： stringByEvaluatingJavaScriptFromString：它可以返回 H5 方法的返回值，一般是 json ，但是绑定了模型之后就不会有返回值了，返回空字符
例如：[_webView stringByEvaluatingJavaScriptFromString:@"jsShare();"];
方法二：block 交互的方式
绑定block，通过执行 H5 方法，执行block 事件
⚠️注意：这种方式好像不能取得H5 方法的返回值，不知道怎么获取，还请高人指教
如下：

// block 方式
JSContext *context = [[JSContext alloc] init];
// 定义一个block ，⚠️注意：context[@"jsShare"] 和 [context evaluateScript:@"jsShare();"]; 这里面的@"" H5 的方法，并且要一致
context[@"jsShare"] = ^() {
    [self jsCallClientAlertWithTitle:@"H5" message:@"调用js执行jsShare方法"];
};
// 调用js执行jsShare方法
JSValue *value = [context evaluateScript:@"jsShare();"];
//但是这里取不到H5 的返回值

1.2 其次H5 调用客户端方法，我们需要通过代理方法来实现

1.2.1 协议拦截

/** 准备加载的使用调用 在这里拦截协议最好
 * return YES 才开始加载网页
 * return NO  不会加载网页
 */
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSLog(@"UIWebView: 协议拦截");
    NSString *urlStr = request.URL.absoluteString;
    NSLog(@"url = %@",urlStr);
    if ([urlStr containsString:@"app://showAlert"]) {
        [self clientDoAlertbyItself];
        return NO;
    } else if ([urlStr containsString:@"app://presentVC"]) {
        [self presentViewController:[TestViewController new] animated:YES completion:nil];
        return NO;
    }
    return YES;
}

1.2.2 注入模型使用代理方式--调用客户端方法

注入位置：documentView.webView.mainFrame.javaScriptContext
注意：⚠️_content[@"xxx"] 与 H5 里面的一样，具体实现请参考html 里面的代码

/** 网页完成加载的时候调用 */
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    NSLog(@"UIWebView:   %s", __func__);
    // 注入模型使用代理  方式
    //注入js函数
    _content = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    ShareJsObject *test = [ShareJsObject new];
    test.shareDelegate = self;
    _content[@"client"] = test;
    /*
     *  oc调用js 异常时
     *  例如 oc调用js 函数不存在
     */
    _content.exceptionHandler = ^(JSContext *context, JSValue *exception) {
        context.exception = exception;
        NSLog(@"toString === %@", exception.toString);
    };
    
}

最后记得返回上一个页面时清楚缓存哦！

/** 清除缓存 */
- (void)cleanAllCacheAndCookie{
    NSLog(@"%s", __func__);
    //清除cookies
    NSHTTPCookie *cookie;
    NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
    for (cookie in [storage cookies]){
        [storage deleteCookie:cookie];
    }
    //清除UIWebView的缓存
    [[NSURLCache sharedURLCache] removeAllCachedResponses];
    NSURLCache * cache = [NSURLCache sharedURLCache];
    [cache removeAllCachedResponses];
    [cache setDiskCapacity:0];
    [cache setMemoryCapacity:0];
}

---------------------------------------------------------------------------------------------------------------------------分割线 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

二、WKWebView 的简单使用

加载方式和 UIWebView 一样的，但是加载的网页有可能不适应手机屏幕，显得网页字太小，就要适应我们的手机屏幕

- (void)setupWKWebView
{
    //这里我们通过 WKUserContentController 绑定 H5 的方法，通过该对象代理进行调用客户端方法
    WKUserContentController *contentCtrl = [[WKUserContentController alloc] init];
    [contentCtrl addScriptMessageHandler:[[WeakScriptDelegate alloc] initWithDelegate:self] name:@"jsWkShare"];
    [contentCtrl addScriptMessageHandler:[[WeakScriptDelegate alloc] initWithDelegate:self] name:@"WKOpenCamera"];
    WKWebViewConfiguration *conf = [[WKWebViewConfiguration alloc] init];
    conf.userContentController = contentCtrl;
    //适应手机屏幕
    NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
    WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
    [contentCtrl addUserScript:wkUScript];
    WKWebView *web = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT) configuration:conf];
    NSString *urlPath = [[NSBundle mainBundle] pathForResource:@"java.html" ofType:nil];
    NSString *htmlStr = [NSString stringWithContentsOfFile:urlPath encoding:NSUTF8StringEncoding error:nil];
    if (!htmlStr) {
        [web loadRequest:[self urlRequest]];
    } else{
        NSURL *url = [NSURL fileURLWithPath:urlPath];//[[NSURL alloc] initWithString:urlPath];
        [web loadHTMLString:htmlStr baseURL:url];
    }
    [self.view addSubview:web];
    web.navigationDelegate = self;
    web.UIDelegate = self;
    _wkWebView = web;
}

⚠️前方高能：接下来就是交互的事情了

2.1 首先是客户端调用 H5 方法

[_wkWebView evaluateJavaScript:@"WKOpenCamera();" completionHandler:^(id _Nullable response,  NSError * _Nullable error) {
                NSLog(@"==%@",response);
            }];

2.2 其次 H5 方法调用客户端方法

2.2.1 协议拦截

/** 是否允许加载网页 在发送请求之前，决定是否跳转 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    NSLog(@"WKWebView: 协议拦截");
    NSLog(@"%s", __func__);
    NSString *urlStr = navigationAction.request.URL.absoluteString;
    NSLog(@"url = %@",urlStr);
    if (navigationAction.navigationType == WKNavigationTypeLinkActivated) {
        if ([urlStr containsString:@"app://showAlert"]) {
            [self clientDoAlertbyItself];
            decisionHandler(WKNavigationActionPolicyCancel);
        } else if ([urlStr containsString:@"app://presentVC"]) {
            [self presentViewController:[TestViewController new] animated:YES completion:nil];
            decisionHandler(WKNavigationActionPolicyCancel);
        }
    } else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

2.2.2 通过代理

这里我们通过 WKUserContentController 绑定 H5 的方法，通过该对象代理进行调用客户端方法

⚠️注意：这里为什么会有 WeakScriptDelegate 这个类呢，其实这里直接绑定 self 也是可以的，但是呢！这里会导致加载 WKWebView 的控制器不释放，weakSelf 也是不能的（不知道为什么？），所以用 WeakScriptDelegate 这个类来背锅。

[contentCtrl addScriptMessageHandler:self name:@"jsWkShare"];

例如：

//这里我们通过 WKUserContentController 绑定 H5 的方法，通过该对象代理进行调用客户端方法
    WKUserContentController *contentCtrl = [[WKUserContentController alloc] init];
    [contentCtrl addScriptMessageHandler:[[WeakScriptDelegate alloc] initWithDelegate:self] name:@"jsWkShare"];
    [contentCtrl addScriptMessageHandler:[[WeakScriptDelegate alloc] initWithDelegate:self] name:@"WKOpenCamera"];

WeakScriptDelegate 的写法，直接写在当前控制器就好

//写在 .h 文件中
@interface WeakScriptDelegate : NSObject<WKScriptMessageHandler>

@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;

@end

//写在 .m 文件中
@implementation WeakScriptDelegate

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate {
    self = [super init];
    if (self) {
        _scriptDelegate = scriptDelegate;
    }
    return self;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}

@end

H5 调用之后，就会触发 WKUserContentController 的代理方法,就是以下方法来反馈给客户端，我们在这里做相应的操作，而且能获取得到 H5 方法的返回值。
例如：

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    //通过 message 的 body 和 name 属性取得相应的内容，一般 H5 方法，返回值都在 body 里面
    NSLog(@"body == %@",message.body);
    NSLog(@"name == %@",message.name);
    if (message.body) {
        __weak typeof(self) weakSelf = self;
        NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:[message.body dataUsingEncoding:NSUTF8StringEncoding] options:NSJSONReadingMutableContainers error:nil];
        NSString *title = [dict objectForKey:@"title"];
        NSString *desc = [dict objectForKey:@"desc"];
        NSString *shareUrl = [dict objectForKey:@"shareUrl"];
        if (!title) title = message.name;
        if (!desc) desc = message.body;
        [weakSelf jsCallClientAlertWithTitle:title message:[NSString stringWithFormat:@"%@\n%@", desc,shareUrl]];
    }
}

最后就是清除缓存了和 UIWebView 差不多，但是 iOS 9 之后，得用WKWebView 相应清除得方法，如下：

- (void)cleanCache
{
    if (@available(iOS 9.0, *)) {
        NSSet *websiteDataTypes = [WKWebsiteDataStore allWebsiteDataTypes];
        NSDate *dateFrom = [NSDate dateWithTimeIntervalSince1970:0];
        [[WKWebsiteDataStore defaultDataStore] removeDataOfTypes:websiteDataTypes modifiedSince:dateFrom completionHandler:^{
        }];
    } else {
        NSHTTPCookie *cookie;
        NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage];
        for (cookie in [storage cookies])
        {
            [storage deleteCookie:cookie];
        }
        NSURLCache * cache = [NSURLCache sharedURLCache];
        [cache removeAllCachedResponses];
        [cache setDiskCapacity:0];
        [cache setMemoryCapacity:0];
    }
}

最后的最后，上一个 Demo 吧! 详细的内容都在代码中，不对的地方，请大神们指出。

最后编辑于：2018.09.20 11:25:14

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,651评论 6赞 501
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,468评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,931评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,218评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,234评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,198评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,084评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,926评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,341评论 1赞 311
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,563评论 2赞 333
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,731评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,430评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,036评论 3赞 326
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,676评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,829评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,743评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,629评论 2赞 354

iOS UIWebView 和 WKWebView 使用总结

一、UIWebView 的简单使用

1. 加载 html 的方式： 加载本地html 和 网络html

⚠️前方高能：接下来就是交互的事情了

1.1 首先是客户端调用 H5 方法

1.2 其次H5 调用客户端方法，我们需要通过代理方法来实现

1.2.1 协议拦截

1.2.2 注入模型使用代理方式--调用客户端方法

二、WKWebView 的简单使用

⚠️前方高能：接下来就是交互的事情了

2.1 首先是客户端调用 H5 方法

2.2 其次 H5 方法调用客户端方法

2.2.1 协议拦截

2.2.2 通过代理

⚠️注意：这里为什么会有 WeakScriptDelegate 这个类呢，其实这里直接绑定 self 也是可以的，但是呢！这里会导致加载 WKWebView 的控制器不释放，weakSelf 也是不能的（不知道为什么？），所以用 WeakScriptDelegate 这个类来背锅。

WeakScriptDelegate 的写法，直接写在当前控制器就好

推荐阅读更多精彩内容

1. 加载 html 的方式：加载本地html 和网络html