前几天老大安排与app开发人员做交互,之前没接触过,然后各种百度,各种博客看完之后,今天整理出这么一个demo,
总结:这里只有js的代码,JS的关键在于connectWebViewJavascriptBridge函数,log方法用于输出日志,是用户的自定义函数,所有的自定义函数都要写在connectWebViewJavascriptBridge当中作为成员。
bridge.init和bridge.registerHandler方法用于接收OC发来的send和callHandler,并对OC进行回调。
之后定义了两个按钮,通过上述两种方式直接调用OC,并处理OC回发的响应信息。
代码如下:
//用于创建桥接对象的函数
function connectWebViewJavascriptBridge(callback) {
//如果桥接对象已存在,则直接调用callback函数
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {//否则添加一个监听器来执行callback函数
document.addEventListener('WebViewJavascriptBridgeReady', function () {
callback(WebViewJavascriptBridge);
}, false);
}
}
//页面加载后,立刻调用创建桥接对象的函数
connectWebViewJavascriptBridge(function (bridge) {
//用户自定义的函数都要写在这里
//这里由用户自定义了一个函数,用来写日志到UI,也就是一个普通的js函数
var uniqueId = 1
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) {
log.insertBefore(el, log.children[0])
}
else {
log.appendChild(el)
}
}
//这个方法用于js接收oc发来的send,并使用responseCallback方法给OC回发消息
bridge.init(function (message, responseCallback) {
log('JS got a message', message)
var data = {'Javascript Responds': 'Wee!'}
log('JS responding with', data)
responseCallback(data)
})
//这个方法用于js接收oc的callHandler,handler用一个key标记,可以注册多个handler
bridge.registerHandler('testJavascriptHandler', function (data, responseCallback) {
log('ObjC called testJavascriptHandler with', data)
var responseData = {'Javascript Says': 'Right back atcha!'}
log('JS responding with', responseData)
responseCallback(responseData)
})
//创建发送按钮
var button = document.getElementById('buttons').appendChild(document.createElement('button'))
button.innerHTML = 'Send message to ObjC'
button.onclick = function (e) {
e.preventDefault()
var data = 'Hello from JS button'
log('JS sending message', data)
//调用桥接对象的send方法给oc发消息,第二个参数(函数)是oc对js的返回
bridge.send(data, function (responseData) {
log('JS got response', responseData)
})
}
document.body.appendChild(document.createElement('br'))
// 创建一个测试按钮
var callbackButton = document.getElementById('buttons').appendChild(document.createElement('button'))
callbackButton.innerHTML = 'Fire testObjcCallback'
callbackButton.onclick = function (e) {
e.preventDefault()
log('JS calling handler "testObjcCallback"')
//调用桥接对象的callHandler方法给oc发消息,三个参数分别是关联的key,传值信息,以及oc对js的回调
bridge.callHandler('testObjcCallback', {"foo":'bar'}, function (response) {
log('JS got response', response)
})
}
})
总结:这里只有js的代码,JS的关键在于connectWebViewJavascriptBridge函数,log方法用于输出日志,是用户的自定义函数,所有的自定义函数都要写在connectWebViewJavascriptBridge当中作为成员。
bridge.init和bridge.registerHandler方法用于接收OC发来的send和callHandler,并对OC进行回调。
之后定义了两个按钮,通过上述两种方式直接调用OC,并处理OC回发的响应信息。