js與ios交互使用WebViewJavascriptBridge如何寫多個函數(shù)

//js與webview交互初始化
    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 = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function () {
            document.documentElement.removeChild(WVJBIframe)
        }, 0)
    }
    //關(guān)注按鈕點擊交互
    setupWebViewJavascriptBridge(function (bridge) {
        function followChange(data) {
            if (data == 1) {
                $(".btnFollow").removeClass("btnFollow-yes").addClass("btnFollow-no");
            } else {
                $(".btnFollow").removeClass("btnFollow-no").addClass("btnFollow-yes");
            }
        }
        $(".btnFollow").click(function () {
            var followStaus=1;
            if ($(this).is('.btnFollow-no')) {
                followStaus=1;
            } else {
                followStaus=2;
            }
            bridge.callHandler(
                'callMobileHandler',
                {"followStaus": followStaus, "deviceType": "ios"},
                function (response) {
                    if(response.followStaus==1){
                        $(this).removeClass("btnFollow-yes").addClass("btnFollow-no");
                    }else{
                        $(this).removeClass("btnFollow-no").addClass("btnFollow-yes");
                    }
            });
        });
        bridge.registerHandler('callJSHandler', function (data, responseCallback) {
            followChange(data.followStaus);
//            responseCallback(responseData);
        });
        
        //以上代碼實現(xiàn)的功能可以正常運行，以下代碼實現(xiàn)的功能沒有生效
        
        var imgs = document.getElementsByTagName("img");
        //傳遞圖片src數(shù)組
        var imgsSrc=imgs.map(function (value,index) {
            return value.src
        });
        bridge.callHandler(
            'callMobileHandler',//名稱待換
            {"imgList": imgsSrc, "deviceType": "ios"},//參數(shù)待換
            function (response) {//假設(shè)返回的src數(shù)組為imgList
                for(var i = 0;i< response.imgList.length; i++){
                    imgs[i].src=response.imgList[i];
                }
            });
        //js注冊函數(shù)，沒用可刪除
        /*bridge.registerHandler('callJSHandler', function (data, responseCallback) {
         responseCallback(responseData);
         });*/
        //圖片點擊事件
        for(var i = 0;i< imgs.length; i++){
            imgs[i].onclick(function(){
                bridge.callHandler(
                    'callMobileHandler',//名稱待換
                    {"currentImg": imgs[i].src, "deviceType": "ios"},//參數(shù)待換
                    function (response) {
                        //內(nèi)容待寫
                    });
                //js獲得ios端參數(shù)函數(shù)，沒用可刪除
                /*bridge.registerHandler('callJSHandler', function (data, responseCallback) {
                 responseCallback(responseData);
                 });*/
            });
        }
    });

我想問一下我想寫多個callhandle函數(shù)，是應(yīng)該調(diào)用多次這個橋接函數(shù)呢，還是在一個函數(shù)里重復(fù)寫幾遍呢，或者是其他方法？目前只有第一個功能實現(xiàn)了，剩下的傳遞圖片數(shù)組和圖片點擊事件都沒有傳遞過去，該怎么辦？

回答

編輯回答

孤毒

封裝一下

import ua from './ua'

const callHandlers = []
const registerHandlers = []
const JCBridge = {
  call(...args) {
    callHandlers.push(args)
  },
  register(...args) {
    registerHandlers.push(args)
  },
}
const jsBridge = window.WebViewJavascriptBridge

/**
 * 獲取ios 的bridge object
 * https://github.com/marcuswestin/WebViewJavascriptBridge
 * @param  {Function} initBridge [description]
 * @return {[type]}            [description]
 */
function initIosBridge(initBridge) {
  if (jsBridge) {
    return initBridge(jsBridge)
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(initBridge)
  }
  window.WVJBCallbacks = [initBridge]
  let doc = document
  let iframe = doc.createElement('iframe')
  iframe.style.display = 'none'
  iframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
  doc.body.appendChild(iframe)
  setTimeout(() => {
    doc.body.removeChild(iframe)
  })
}

/**
 * 獲取android 的bridge object
 * https://github.com/lzyzsd/JsBridge
 * @param  {Function} initBridge [description]
 * @return {[type]}            [description]
 */
function initAdrBridge(initBridge) {
  if (jsBridge) {
    return initBridge(jsBridge)
  }
  document.addEventListener('WebViewJavascriptBridgeReady', () => {
    // 后端派發(fā)時間之前會設(shè)置這個值
    initBridge(window.WebViewJavascriptBridge)
  }, false)
}

/**
 * 根據(jù)環(huán)境暴露bridge object
 * @param  {[type]} bridge [description]
 * @return {[type]}           [description]
 */
function initBridge(bridge) {
  bridge.init && bridge.init()
  if (bridge) {
    JCBridge.call = bridge.callHandler
    JCBridge.register = bridge.registerHandler

    if (callHandlers.length) {
      callHandlers.forEach(call => {
        JCBridge.call(...call)
      })
    }
    if (registerHandlers.length) {
      registerHandlers.forEach(register => {
        JCBridge.register(...register)
      })
    }
  }
}

if (ua.ios) {
  initIosBridge(initBridge)
} else if (ua.android) {
  initAdrBridge(initBridge)
}

export default JCBridge

// bridge.call  調(diào)用native提供的方法
// - bridge.call('setWebviewAttr', {}) 設(shè)置webview

2017年12月18日 22:27