zoukankan      html  css  js  c++  java
  • 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中获取到的参数,进行赋值调用
  • 相关阅读:
    JavaScript 为字符串添加样式 【每日一段代码80】
    JavaScript replace()方法 【每日一段代码83】
    JavaScript for in 遍历数组 【每日一段代码89】
    JavaScript 创建用于对象的模板【每日一段代码78】
    html5 css3 新元素简单页面布局
    JavaScript Array() 数组 【每日一段代码88】
    JavaScript toUTCString() 方法 【每日一段代码86】
    位运算
    POJ 3259 Wormholes
    POJ 3169 Layout
  • 原文地址:https://www.cnblogs.com/zxk5211/p/web_10.html
Copyright © 2011-2022 走看看