有個(gè)要提前說(shuō)一下，WKWebview cookie 與Native 的 cookie 是分開的，在接入WKWebview 的時(shí)候發(fā)現(xiàn)無(wú)法同步cookie，試過很多方法，還是不行。

最后還是不甘心的換回了webView, 如果有解決這個(gè)問題的麻煩指教一下，給你紅包，哈哈。

不管怎么樣，多知道些東西總是好的。

WKWebview

Demo在這

先來(lái)個(gè)最直觀的，為什么要用WKWebview
這里分別用WKWebview 和UIWebview加載了一個(gè)百度的網(wǎng)頁(yè),內(nèi)存的占用情況如下

• WKWebview

904629-681aef2c4278a7f7.png

• UIWebview

904629-36ae9c8de0752860.png

相比之下，WKWebView占用20M，而UIWebView占用73M，這性能提升的不只一點(diǎn)點(diǎn)。具體的要了解和使用 WKWebview 的，給個(gè)友情鏈接 劉彥瑋的技術(shù)博客

這里主要講下 WKWebViewJavascriptBridge ，一個(gè)優(yōu)秀的第三方框架

• WebViewJavascriptBridge

之前我也是自己封裝WK做的交互，后面偶然間看到的這個(gè)開源庫(kù)，8000+ star，果斷上手。 安卓那邊也有個(gè)類似這種的庫(kù), 2000+ star，調(diào)用方法基本類似， 這樣 與前端的交互就可以只寫一套代碼了，輕松加愉快。

先做一個(gè)簡(jiǎn)單Demo熟悉下
先導(dǎo)入
pod 'WebViewJavascriptBridge', '~> 5.0

904629-611ab58e378a2815.png

如果用UIwebview就導(dǎo)入WebViewJavascriptBridge。

WKWebViewJavascriptBridge 是后面加入的，用WKWebview要導(dǎo)入這個(gè)頭文件

這里用一個(gè)單例類用來(lái)管理交互 函數(shù)，像Cordova那種寫插件的形式，寫在一個(gè)類供JS調(diào)用,具體的可以看Demo。

html 的代碼段落

貼一下 demo.html 的 JS 段落 ,看注釋，主要知道JS 怎么調(diào)用 原生方法 和 注冊(cè)JS方法 供JS調(diào)用

 <script type="text/javascript">


//這是必須要寫的，用來(lái)初始化一些設(shè)置
        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 調(diào)JS ， 需要給OC調(diào)用的函數(shù)必須寫在這個(gè)函數(shù)里面
        setupWebViewJavascriptBridge(function(bridge) {

            bridge.registerHandler('testJSFunction', function(data, responseCallback) {
                alert('JS方法被調(diào)用:'+data);
                responseCallback('js執(zhí)行過了');
            })


        })


//這個(gè) shareClick 就是 原生那邊 注入的函數(shù) ， 通過這個(gè)方法來(lái)調(diào)用原生 和傳值
//parmas 是JS 給OC的數(shù)據(jù) ， response 是 OC函數(shù)被調(diào)用之后 再 告訴JS 我被調(diào)用了
//比如微信分享，給Dic給原生 ， 原生分享成功后再把結(jié)果回調(diào)給JS 進(jìn)行處理
        function shareClick() {
            var params = {'title':'測(cè)試分享的標(biāo)題','content':'測(cè)試分享的內(nèi)容','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];  

//注冊(cè)原生方法給JS調(diào)用
- (void)registShareFunction
{

    [_webViewBridge registerHandler:@"shareClick" handler:^(id data, WVJBResponseCallback responseCallback) {
        // data 的類型與 JS中傳的參數(shù)有關(guān)
        NSDictionary *tempDic = data;
        // 在這里執(zhí)行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        
        // 將分享的結(jié)果返回到JS中
        NSString *result = [NSString stringWithFormat:@"分享成功:%@,%@,%@",title,content,url];
        
        responseCallback(result);  //回調(diào)給JS
        
        
    }];
}




//原生調(diào)用JS , JS 中先聲明testJSFunction 函數(shù)
-(void)pp_hander
{
    
    //testJSFunction 是JS的方法
    [_webViewBridge callHandler:@"testJSFunction" data:@"一個(gè)字符串" responseCallback:^(id responseData) {
        
        NSLog(@"調(diào)用完JS后的回調(diào)：%@",responseData);
        
    }];
}

基本用法差不多就這些，很簡(jiǎn)潔，用起來(lái)也挺簡(jiǎn)單，準(zhǔn)備接入目前的項(xiàng)目使用。

如果不知道在模擬器怎么看調(diào)試網(wǎng)頁(yè)，可以看看淘寶前端團(tuán)隊(duì)的這篇 在 iOS 模擬器中調(diào)試 Web 頁(yè)面
Safari的開發(fā)者選項(xiàng)，如果沒有，去偏好設(shè)置->高級(jí)->顯示開發(fā)者選項(xiàng)就有了

如果調(diào)用不成功，可能是這些原因

 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里的代碼這里是不能動(dòng)的，原樣貼上去就行。 之前有一次莫名其妙老是調(diào)用不了OC的方法， 后來(lái)發(fā)現(xiàn)是

window.WebViewJavascriptBridg 寫成了 window.WebView JavascriptBridg， 一直沒看到，在網(wǎng)頁(yè)端一直報(bào)找不到 WebViewJavascriptBridg這個(gè)變量，看到報(bào)錯(cuò)應(yīng)該能發(fā)現(xiàn)在定義的時(shí)候有出錯(cuò)