DSBridge是目前地球上最好的IOS/Android javascript bridge. 通過它可以在web和native之間調(diào)用彼此方法。DSBridge是目前唯一一個支持同步調(diào)用的跨平臺Js bridge.

DSBridge-IOS github:https://github.com/wendux/DSBridge-IOS

使用

1. Native 實現(xiàn)API 代理類

   //JsApiTest.m 
   @implementation JsApiTest
   //for synchronous invocation  
   - (NSString *) testSyn:(NSDictionary *) args
   {
       return [(NSString *)[args valueForKey:@"msg"] stringByAppendingString:@"[ syn call]"];
   }
   //for asynchronous invocation
   - (NSString *) testAsyn:(NSDictionary *) args :(void (^)(NSString * _Nullable result))handler
   {
       handler([(NSString *)[args valueForKey:@"msg"] stringByAppendingString:@"[ asyn call]"]);
   }
   @end
   

2. 注冊api代理類至DWebview

   DWebview * webview=[[DWebview alloc] initWithFrame:bounds];
   jsApi=[[JsApiTest alloc] init];
   webview.JavascriptInterfaceObject=jsApi;
   

3. 在Javascript中調(diào)用Native API

   //Call Native API
   var bridge = getJsBridge();
   //Call synchronously 
   var str=bridge.call("testSyn", {msg: "testSyn"});
   //Call asynchronously
   bridge.call("testAsyn", {msg: "testAsyn"}, function (v) {
    alert(v);
   })
   
   //Test will be called by oc， must be global function!
   function test(arg1,arg2){
    return arg1+arg2;
   }
   

4. 最后，Native中調(diào)用Javascript API

    [_webview callHandler:@"test"
     arguments:[[NSArray alloc] initWithObjects:@1,@"hello", nil]
     completionHandler:^(NSString *  value){
        NSLog(@"%@",value);
     }];
   

Javascript API 介紹

getJsBridge

獲取javascript bridge 對象；此方法為sdk內(nèi)置，可在任何地方調(diào)用。

bridge.call(method,[args,callback])

功能：調(diào)用Native api

method: api函數(shù)名

args:參數(shù)，類型：json, 可選參數(shù)

callback(String returnValue): 處理調(diào)用結(jié)果的回調(diào)，僅異步調(diào)用時需要.

注意

Native API 方法簽名

為了在ios和android平臺下兼容，對IOS端Native API接口約定如下：

1. 所有API返回值類型為NSString, 不存在時返回nil即可。
2. 參數(shù)以JSON傳遞; DSBridge會將js參數(shù)自動轉(zhuǎn)化為NSDictionary

注：JsApiTest.m中實現(xiàn)的方法可以不在JsApiTest.h中聲明

調(diào)用Javascript

DWebView提供了兩個api用于調(diào)用js

//調(diào)用js api(函數(shù))
-(void)callHandler:(NSString *)methodName arguments:(NSArray * _Nullable)args 
                 completionHandler:(void (^)(NSString * _Nullable))completionHandler;
//執(zhí)行任意js代碼
- (void)evaluateJavaScript:(NSString *)javaScriptString 
                completionHandler:(void (^ _Nullable)(NSString * _Nullable))completionHandler;

callHandler中，methodName 為js函數(shù)名，args為參數(shù)數(shù)組，可以接受數(shù)字、字符串等。

兩個函數(shù)中completionHandler為完成回調(diào)，用于獲取js執(zhí)行的結(jié)果。

調(diào)用時機

DWebview只有在javascript context初始化成功后才能正確執(zhí)行js代碼，而javascript context初始化完成的時機一般都比整個頁面加載完畢要早，隨然DSBridge能捕獲到j(luò)avascript context初始化完成的時機，但是一些js api可能聲明在頁面尾部，甚至單獨的js文件中，如果在javascript context剛初始化完成就調(diào)用js api, 此時js api 可能還沒有加載，所以會失敗，為此專門提供了一個api設(shè)置一個回調(diào)，它會在頁面加載結(jié)束后調(diào)用，為了和didpagefinished區(qū)分，我們?nèi)∶缦拢?/p>

- (void)setJavascriptContextInitedListener:(void(^_Nullable)(void))callback;

若是端上主動調(diào)用js，請在此回調(diào)中進行 。示例如下：

__block DWebview * _webview=webview;
[webview setJavascriptContextInitedListener:^(){
  [_webview callHandler:@"test"
  arguments:[[NSArray alloc] initWithObjects:@1,@"hello", nil]
  completionHandler:^(NSString *  value){
    NSLog(@"%@",value);
  }];
}];

完整的示例請查看demo工程。

關(guān)于DWebview

SDK中有三個webview:

DWKwebview:繼承自WKWebView，內(nèi)部已經(jīng)實現(xiàn)js prompt、alert、confirm函數(shù)對應(yīng)的對話框。

DUIwebview:繼承自UIWebView

DWebview:自定義view, 內(nèi)部在ios8.0以下會使用DUIwebview, 大于等于8.0會使用DWKwebview。

所有的webview除了都實現(xiàn)了上述api之外，提供了一個加載網(wǎng)頁的便捷函數(shù)：

- (void)loadUrl: (NSString *) url;

您可以根據(jù)具體業(yè)務(wù)使用任意一個，不過一般情況下優(yōu)先選用DWebview，它在新設(shè)備上更省資源，效率更高。

DWebview還提供了一些其它api和屬性，具體請查看其頭文件，需要特殊說明的是，有一個api：

- (id _Nullable) getXWebview;

它可以返回DWebview內(nèi)部使用的真實webview, 值會是DUIwebview和DWKwebview的實例之一，您可以通過isKindOfClass來判斷，吃函數(shù)主要用于擴展DWebview，下面可以看一下loadRequest的大概實現(xiàn)：

- (void)loadRequest:(NSURLRequest *)request
{
    id webview=[self getXWebview]；
    if([webview isKindOfClass:[DUIwebview class]]){
        [(DUIwebview *)webview loadRequest:request];
    }else{
        [(DWKwebview *)webview loadRequest:request];
    }
}

Alert dialog

DWebview已經(jīng)實現(xiàn) alert、prompt、comfirm對話框，您可以不做處理，也可以自定義。值得一提的是js 在調(diào)用alert函數(shù)正常情況下只要用戶沒有關(guān)閉alert對話框，js代碼是會阻塞的，但是考慮到alert 對話框只有一個確定按鈕，也就是說無論用戶關(guān)閉還是確定都不會影響js代碼流程，所以DWebview中在彈出alert對話框時會先給js返回，這樣一來js就可以繼續(xù)執(zhí)行，而提示框等用戶關(guān)閉時在關(guān)閉即可。如果你就是想要阻塞的alert，可以自定義。而DWebview的prompt、comfirm實現(xiàn)完全符合ecma標準，都是阻塞的。

請不要手動設(shè)置DUIwebview的delegate屬性，因為DUIwebview在內(nèi)部已經(jīng)設(shè)置了該屬性，如果您需要自己處理頁面加載過程，請設(shè)置WebEventDelegate屬性。

相關(guān)資料

DSBridge-Android:https://github.com/wendux/DSBridge-Android

與WebViewJavascriptBridge的對比 DSBridge VS WebViewJavascriptBridge。

拉票

如果你覺得不錯，麻煩star一下以便讓更多人知道??。