iOS下JS與OC互相調用（五）--UIWebView + WebViewJavascriptBridge

WebViewJavascriptBridge是一個有點年代的JS與OC交互的庫，使用該庫的著名應用還挺多的，其實用的時候也不難.

本文介紹的是在UIWebView中使用WebViewJavascriptBridge來達到JS與OC互相調用的目的。WKWebView使用的是WKWebViewJavascriptBridge

建立UIWebView 
建立UIWebView的代碼：

self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:self.webView];

    NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"index.html" withExtension:nil];
    NSURLRequest *request = [NSURLRequest requestWithURL:htmlURL];

    // UIWebView 滾動的比較慢，這裏設置爲正常速度
    self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
    [self.webView loadRequest:request];

這裏不要爲UIWebView設置代理，由於在建立WebViewJavascriptBridge的時候，UIWebView的代理已經被賦值給了WebViewJavascriptBridge。

建立WebViewJavascriptBridge 
由於WebViewJavascriptBridge實例，在控制器中多個地方用到，所以最好定義一個property或者實例變量存起來

_webViewBridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// {setWebViewDelegate}這個方法，能夠將UIWebView的代理，從_webViewBridge中再傳遞出來。
// 因此若是你要在控制器中實現UIWebView的代理方法時，添加下面這樣代碼，不然能夠不寫。
[_webViewBridge setWebViewDelegate:self];

而後跟蹤進{- bridgeForWebView }方法，看它具體是怎麼實現的

+ (instancetype)bridgeForWebView:(WVJB_WEBVIEW_TYPE*)webView {
    WebViewJavascriptBridge* bridge = [[self alloc] init];
    [bridge _platformSpecificSetup:webView];
    return bridge;
}

// 上面方法調用了這個方法
- (void) _platformSpecificSetup:(WVJB_WEBVIEW_TYPE*)webView {
    _webView = webView;
    _webView.delegate = self;
    _base = [[WebViewJavascriptBridgeBase alloc] init];
    _base.delegate = self;
}

其實{-bridgeForWebView }內部也不過是初始化了一個WebViewJavascriptBridge對象，併爲其實例變量_webView 和 _base賦值而已。

註冊js 要調用的Native 功能

先上示例代碼：

#pragma mark - private method
- (void)registerNativeFunctions
{
    [self registScanFunction];

    [self registShareFunction];

    [self registLocationFunction];

    [self regitstBGColorFunction];

    [self registPayFunction];

    [self registShakeFunction];
}

- (void)registShareFunction
{
    // 全部JS 須要調用的原生功能都要先用registerHandler註冊一下
    [_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);
    }];
}

- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler 該方法有兩個參數：第一個參數handlerName，是對這個功能起的一個別名；第二個參數handler，是個block，也就是Native 實現的功能。JS要調用的Native 實現其實就是block 的 {} 內的代碼功能。
爲了便於維護，咱們能夠將JS要調用的Native方法都集中到一塊兒，而後單個功能再封裝一個方法。

完成HMTL必要的JS代碼

HTML 中有一個必需要添加的JS 方法，而後須要自動調用一次該方法。該方法是：

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

上面這個方法的參數是一個function，這個方法的做用主要是在第一次加載HTML的時候起做用，目的是加載一

次wvjbscheme://__BRIDGE_LOADED__，來觸發往HTML中注入一些已經寫好的JS方法。

 添加完setupWebViewJavascriptBridge方法，須要在JS中主動調用一次該方法：

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
        alert('JS方法被調用:'+data);
        responseCallback('js執行過了');
     })
})

Native 須要調用的 JS 功能，也是須要先註冊，而後再執行的。若是Native 須要調用的JS 功能有多個，那麼這些功能都要在這裏先註冊，註冊以後纔可以被Native 調用。
接下來須要好好分析一下JS 中這個方法的做用了。

這裏是重點：
一、首先調用setupWebViewJavascriptBridge，第一次執行的時候，因爲window.WebViewJavascriptBridge和window.WVJBCallbacks都不存在，因此會繼續往下執行，將參數callback（它是一個function）裝進數組賦值給window.WVJBCallbacks。
js 支持動態添加屬性 並賦值，這裏window.WVJBCallbacks = [callback];就是動態添加屬性，並賦值。 另外js中的全局變量均可以使用window.xxxx來調用;動態添加的屬性也能夠不加window.，直接使用。
二、WebViewJavascriptBridge 幫助JS調用Native的url 有兩種，一種是wvjbscheme://__BRIDGE_LOADED__；而另外一種是wvjbscheme://__WVJB_QUEUE_MESSAGE__。前者只有在調用setupWebViewJavascriptBridge的時候執行一次，通常來講這個url 若是沒有頁面應該只會執行一次。第二種url全部js調用Native 功能時，都會使用到。
三、在攔截到自定義的url 時，WebViewJavascriptBridge分了三種狀況，若是是wvjbscheme://__BRIDGE_LOADED__,就往HMTL 中注入已經寫好的js，這個js 在WebViewJavascriptBridge_JS中；若是是wvjbscheme://__WVJB_QUEUE_MESSAGE__,那就利用stringByEvaluatingJavaScriptFromString，取回調用js中callHandler傳進去的參數。
而後再從WebViewJavascriptBridge以前保存的Native 方法對應的block，調用對應的block。

 

調用Native 功能

利用以前注入的JS方法callHandler 就能夠調用Native 功能了。
示例代碼以下：

function shareClick() {
    var params = {'title':'測試分享的標題','content':'測試分享的內容','url':'http://www.baidu.com'};
    WebViewJavascriptBridge.callHandler('shareClick',params,function(response) {
         alert(response);
        document.getElementById("returnValue").value = response;
     });
}

這裏callHandler前的WebViewJavascriptBridge,其實就是上一步注入到JS中的代碼中，動態建立屬性，動態賦值的屬性。以下代碼片斷能夠在WebViewJavascriptBridge_JS中找到。

window.WebViewJavascriptBridge = {
  registerHandler: registerHandler,
  callHandler: callHandler,
  disableJavscriptAlertBoxSafetyTimeout: disableJavscriptAlertBoxSafetyTimeout,
  _fetchQueue: _fetchQueue,
  _handleMessageFromObjC: _handleMessageFromObjC
 };

而callHandler 內部調用了另外一個js function _doSend,而_doSend內部其實，就是把handlerName和 參數data，再加上callbackId 裝成鍵值對，而後保存到數組sendMessageQueue，同時加載一次wvjbscheme://__WVJB_QUEUE_MESSAGE__。
到此 利用WebViewJavascriptBridge實現JS 調用iOS Native 就完成了。

Native 調用 js 功能

Native 調用js 的功能，也須要先在js 中爲要調用的功能註冊一個別名。
 js 註冊Native 要調用的功能 
示例代碼：

setupWebViewJavascriptBridge(function(bridge) {
     bridge.registerHandler('testJSFunction', function(data, responseCallback) {
        alert('JS方法被調用:'+data);
        responseCallback('js執行過了');
     })
    // 註冊其餘的功能
    //bridge.regsiterHandler.....
})

Native 調用功能的別名handlerName：

//    // 若是不須要參數，不須要回調，使用這個
//    [_webViewBridge callHandler:@"testJSFunction"];
//    // 若是須要參數，不須要回調，使用這個
//    [_webViewBridge callHandler:@"testJSFunction" data:@"一個字符串"];
    // 若是既須要參數，又須要回調，使用這個
    [_webViewBridge callHandler:@"testJSFunction" data:@"一個字符串" responseCallback:^(id responseData) {
        NSLog(@"調用完JS後的回調：%@",responseData);
    }];

而callHandler 方法又是如何實現調用js 方法的呢？
callHandler 內部是將傳遞給js 的參數、handlerName、callbackId組合成字典，而後把字典轉換成字符串，將轉換後的字符串以參數的形式，經過 stringByEvaluatingJavaScriptFromString傳遞給js ，js 中將傳遞過來的字符串轉成json ，而後經過handlerName 獲取對應的function執行。

利用WebViewJavascriptBridge來實現JS與OC的交互的優勢：
一、獲取參數時，更方便一些，若是參數中有一些特殊符號或者url帶參數，可以很好的解析。
也有一些缺點：
一、作一次交互，須要執行的js 與原生的交互步驟較多，至少有兩次。
二、須要花較多的時間，理解WebViewJavascriptBridge的原理和使用步驟。

demo地址： https://github.com/domanc/JS_OC_WebViewJavascriptBridge_UIWebView.git