iOS 原生與H5交互

第一種：JS給OC傳值蚌成。

技術方案：使用JavaScriptCore.framework框架
使用場景：網(wǎng)頁中代碼中的某個方法抠艾，比如點擊事件方法氢惋，將該方法的參數(shù)傳值給OC羽历，供OC使用嗜侮。
比如：攜程APP中一個熱門景點的網(wǎng)頁中港令，有很多個熱門景點，點擊某個景點的圖片或名稱锈颗，可以跳轉到原生中的該景點詳情頁控制器顷霹。
代碼實現(xiàn)如下：

OC里要實現(xiàn)的代碼：

拖入JavaScriptCore.framework靜態(tài)庫，遵守UIWebViewDelegate代理協(xié)議击吱。
在-webViewDidFinishLoad:方法里編寫如下代碼：

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    context[@"passValue"] = ^{

        NSArray *arg = [JSContext currentArguments];
        for (id obj in arg) {
            NSLog(@"%@", obj);
        }
    };

}

其中 passValue 是JS的函數(shù)名淋淀，得到的 arg數(shù)組里面為JS的 passValue 函數(shù)的參數(shù)，即 JS要傳給OC的參數(shù)覆醇。

JS里要實現(xiàn)的代碼：

function testClick()
            {
                var str1=document.getElementById("text1").value;
                var str2=document.getElementById("text2").value;

                passValue(str1,str2);
            }

在需要給OC傳值的函數(shù)里（例如：testClick（））直接調用 passValue（）函數(shù)朵纷，將值傳進去即可炭臭。

第二種：JS給OC傳值。

技術方案：使用自定義url方法袍辞，每次點擊網(wǎng)頁
使用場景：網(wǎng)頁中代碼中的某個方法鞋仍，比如點擊事件方法，將該方法的參數(shù)傳值給OC革屠，供OC使用凿试。
比如：攜程APP中一個熱門景點的網(wǎng)頁中，有很多個熱門景點似芝，點擊某個景點的圖片或名稱那婉，可以跳轉到原生中的該景點詳情頁控制器。
代碼實現(xiàn)如下：

JS里要實現(xiàn)的代碼:

function testClick()
{
    var str1=document.getElementById("text1").value;
    var str2=document.getElementById("text2").value;

    //  "objc://"為自定義協(xié)議頭;
    //  str1&str2為要傳給OC的值,以":/"作為分隔
    window.location.href="objc://"+":/"+str1+":/"+str2;
}

在需要給OC傳值的函數(shù)里（例如：testClick（））寫如上格式的代碼党瓮。
其中objc:// 是自定義的協(xié)議頭详炬，str1與str2為JS要傳給OC的值。

OC里要實現(xiàn)的代碼：

//遵守UIWebViewDelegate代理協(xié)議寞奸。
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    //拿到網(wǎng)頁的實時url
    NSString *requestStr = [[request.URL absoluteString] stringByRemovingPercentEncoding];

    //在url中尋找自定義協(xié)議頭"objc://"
    if ([requestStr hasPrefix:@"objc://"]) {

        // 以"://"為中心將url分割成兩部分呛谜，放進數(shù)組arr
        NSArray *arr = [requestStr componentsSeparatedByString:@"://"];
        NSLog(@"%@",arr);

        //取其后半段
        NSString *paramStr = arr[1];
        NSLog(@"%@",paramStr);

        //以":/"為標識將后半段url分割成若干部分，放進數(shù)組arr2枪萄，此時arr2[0]為空隐岛，arr2[1]為第一個傳參值，arr2[2]為第二個傳參值瓷翻，以此類推
        NSArray *arr2 = [paramStr componentsSeparatedByString:@":/"];
        NSLog(@"%@",arr2);

        //取出參數(shù)聚凹，進行使用
        if (arr2.count) {
            NSLog(@"有參數(shù)");
            [self doSomeThingWithParamA:arr2[1] andParamB:arr2[2]];
        }else{
            NSLog(@"無參數(shù)");
        }
        return NO;
    }

    return YES;
}
//對JS傳來的值進行調用
- (void)doSomeThingWithParamA:(id)paramA andParamB:(id)paramB{

    NSLog(@"%@    %@", paramA, paramB);
}

第三種：利用第三方庫實現(xiàn)JS與OC的相互傳值。

技術方案：使用WebViewJavascriptBridge三方庫
使用場景：網(wǎng)頁中代碼中的某個方法齐帚，比如點擊事件方法妒牙，將該方法的參數(shù)傳值給OC，供OC使用对妄。
比如：攜程APP中一個熱門景點的網(wǎng)頁中湘今，有很多個熱門景點，點擊某個景點的圖片或名稱剪菱，可以跳轉到原生中的該景點詳情頁控制器摩瞎。
或者將原生中的用戶信息傳遞給網(wǎng)頁，以便其個性化展示
代碼實現(xiàn)如下：

OC傳值給JS

JS里需要實現(xiàn)的代碼：

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)
    }

    //調用上面定義的函數(shù)
    setupWebViewJavascriptBridge(function (bridge){

        //OC傳值給JS 'testJavascriptHandler'為雙方自定義好的統(tǒng)一方法名琅豆；'data'是OC傳過來的值愉豺；'responseCallback'是JS接收到之后給OC的回調
        bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                //打印OC傳過來的值
                log('ObjC called testJavascriptHandler with', data)

                var responseData = { 'Javascript Says':'Right back atcha!' }

                log('JS responding with', responseData)

                //給OC的回調
                responseCallback(responseData)

            })

OC里需要實現(xiàn)的代碼：

導入第三方庫WebViewJavascriptBridge；遵守UIWebViewDelegate

 //設置第三方Bridge是否可用
    [WebViewJavascriptBridge enableLogging];

    //關聯(lián)webView和bridge
    _bridge = [WebViewJavascriptBridge bridgeForWebView:web];

    [_bridge setWebViewDelegate:self];

    //OC給JS傳值茫因，雙方自定義一個統(tǒng)一的方法名'testJavascriptHandler'；data里即為要傳過去的值
    [_bridge callHandler:@"testJavascriptHandler" data:@{@"年齡":@"20"}];

JS傳值給OC

JS里需要實現(xiàn)的代碼：

  //點擊網(wǎng)頁上一個按鈕時
     callbackBt.onclick = function()
     {  
     var str1=document.getElementById("text1").value;
     var str2=document.getElementById("text2").value;

     //JS給OC傳值杖剪。'passValue'為雙方自定義的統(tǒng)一方法名冻押；'str1'&'str2'為要傳的值驰贷； response為OC收到后給JS的回調
     bridge.callHandler('passValue', {str1,str2}, function(response) {
                                })

     }

OC里需要實現(xiàn)的代碼：

導入第三方庫WebViewJavascriptBridge；遵守UIWebViewDelegate洛巢；

   //設置第三方Bridge是否可用
    [WebViewJavascriptBridge enableLogging];

    //關聯(lián)webView和bridge
    _bridge = [WebViewJavascriptBridge bridgeForWebView:web];

    [_bridge setWebViewDelegate:self];

    //js給oc傳值.'passValue'為雙方自定義的統(tǒng)一方法名括袒；'data'為JS傳過來的值；'responseCallback'為OC收到值后給JS返回的回調
    [_bridge registerHandler:@"passValue" handler:^(id data, WVJBResponseCallback responseCallback) {

        //打印js傳過來的值
        NSLog(@"%@", data);

        //返回給js的值
        responseCallback(@"收到了");
    }];

需要注意的是：不論哪方給哪方傳值稿茉，傳值的方法名稱與對應接收值的方法名稱要保持一致锹锰。

UIWebView頁面信息的離線緩存

推薦一個比較好的第三方庫RNCachingURLProtocol ，只需要在AppDelegate中加入下面方法即可漓库。

[NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];

地址:https://github.com/rnapier/RNCachingURLProtocol

大千世界恃慧，求同存異；相遇是緣渺蒿，相識是份痢士，相知便是“猿糞”(緣分)
From MZou