demo地址

前言

由于客戶端發(fā)版的限制，項(xiàng)目著急上線一個(gè)功能或者活動(dòng)，那么這時(shí)就需要h5。還有就是一些可能會(huì)頻繁改動(dòng)或者新增的功能，如果用native開(kāi)發(fā)的話，要頻繁的發(fā)版，這就不大現(xiàn)實(shí)。這也是為什么現(xiàn)在大家比較推崇的Hybird混合開(kāi)發(fā)。

H5怎么與原生進(jìn)行交互

JSBridge就橫空出世了，JSBridge是一座用JavaScript搭建起來(lái)的橋，一端是H5，一端是native。我們搭建這座橋的目的也很簡(jiǎn)單，讓native可以調(diào)用H5的js代碼，讓H5可以“調(diào)用”原生的代碼。此文采用的是WebViewJavascriptBridge。

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

項(xiàng)目結(jié)構(gòu)

項(xiàng)目結(jié)構(gòu)

JSWebKit是為了與H5進(jìn)行展示及交互所制作的組件。組件包含了jsbridge插件化管理、webview的樣式及個(gè)別配置功能。

具體實(shí)現(xiàn)

JSWebKit目錄

1、DKWebViewController

DKWebViewController是展示webview的基礎(chǔ)控制器。

.h頭文件

@interface DKWebViewController : UIViewController

@property (nonatomic) DKBridgeManager *bridgeManager;

@property (nonatomic) WebViewJavascriptBridge *jsBridge;
// 需要傳入web的請(qǐng)求header
@property (nonatomic, copy) NSDictionary *addionalHeader;

// 網(wǎng)頁(yè)加載請(qǐng)求
- (void)loadRequest:(NSURLRequest *)request;

// 網(wǎng)頁(yè)加載網(wǎng)頁(yè)URL
- (void)loadURL:(NSURL *)url;

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

@end

包含了h5所需請(qǐng)求頭還有加載的方式。

.m類(lèi)具體實(shí)現(xiàn)

- (void)createBaseView {
    self.view.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:self.webView];
    [self.webView addSubview:self.progressView];
    [self registerJsBridge];
    // 監(jiān)控webview的加載進(jìn)度
    [self.webView addObserver:self forKeyPath:DKWebViewKeyEstimateProgress options:NSKeyValueObservingOptionNew context:nil];
}

// jsbridge相關(guān)注冊(cè)
- (void)registerJsBridge {
    _jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
    [_jsBridge setWebViewDelegate:self];
    [self.bridgeManager registerJavaScriptHandler:_jsBridge];
}

以及WKNavigationDelegate代理實(shí)現(xiàn)webview的加載。

2、DKWebView

WKWebView的子類(lèi)具體承載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];
    }
}

// 請(qǐng)求頭的添加
- (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插件管理類(lèi)，避免每次增加jsbridge修改組件內(nèi)部類(lèi)。

.h

@interface DKBridgeManager : NSObject
// WebView 的ViewController
@property (nonatomic, weak) UIViewController *containerViewController;
// 拓展的plugin（每次增加新交互不用頻繁修改基礎(chǔ)組件）
@property (nonatomic) NSMutableArray<id<DKWebBridgePlugin>> *pluginArray;
// 注冊(cè)基礎(chǔ) JavaScript 的處理
- (void)registerJavaScriptHandler:(WebViewJavascriptBridge *)bridge;
@end

.m

- (void)registerJavaScriptHandler:(WebViewJavascriptBridge *)bridge {
    // 拓展的plugin（每次增加新交互不用頻繁修改基礎(chǔ)組件）
    for (id<DKWebBridgePlugin>plugin in self.pluginArray) {
        [plugin registerBridge:bridge];
    }
    
    // 基礎(chǔ)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;
       // 回調(diào)
        [DKBridgeCallBack wrapResponseCallBack:responseCallback message:nil result:YES responseObject:nil];
    }];
}

4、其他

DKBridgeCallBack處理回調(diào)的類(lèi)，DKWebAppearance設(shè)置樣式的類(lèi)，DKWebViewConfig設(shè)置白名單的類(lèi)。

使用

主目錄

- (BOOL)registerBridge:(WebViewJavascriptBridge *)bridge {
    [bridge registerHandler:@"clickButton" handler:^(id data, WVJBResponseCallback responseCallback) {
        NSLog(@"-----%@",data);
        NSString *str = @"這是參數(shù)";
        [DKBridgeCallBack wrapResponseCallBack:responseCallback message:@"點(diǎn)擊了" 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];

結(jié)果

回調(diào)結(jié)果