前言
由于客户端发版的限制，项目着急上线一个功能或者活动，那么这时就需要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];
结果
回调结果
