iOS与 H5混合开发JSBridge

demo地址

前言

由于客户端发版的限制，项目着急上线一个功能或者活动，那么这时就需要h5。还有就是一些可能会频繁改动或者新增的功能，如果用native开发的话，要频繁的发版，这就不大现实。这也是为什么现在大家比较推崇的Hybird混合开发。

H5怎么与原生进行交互

JSBridge就横空出世了，JSBridge是一座用JavaScript搭建起来的桥，一端是H5，一端是native。我们搭建这座桥的目的也很简单，让native可以调用H5的js代码，让H5可以“调用”原生的代码。此文采用的是WebViewJavascriptBridge。

- (void)registerJsBridge {
    _jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
    [_jsBridge setWebViewDelegate:self];
    [self.bridgeManager registerJavaScriptHandler:_jsBridge];
}

项目结构

项目结构

JSWebKit是为了与H5进行展示及交互所制作的组件。组件包含了jsbridge插件化管理、webview的样式及个别配置功能。

具体实现

JSWebKit目录

1、DKWebViewController

DKWebViewController是展示webview的基础控制器。

.h头文件

@interface DKWebViewController : UIViewController

@property (nonatomic) DKBridgeManager *bridgeManager;

@property (nonatomic) WebViewJavascriptBridge *jsBridge;
// 需要传入web的请求header
@property (nonatomic, copy) NSDictionary *addionalHeader;

// 网页加载请求
- (void)loadRequest:(NSURLRequest *)request;

// 网页加载网页URL
- (void)loadURL:(NSURL *)url;

// 加载 Html 字符串
- (void)loadHTMLString:(NSString *)htmlString baseURL:(nullable NSURL *)baseURL;

@end

包含了h5所需请求头还有加载的方式。

.m类具体实现

- (void)createBaseView {
    self.view.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.webView];
    [self.webView addSubview:self.progressView];
    [self registerJsBridge];
    // 监控webview的加载进度
    [self.webView addObserver:self forKeyPath:DKWebViewKeyEstimateProgress options:NSKeyValueObservingOptionNew context:nil];
}

// jsbridge相关注册
- (void)registerJsBridge {
    _jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
    [_jsBridge setWebViewDelegate:self];
    [self.bridgeManager registerJavaScriptHandler:_jsBridge];
}

以及WKNavigationDelegate代理实现webview的加载。

2、DKWebView

WKWebView的子类具体承载H5的展示，此中增加了白名单的判断。

- (WKNavigation *)loadRequest:(NSURLRequest *)request {
    NSURL *url = request.URL;
    if (![DKWebViewConfig sharedInstance].enableWhiteList) {
        return [self loadRequest:request additionHeader:self.additionHeader];
    }
    //白名单
    for (NSString *host in [DKWebViewConfig sharedInstance].whiteList) {
        if (![self urlMatch:url.absoluteString host:host]) {
            continue;
        }
        return [self loadRequest:request additionHeader:self.additionHeader];
    }
}

// 请求头的添加
- (WKNavigation *)loadRequest:(NSURLRequest *)request additionHeader:(NSDictionary *)additionHeader {
    NSMutableURLRequest *urlRequest = [NSMutableURLRequest requestWithURL:request.URL];
    for (NSString *key in additionHeader.allKeys) {
        NSString *value = additionHeader[key];
        [urlRequest setValue:value forHTTPHeaderField:key];
    }
    return [super loadRequest:urlRequest];
}

3、DKBridgeManager

DKBridgeManager为拓展的bridge插件管理类，避免每次增加jsbridge修改组件内部类。

.h

@interface DKBridgeManager : NSObject
// WebView 的ViewController
@property (nonatomic, weak) UIViewController *containerViewController;
// 拓展的plugin（每次增加新交互不用频繁修改基础组件）
@property (nonatomic) NSMutableArray<id<DKWebBridgePlugin>> *pluginArray;
// 注册基础 JavaScript 的处理
- (void)registerJavaScriptHandler:(WebViewJavascriptBridge *)bridge;
@end

.m

- (void)registerJavaScriptHandler:(WebViewJavascriptBridge *)bridge {
    // 拓展的plugin（每次增加新交互不用频繁修改基础组件）
    for (id<DKWebBridgePlugin>plugin in self.pluginArray) {
        [plugin registerBridge:bridge];
    }
    
    // 基础plugin可以放在这里
    __weak typeof(self) weakSelf = self;
    [bridge registerHandler:@"setNavigationInfo" handler:^(id data, WVJBResponseCallback responseCallback) {
        __strong typeof(weakSelf) strongSelf = weakSelf;
        NSDictionary *dict = (NSDictionary *)data;
        NSString *title = dict[@"toolbarTitle"];
        if (title.length == 0) {
            [DKBridgeCallBack wrapResponseCallBack:responseCallback message:@"title为空" result:NO responseObject:nil];
        }
        strongSelf.containerViewController.title = title;
       // 回调
        [DKBridgeCallBack wrapResponseCallBack:responseCallback message:nil result:YES responseObject:nil];
    }];
}

4、其他

DKBridgeCallBack处理回调的类，DKWebAppearance设置样式的类，DKWebViewConfig设置白名单的类。

使用

主目录
创建点击的bridgeplugin，clickButton为两端的协议。

- (BOOL)registerBridge:(WebViewJavascriptBridge *)bridge {
    [bridge registerHandler:@"clickButton" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"-----%@",data);
        NSString *str = @"这是参数";
        [DKBridgeCallBack wrapResponseCallBack:responseCallback message:@"点击了" result:YES responseObject:str];
    }];
    return YES;
}

plugin的使用

NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
NSString *appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    
DKWebViewController *webVC = [[DKWebViewController alloc] init];
webVC.bridgeManager = [[DKBridgeManager alloc] init];
DKWebClickBridgePlugin *clickPlugin = [[DKWebClickBridgePlugin alloc] init];
// 拓展plugin 的使用
[webVC.bridgeManager.pluginArray addObjectsFromArray:@[clickPlugin]];
webVC.bridgeManager.containerViewController = webVC;
[webVC loadHTMLString:appHtml baseURL:baseURL];
[self.navigationController pushViewController:webVC animated:YES];

结果

回调结果