最近在公司有一个原生和H5交互的项目，用到了WebViewJavascriptBridge，下面简单讲解下如何使用以及前端JS如何封装。
什么是JS Bridge
在移动开发中为了加快开发进度(0.0)很多页面会用H5来开发，这样一来可以快速完成节约，二来APP内嵌WebView可以较少APP更新频率。因此，成本现在大多数公司的首选，但是部分功能JavaScript的权限受到严格限制，比如拍照，读写权限，获取GPS等等，这些native功能，这时候我们需要去委托原生去实现，原生实现后再告知js。这个时候就需要一个中间桥梁，于是就有了WebViewJavascriptBridge，简称 JS bridge。
简单使用
在HTML中使用
WebViewJavascriptBridge Demo
在OC中使用
#import "ViewController.h"
#import "WebViewJavascriptBridge.h"
@interface ViewController ()
@property WebViewJavascriptBridge *bridge;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
NSString *appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[webView loadHTMLString:appHtml baseURL:baseURL];
// 开启日志
[WebViewJavascriptBridge enableLogging];
// 给哪个webview建立JS与OjbC的沟通桥梁
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[self.bridge setWebViewDelegate:self];
[self renderButtons:webView];
// JS主动调用OjbC的方法
// 这是JS会调用getUserIdFromObjC方法，这是OC注册给JS调用的
// JS需要回调，当然JS也可以传参数过来。data就是JS所传的参数，不一定需要传
// OC端通过responseCallback回调JS端，JS就可以得到所需要的数据
[self.bridge registerHandler:@"getUserIdFromObjC" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"js call getUserIdFromObjC, data from js is %@", data);
if (responseCallback) {
// 反馈给JS
responseCallback(@{@"userId": @"123456"});
}
}];
[self.bridge registerHandler:@"getBlogNameFromObjC" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"js call getBlogNameFromObjC, data from js is %@", data);
if (responseCallback) {
// 反馈给JS
responseCallback(@{@"blogName": @"标哥的技术博客"});
}
}];
[self.bridge callHandler:@"getUserInfos" data:@{@"name": @"标哥"} responseCallback:^(id responseData) {
NSLog(@"from js: %@", responseData);
}];
}
- (void)webViewDidStartLoad:(UIWebView *)webView {
NSLog(@"webViewDidStartLoad");
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"webViewDidFinishLoad");
}
- (void)renderButtons:(UIWebView*)webView {
UIFont* font = [UIFont fontWithName:@"HelveticaNeue" size:12.0];
UIButton *callbackButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[callbackButton setTitle:@"打开博文" forState:UIControlStateNormal];
[callbackButton addTarget:self action:@selector(onOpenBlogArticle:) forControlEvents:UIControlEventTouchUpInside];
[self.view insertSubview:callbackButton aboveSubview:webView];
callbackButton.frame = CGRectMake(10, 400, 100, 35);
callbackButton.titleLabel.font = font;
UIButton* reloadButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[reloadButton setTitle:@"刷新webview" forState:UIControlStateNormal];
[reloadButton addTarget:webView action:@selector(reload) forControlEvents:UIControlEventTouchUpInside];
[self.view insertSubview:reloadButton aboveSubview:webView];
reloadButton.frame = CGRectMake(110, 400, 100, 35);
reloadButton.titleLabel.font = font;
}
- (void)onOpenBlogArticle:(id)sender {
// 调用打开本demo的博文
[self.bridge callHandler:@"openWebviewBridgeArticle" data:nil];
}
@end
如上代码非常的冗余，我们如何做到代码简洁以及在React中改如何使用
在React的使用
使用方式基于create-react-app 和dva 项目中使用
//index.js 入口注册
setupWebViewJavascriptBridge(() => {
app.start('#root');
})
setupWebViewJavascriptBridge(callback) {
if (!!process.env.REACT_APP_hybrid) {
if (window.WebViewJavascriptBridge) {
callback();
} else {
let u = navigator.userAgent
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
if (isAndroid) {
// android
document.addEventListener('WebViewJavascriptBridgeReady',
() => {
callback();
},
false);
} else if (isIOS) {
window.document.ontouchmove = e => {
document.querySelectorAll("input").forEach((e) => {
e.blur()
})
};
// ios
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback)
}
window.WVJBCallbacks = [callback]
let WVJBIframe = document.createElement('iframe')
WVJBIframe.style.display = 'none'
WVJBIframe.src = 'https://__bridge_loaded__'
document.documentElement.appendChild(WVJBIframe)
setTimeout(() => { document.documentElement.removeChild(WVJBIframe) }, 0)
}
}
} else {
callback()
}
}
//注册原生方法
window.Hybrid = window.Hybrid || {};
function requestHybrid(url, data, callback) {
window.WebViewJavascriptBridge.callHandler(
'POST', { 'param': data, url: url }, (responseData, responseCallback) => {
let res = responseData
let data = {}
try {
data = eval('(' + res + ')')
callback(data)
} catch (error) {
Toast.fail('网络连接错误!', 1);
}
}
)
}
//发送请求
export function POSThybrid(url, data = {}) {
return new Promise((res, rej) => {
requestHybrid(url, data, (response) => {
if (response) {
if (response.code === 0) {
res(response)
} else {
//对错误的各种判断
Toast.fail(response.message, 1);
res({ code: 10000 })
}
}
})
})
}
//原生返回
export function goBack() {
window.WebViewJavascriptBridge.callHandler(
'goBack', {}, (responseData, responseCallback) => { }
)
}
//获取日期
export function getSingleDate() {
return new Promise((res, rej) => {
window.WebViewJavascriptBridge.callHandler(
'getSingleDate', {}, (responseData, responseCallback) => {
res(responseData)
}
)
})
}
//拍照
export function getPhoto() {
return new Promise((res, rej) => {
window.WebViewJavascriptBridge.callHandler(
'getPhoto', {}, (img, responseCallback) => {
if (img) {
res(img)
} else {
rej()
}
}
)
})
}
//获取日历
export function getCalendar() {
window.WebViewJavascriptBridge.callHandler(
'getCalendar', {}, (calendar, responseCallback) => {
if (calendar) {
return calendar;
}
}
)
}
//前端调用
getPhoto = () => {
hybrid.getPhoto().then(res=>console.log("原生拍完照上传后台返回前端的图片地址"+res))
}
总结
- WebViewJavaScriptBridge 用于 WKWebView & UIWebView 中 OC 和 JS 交互。
- 分别在OC环境和javascript环境都保存一个bridge对象，里面维持着requestId,callbackId,以及每个id对应的具体实现。
- OC通过javascript环境的window.WebViewJavascriptBridge对象来找到具体的方法，然后执行。
- 把 OC 的方法注册到桥梁中，让 JS 去调用。
- 把 JS 的方法注册在桥梁中，让 OC 去调用。