WKWebview 和 WebViewJavascriptBridge

https://www.cnblogs.com/L-vincen/p/6681435.html

链接在这里，有很多不错的文章，大家可以去看一下

WKWebview

Demo在这

先来个最直观的，为什么要用WKWebview

这里分别用WKWebview 和UIWebview加载了一个百度的网页,内存的占用情况如下

WKWebview

UIWebview

相比之下，WKWebView占用20M，而UIWebView占用73M，这性能提升的不只一点点。
具体的要了解和使用 WKWebview 的，给个友情链接刘彦玮的技术博客
这里主要讲下 WKWebViewJavascriptBridge ，一个优秀的第三方框架

WebViewJavascriptBridge

Github地址在这里
（https://github.com/marcuswestin/WebViewJavascriptBridge）

之前我也是自己封装WK做的交互，后面偶然间看到的这个开源库，8000+ star，果断上手。安卓那边也有个类似这种的库, 2000+ star，调用方法基本类似，这样与前端的交互就可以只写一套代码了，轻松加愉快。

先做一个简单Demo熟悉下
先导入
pod 'WebViewJavascriptBridge', '~> 5.0

看一下目录

如果用UIwebview就导入WebViewJavascriptBridge。

WKWebViewJavascriptBridge 是后面加入的，用WKWebview要导入这个头文件

这里用一个单例类用来管理交互函数，像Cordova那种写插件的形式，写在一个类供JS调用,具体的可以看Demo。

JS 调用原生方法

贴一下 demo.html 的 JS 段落 ,看注释，主要知道JS 怎么调用原生方法和注册JS方法供JS调用

 
//注册原生方法给JS调用
- (void)registShareFunction
{
    [_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic = data;
        // 在这里执行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
 
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
 
        responseCallback(result);  //回调给JS
 
    }];
}

看下原生代码

初始化

#import "WKWebViewJavascriptBridge.h"  //注意是 WK 开头的 ， 如果不需要适配8.0以下的可以直接就用WKWebview

@property WebViewJavascriptBridge* bridge;

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

//注册原生方法给JS调用
- (void)registShareFunction
{

[_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
// data 的类型与 JS中传的参数有关
NSDictionary *tempDic = data;
// 在这里执行分享的操作
NSString *title = [tempDic objectForKey:@"title"];
NSString *content = [tempDic objectForKey:@"content"];
NSString *url = [tempDic objectForKey:@"url"];

// 将分享的结果返回到JS中
NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];

responseCallback(result); //回调给JS

}];
}

//原生调用JS , JS 中先声明testJSFunction 函数
-(void)pp_hander
{

//testJSFunction 是JS的方法
[_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {

NSLog(@"调用完JS后的回调：%@",responseData);

}];
}

基本用法差不多就这些，很简洁，用起来也挺简单，准备接入目前的项目使用。

如果不知道在模拟器怎么看调试网页，可以看看淘宝前端团队的这篇
在 iOS 模拟器中调试 Web 页面

Safari的开发者选项，如果没有，去偏好设置->高级->显示开发者选项就有了

如果调用不成功，可能是这些原因

写在JS里的代码这里是不能动的，原样贴上去就行。之前有一次莫名其妙老是调用不了OC的方法，后来发现是

window.WebViewJavascriptBridg 写成了 window.WebView JavascriptBridg， 一直没看到，在网页端一直报找不到 WebViewJavascriptBridg这个变量，看到报错应该能发现在定义的时候有出错

还有一个有意思的就是我设置了 _baseWebview.navigationDelegate=self;之后竟然也调用不了，JS端不走click()方法

貌似只能用 [_webViewBridge setWebViewDelegate:self];

这个方法，具体原因再看看。