通过JavascriptBridge处理iOS原生界面与webV
去年写健康管理卫士的时候遇到了这个需求,在我们的模块中,有一处地方需要调起相机扫描二维码,并把结果显示在网页中相应的位置。
查了一些资料以后,发现使用WebViewJavascriptBridge可以非常方便的解决iOS原生与网页的交互问题。
最近抽空写了一个小Demo,希望可以帮到有需要的人。
下面是简单的流程:
首先用pod导入WebViewJavascriptBridge,手动导入二维码库,然后用storyboard简单搭建一个页面。为了方便操作,我从我们的网页上截了一段代码过来,弄了个本地页面放在项目中。
1.首先加载本地页面:
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"WebViewJavascriptBridge" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[_webView loadHTMLString:htmlString baseURL:nil];
2.按照WebViewJavascriptBridge中的说明,加上一下代码。
// 初始化WebViewJavascriptBridge,进行桥接
_bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
3.最关键的一步注册Handler
// registerHandler 要注册的事件名称,这个事件要和后台商定好名字一样
[self.bridge registerHandler:@"openCamera" handler:^(id data, WVJBResponseCallback responseCallback) {
//收到调起指令后要执行的方法(这里是我调起相机扫描二维码的方法)
[self showQRReader:nil];
}];
注意registerHandler名字要和后台商定好,和下面写在html代码的js中的callHandler名称一致。
function() {
//调起OC原生handler
bridge.callHandler('openCamera', function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
}
4.这个是我发送过去,让html代码来执行相应的动作。同样的要和后台商定相同的名称。其实仔细看跟上面的是一模一样的,只不过两者相反。
//因为我这里是扫二维码后,将二维码中的内容赋给网页中的文本框。所以我将这个方法写在扫码后的回调中。
//callHandler 商定的事件名称,用来调用网页里面相应的事件实现,data id类型,传回去的参数。
[self.bridge callHandler:@"paste_text" data:result];
下面是js的代码:
bridge.registerHandler('paste_text', function(data, responseCallback) {
//给输入框赋值
document.getElementById('promotion_code').value = data;
})
5.按照官方说明,在html的js中加入以下代码:
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
//点击按钮后执行方法
document.getElementById('btn_camera').onclick = function() {
//调起OC原生handler
bridge.callHandler('openCamera', function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
}
//收到callback
bridge.registerHandler('paste_text', function(data, responseCallback) {
//给输入框赋值
document.getElementById('promotion_code').value = data;
})
})
下面就大功告成了,现在可以点击页面中的扫码,开始扫码,然后将二维码中的内容赋给网页中的文本框了。
效果如下:
Demo地址:/(ㄒoㄒ)/~~ Demo要用真机调试,不要用模拟器。
https://github.com/SouthCity/iOSBlogDemo
WebViewJavascriptBridge地址:
https://github.com/marcuswestin/WebViewJavascriptBridge
所用二维码库QRCScanner 地址:
https://github.com/zhangfeidev/QRCScanner
努力进阶中/(ㄒoㄒ)/~~,写的不对的欢迎指出。