使用WebViewJavascriptBridge实现WebView和JavaScript交互。
项目开发过程中，可能会遇到WebView和H5交互的情况。我们可以用WebViewJavascriptBridge第三方库来实现。
主要有两个方法：
- (void)callHandler:(NSString*)handlerName data:(id)data;
这个方法是发送消息的方法，当OC或者JS需要发消息给对方时，调用这个方法，handlerName是发送消息的名字，data是需要发送的数据，对方需要先用下面这个方法来注册，才能接收消息
- (void)registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler;
这个方法可以理解为是接收消息的方法，需要先注册，handlerName是消息名，和对方发消息的方法名要一样，handler是个block，用来接收传来的消息
这次实现一个简单的功能，点击H5上面的登录按钮，跳转到原生的登录页面，用户登录后，把用户名和密码传给H5。H5里JS代码使用WebViewJavascriptBridgedemo里的JS代码
首先，我们在页面放放置一个UIWebView，并加载本地的HTML文件
NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[_webView loadHTMLString:appHtml baseURL:baseURL];
页面很简单，一个登录按钮
WebView.png
我们在JS里面写按钮点击调用的方法：
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = '立即登录'
callbackButton.onclick = function(e) {
e.preventDefault()
log('JS调用"testObjcCallback"发消息给OC')
bridge.callHandler('needLogin', {'login': '1'}, function(response) {
log('JS收到OC的回复：', response)
})
}
当按钮点击时，JS会发给OC一个名为“needLogin”的消息，数据为“{"login"："1"}”
当然，为了OC能收到消息，需要在页面加载完HTML后，注册一下
- (void)viewDidLoad {
[super viewDidLoad];
//加载HTML
NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[_webView loadHTMLString:appHtml baseURL:baseURL];
//打开调试开关
[WebViewJavascriptBridge enableLogging];
//建立WebView和H5的连接
_bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
//设置代理
[_bridge setWebViewDelegate:self];
//注册以接收数据
[_bridge registerHandler:@"needLogin" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"JS发来的消息：%@",data);
if ([data[@"login"] integerValue] == 1) {
LoginViewController *a = [[UIStoryboard storyboardWithName:@"Main" bundle:nil] instantiateViewControllerWithIdentifier:@"a"];
a.delegate = self;
[self.navigationController pushViewController:a animated:YES];
}
responseCallback([NSString stringWithFormat:@"收到JS的消息%@",data]);
}];
}
我们注册了一个名字也为“needLogin”的handle来接收JS发来的消息，并在收到消息后，返回给JS一个回复，告诉JS我们已经收到它发送的消息，在判断消息里login=1的时候，我们将会跳转到登录页面，接下来我们点击按钮,将会跳转到登录页面
login.png
在调试窗口我们可以看到JS发来的消息
log.png
我们在登录页面按钮方法里写代码，把用户填写的信息传给上个页面
- (IBAction)login:(id)sender {
if ([_delegate respondsToSelector:@selector(loginSuccess:password:)]) {
[_delegate loginSuccess:_userNameTextField.text password:_passwordTextField.text];
}
[self.navigationController popViewControllerAnimated:YES];
}
在WebView页面，接收登录页面传来的用户名和密码，并在这里把用户名和密码发给JS
- (void)loginSuccess:(NSString *)userName password:(NSString *)password{
[_bridge callHandler:@"loginSuccess" data:@{@"username":userName,@"password":password} responseCallback:^(id responseData) {
NSLog(@"%@",responseData);
}];
}
同样的，JS也需要注册一个名字为“loginSuccess”的handle来接收信息，并且我们在收到消息时，告诉OC我们已成功收到
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('JS收到OC的消息', data)
var responseData = { 'JS':'receive username and password' }
log('JS回复OC', responseData)
responseCallback(responseData)
})
我们输入用户名为66666，密码为88888并点击登录
login.png
调试已经有输出，JS已经收到我们的信息了
log.png
WebViewJavascriptBridge的JS也会在H5页面上打印各个步骤的输出：
JS.png
至此，这个简单的交互成功完成
GitHub:WebViewVsJS
网友评论