JS与IOS、安卓的交互

2018-09-29 03:53:43来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

  • 调用安卓的方法回调
1 window.android.ZZZXK()

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

  安卓调用前端封装的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中获取到的参数,进行赋值调用

 

  ****** 这些均为实际工作中遇到的问题,若有不足之处,可以评论指正!******

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:没有插件的sublime编辑器是没有灵魂的

下一篇:JavaScript字符串API