背景:
最近公司准备上一个只有原生登录界面 + H5网页 ，并且支持ios7.0 以上系统的混合app;这可把我难住了，原生的UI界面我可以正写反写各种style把界面搭建起来。而要这个app的难点在于交互，与前端h5 的交互。
经同事推荐，使用webViewJavascripeBridge 这个交互三方神器；
准备工作，把webViewJavascripeBridge 导入到xcode工程中，或用cocoapod管理
废话不多说，上代码
一、 首先是ios端的代码:
- (void)viewDidLoad {
[super viewDidLoad];
UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
(1)h5向客户端通讯,让客户端能响应到网页的点击事件
[_bridge registerHandler:@"logOut" handler:^(id data, WVJBResponseCallback responseCallback) {
//登出操作
[self logOutBtnClick];
}];
(2)客户端向h5通讯，把账号和密码传输过去，让网页调用登录接口
id data = @{@"phone":账号,@"password":MD5密码};
[_bridge callHandler:@"login" data:data responseCallback:^(id response) {
}];
(3)加载html网址
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:目标html]]];
}
明天继续贴h5端代码
最近几天公司事情比较多，现在更新补上！
二、 首先H5端的代码:
在对应的html body中贴上如下代码
<script>
window.onerror = function(err) {
log('window.onerror: ' + err)
}
//A.(以下用这个代表对应的代码)
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)
}
//B
setupWebViewJavascriptBridge(function(bridge) {
//C
app.bridge = bridge;
//D
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
var responseData = { 'Javascript Says':'Right back atcha!' }
//E
var jsData = JSON.stringify(data)
var phoneStr = ''
var passwordStr = ''
var stringArr = jsData.split('"')
for(var i in stringArr){
if (i == 3){
phoneStr = stringArr[i]
localStorage.setItem('userphone',phoneStr)
}
if (i == 7){
passwordStr = stringArr[i]
localStorage.setItem('password',passwordStr)
}
}
})
</script>
分析：A为固定代码，直接copy
B为客户端往前端通讯时前端要做的内容函数
C在前端的 custom.js 中添加一个空的 bridge 来保存 （为了前端能向客户端通讯，配合在对应的按钮事件中 加上F代码，就可以实现前端向客户端的通讯）
D为bridge 的handle
E是把得到的数据进行解析并保存在localStorage 中 （其他地方就可以拿到这个数据，进行一系列的操作）
F:（代码中的数据（{'foo': 'bar'}）可以跟客户端来约定，传什么数据对应什么事件;函数名字也要约定一致）
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) {
//此处写前端其他行为
})
个人主要精通于ios，对前端研究不深，以上前端和客户端代码都由我一个人编写(部分代码参考marcuswestin)，so,如果大家有发现什么问题或者有什么建议，欢迎批评指教！
邮箱:developer_yh@163.com
GitHub:https://github.com/developeryh