UIwebView 和 H5交互详情

背景:

最近公司准备上一个只有原生登录界面 + 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