JS与IOS、安卓的交互

最近做的项目中涉及到了与安卓和ios的交互问题，对于一个新手来说，多多少少会有点迷糊。在调用安卓和ios的callback回调时，很轻松的就调用成功了，而且，步骤也不那么繁琐。刚开始，只知道那样使用可以调用他们封装好的方法，来执行得到想要的效果，但是其中的原理什么的没有过多了了解。但是今天，需要用到前端封装方法传递给ios和安卓，用于调用前端在js中封装的方法。还是一如既往的按照原来的方法直接抛给人家，一个函数名，及告知他们需要传递的参数。就这样，安卓端轻而易举的调用到我封装的方法，而且没有任何问题，但是在IOS上就挂了，就是调用不到。回过头来，仔细缕了一下自己代码，没有问题，最后才发现没有使用固定的方法传递给ISO。

调用安卓的方法回调

1 window.android.fun()

　　其中 fun() 为与安卓开发人员协商好的方法名。

　　安卓调用前端封装的js函数的方法： 直接将前端在js中封装的函数名以及需要传递的参数告知安卓开发就OK了！

JS调用IOS之前需要做的准备工作：

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)
}

　　与IOS端进行交互时，复制粘贴该段代码，到你的JS中，全局都调用！

JS调用IOS传递的方法：

setupWebViewJavascriptBridge(function (bridge) {
　　bridge.callHandler('ZZZZZZZZZZZZZZZZZ', {key:value}, function responseCallback(responseData) {
　　　　//。。。
　　});
});
/**
*　ZZZZZZZZZZZ 为IOS端传递过来的函数名
*　其中第一个中括号中的键值对，为传递过来的参数
*　最后的函数为回调函数，以便于请求成功之后的函数的处理
*/

JS给ISO传递自己封装的函数的方法：

setupWebViewJavascriptBridge(function (bridge) {
    bridge.registerHandler('XXXXXXX', function (data) {
    　　var obj = JSON.parse(data);
       ZZZZZZZ(obj.can1, obj.can2);
    });
});    
//　XXXXXXXX：为前端JS要传递给IOS的封装的函数的名字
//  function中的data参数为IOS端调用成功之后的回调，其中data为返回的结果。
//  若 XXXXXXX 函数中需要传递参数，则在data对象中获取，（依据IOS端传递的方式进行相应的处理，我这边是传递的JSON字符串类型，所以就对返回的结果：data做了数据转换处理）
//  ZZZZZZZZZ（）:为JS本地需要执行的函数，若需要参数的情况下，可以解析obj中获取到的参数，进行赋值调用

JS与IOS、安卓的交互

相关推荐