js与oc做交互的一个demo

前几天老大安排与app开发人员做交互，之前没接触过，然后各种百度，各种博客看完之后，今天整理出这么一个demo，

代码如下：

//用于创建桥接对象的函数
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回发的响应信息。

转载于:https://www.cnblogs.com/tony-xf/p/7359443.html