DSBridge在項目中實現跨平臺交互

前言

公司的客戶有許多傳統行業，他們的需求有絕大多數是OA辦公模塊。針對比較簡單的業務，例如：請假申請，出差申請等。爲了節省開發成本，使用H5版本開發，節省開發成本，但有些功能可能涉及到調用原生的功能（好比陀螺儀，錄音），或者H5比較困難實現的功能。
javascript

功能

Vue+VantUI進行H5的開發，同時使用 DSBridge 進行交互。
html

注意點

以前iOS使用的版本是2.0.6版本，使用 DUIWebView 去加載的頁面，由於選圖的組件使用的是原生，要解決跨域問題。固然這是很差的方案。首先不安全，其次，後來有客戶反映，iOS12以後，加載部分頁面後，界面就卡死了。以後就升級到最新的版本3.0.6，升級到 DWKWebView，選圖的功能暫時是把圖片轉成Base64字符串，加上 data:image/png;base64, 協議，提供給img 標籤使用。java

具體使用

LKH5ContentViewController

加載H5內容的容器git

@property (strong, nonatomic) DWKWebView *webview;
@property (strong, nonatomic) LKH5Api *h5Api;

self.webview.navigationDelegate = self;
[self.webview addJavascriptObject:self.h5Api namespace:nil];

#pragma mark - WKNavigationDelegate
複製代碼

LKH5Api

提供全部原生API的工具github

同步獲取原生的數據

- (NSString *)getSyncMobileBase:(NSDictionary *)args{
// args 是 H5 端傳過來的參數
    NSDictionary *params = CURRENTUSER.jwt ? : @{};
    NSMutableDictionary *baseInfo = [NSMutableDictionary dictionary];
   baseInfo[@"jwt"] = params;
   baseInfo[@"appurl"] = @""
   baseInfo[@"ip"] = @"";
   baseInfo[@"port"] = @"";
   return [baseInfo mj_JSONString];
}
複製代碼

異步獲取原生的數據

- (void)getMobileBase:(NSDictionary *)args :(JSCallback)handler{
// args 是 H5 端傳過來的參數
    dispatch_async(dispatch_get_main_queue(), ^{
        NSDictionary *params = CURRENTUSER.jwt ? : @{};
        NSMutableDictionary *baseInfo = [NSMutableDictionary dictionary];
        baseInfo[@"jwt"] = params;
        baseInfo[@"appurl"] = @"";
        baseInfo[@"ip"] = @"";
        baseInfo[@"port"] = @"";
        handler([baseInfo mj_JSONString],YES);
    });
    
}
複製代碼

H5端調用

<!DOCTYPE html>
...
<body>
<button id="getMobileBase" type="button" onclick="getMobileBase()">獲取MobileBase</button>

<script type="text/javascript">

    function getMobileBase() {
        LKBridge.getMobileBase({
         complete:function(jsonStr){
              document.getElementById('getMobileBase').innerHTML = jsonStr
         }
        })
    }
</script>
</body>
</html>
複製代碼

在Native 中調用JS API

[self.webview callHandler:@"registerMobileBase" arguments:@[[baseInfo mj_JSONString]] completionHandler:^(NSString * value){
        HTLog(@"%@",value);
    }];
複製代碼

LKBridge 是咱們中轉的一層，主要實現 dsBridge 調用原生的API的過程。web

window.LKBridge = {
    getMobileBase:function(obj) {
        dsBridge.call('getMobileBase', obj.complete);
    }
}
複製代碼

效果

其餘

如果簡單的交互，也能夠經過截取此url，與js交互。
使用場景：好比加載 echarts 柱狀圖,點擊某根柱子，調整具體的原生的VC頁面。json

<!DOCTYPE html>
<html>
...
window.location.href='luculent:'+mNoArr[param.dataIndex]+'||'+titleArr[param.dataIndex];
</html>
複製代碼

WKWebViewDelegate

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    //將url轉換爲string
    NSString *requestString = [[navigationAction.request URL] absoluteString];
   //hasPrefix 判斷建立的字符串內容是否以luculent:字符開始
   if ([requestString hasPrefix:@"luculent:"]){
        decisionHandler(WKNavigationActionPolicyCancel);
   }else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}
複製代碼

UIWebViewDelegate

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *requestString = [[[request URL] absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    if ([[requestString componentsSeparatedByString:@":"].firstObject isEqualToString:@"luculent"]) {
        ...
        return NO; 
    }
    return YES;
}
複製代碼