最近一直在忙，今天抽空寫一下H5和Native的交互

一、選擇

• 項目本身webview使用的是WKWebview，其實WKWebview自帶的messageHandle也可以滿足此需求
• JSContext,源自于JavaScriptCore框架中的東西，最后不使用此方案源于一下幾點
  • 但是其中繁雜的字符串使用，讓我覺的可能會由于粗心出現(xiàn)不可預(yù)知的錯誤
  • 加載時機的問題，當(dāng)你重新loadrequest的時候，會導(dǎo)致js注入失敗
  • 回調(diào)方法略復(fù)雜
• JavaScriptBridge，最后選擇此庫源于以下幾點
  • 使用簡單，注冊完畢之后設(shè)置完代理，只需要負責(zé)注冊方法和調(diào)用方法
  • 回調(diào)簡單，兩端回調(diào)responsecallback包含在注冊的方法中。使用block
  • 三端通用，JavaScript和iOS、Android都可以（Android版本庫）
  • Ps :關(guān)于Android版本庫，其中很多是按照iOS版的JavaScriptBridge改寫的。但是其中有很多問題，尤其是各種調(diào)用時機問題，上面的鏈接是經(jīng)過我旁邊的Android小哥試了四五個版本之后發(fā)現(xiàn)的，修復(fù)了各種改寫版的問題

二、使用

• 首先需要引入WebViewJavascriptBridge庫

#import "WebViewJavascriptBridge.h"

• 初始化，此處為了方便子類使用，所以在基類中注冊bridge，并return bridge對象，方便子類調(diào)用

#pragma mark - 橋接

- (void)InitializeWebViewJavascriptBridge {
    // 注冊橋接
    self.bridge = [SWHybridManager setJavaScriptBridgeWithWebView:self.webView controller:self];
}

[WKWebViewJavascriptBridge enableLogging];
WKWebViewJavascriptBridge *bridge = [WKWebViewJavascriptBridge bridgeForWebView:webView];
[bridge setWebViewDelegate:controller];

• 注冊方法供JavaScript調(diào)用

__weak typeof(controller)wController = controller;
/****************************公共方法注冊-Start*********************/
    //MARK:打開窗體
    [bridge registerHandler:HandlerFunctionNameOpenWindow handler:^(id data, WVJBResponseCallback responseCallback) {
        __strong typeof(wController)sController = wController;
        NSLog(@"\n調(diào)用了openWindow: %@", data);
        NSDictionary *dict = (NSDictionary *)data;
        SWOpenWindowModel *model = [SWOpenWindowModel yy_modelWithDictionary:dict];
        [self pushViewController:sController data:model responseCallback:responseCallback];
    }];

• 調(diào)用JavaScript方法

[self.bridge callHandler:callFunctionNameGetSearchKeyWord data:json];

三、方法名定義

• 因為方法名的定義是字符串，所以建議采用常量字符串，防止拼寫錯誤
• 其次不建議采用宏定義
• 我采用以下方法
• 橋接管理類的.h

/**打開窗體 */
FOUNDATION_EXPORT  NSString *const HandlerFunctionNameOpenWindow;
/** 關(guān)閉窗口*/
FOUNDATION_EXPORT  NSString *const HandlerFunctionNameCloseWindow;

• 橋接管理類的.m

/**打開窗體 */
NSString *const HandlerFunctionNameOpenWindow = @"openWindow";
/** 關(guān)閉窗口*/
NSString *const HandlerFunctionNameCloseWindow = @"closeWindow";

• 使用時直接使用常量字符串即可
• 注意點：如類似我使用在基類傳入控制器和webview到管理類中，在類中使用controller要注意循環(huán)引用，否則會導(dǎo)致控制器無法釋放

+ (WKWebViewJavascriptBridge *)setJavaScriptBridgeWithWebView:(WKWebView *)webView controller:(__kindof SWBaseWebViewController *)controller;

__weak typeof(controller)wController = controller; // 弱引用傳入控制器
__strong typeof(wController)sController = wController; // 在block內(nèi)部強引用

四、數(shù)據(jù)傳輸

• iOS端直接返回字典即可
• 我代碼中是返回json字符串，為了與Android統(tǒng)一，方便H5解析數(shù)據(jù)

五、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 = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

setupWebViewJavascriptBridge(function(bridge) {
    
    /* Initialize your app here */

    bridge.registerHandler('JS Echo', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })
    bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })
})

六、注意事項

• 如果產(chǎn)生調(diào)用不通的問題，多為JavaScript調(diào)用時機問題
• 注意橋接的代理