Js interacts with ios how to write multiple functions using WebViewJavascriptBridge

//jswebview
    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)
    }
    //
    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);
        });
        
        //
        
        var imgs = document.getElementsByTagName("img");
        //src
        var imgsSrc=imgs.map(function (value,index) {
            return value.src
        });
        bridge.callHandler(
            "callMobileHandler",//
            {"imgList": imgsSrc, "deviceType": "ios"},//
            function (response) {//srcimgList
                for(var i = 0;i< response.imgList.length; iPP){
                    imgs[i].src=response.imgList[i];
                }
            });
        //js
        /*bridge.registerHandler("callJSHandler", function (data, responseCallback) {
         responseCallback(responseData);
         });*/
        //
        for(var i = 0;i< imgs.length; iPP){
            imgs[i].onclick(function(){
                bridge.callHandler(
                    "callMobileHandler",//
                    {"currentImg": imgs[i].src, "deviceType": "ios"},//
                    function (response) {
                        //
                    });
                //jsios
                /*bridge.registerHandler("callJSHandler", function (data, responseCallback) {
                 responseCallback(responseData);
                 });*/
            });
        }
    });

I would like to ask if I want to write multiple callhandle functions, should I call this bridge function multiple times, or repeat it several times in one function, or some other method? At present, only the first function has been realized, and the rest of the transfer image array and picture click events have not been passed, what should I do?


encapsulate

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', () => {
    // 
    initBridge(window.WebViewJavascriptBridge)
  }, false)
}

/**
 * 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  native
// - bridge.call('setWebviewAttr', {}) webview

Menu