WKWebview 和 WebViewJavascriptBridge

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调用

 

 <script type="text/javascript">


//这是必需要写的，用来初始化一些设置
        function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }


//这也是固定的， OC 调JS ， 须要给OC调用的函数必须写在这个函数里面
        setupWebViewJavascriptBridge(function(bridge) {

            bridge.registerHandler('testJSFunction', function(data, responseCallback) {
                alert('JS方法被调用:'+data);
                responseCallback('js执行过了');
            })


        })


//这个 shareClick 就是 原生那边 注入的函数 ， 经过这个方法来调用原生 和传值
//parmas 是JS 给OC的数据 ， response 是 OC函数被调用以后 再 告诉JS 我被调用了
//好比微信分享，给Dic给原生 ， 原生分享成功后再把结果回调给JS 进行处理
        function shareClick() {
            var params = {'title':'测试分享的标题','content':'测试分享的内容','url':'http://www.baidu.com'};
            WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {

                console.log(response);


            });
        }



    </script>

 

---

• 看下原生代码

初始化

#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的开发者选项，若是没有，去偏好设置->高级->显示开发者选项就有了

 

 

---

若是调用不成功，多是这些缘由

   function setupWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
            if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
            window.WVJBCallbacks = [callback];
            var WVJBIframe = document.createElement('iframe');
            WVJBIframe.style.display = 'none';
            WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
        }

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

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

 

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

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

 这个方法，具体缘由再看看。