原生JavaScript与iOS、android app之间数据交互

Web前端开发与iOS前端开发之间的数据交互，需要借助JavaScript封装的特定的方法来实现两者之间的逻辑业务交互；

封装函数 setupWebViewJavascriptBridge

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

JavaScript与iOS app之间数据交互时，需要借助封装好的 setupWebViewJavascriptBridge方法来实现两端开发之间的逻辑数据交互问题。

H5触发js点击事件，唤起iOS app中的事件函数

setupWebViewJavascriptBridge(function (bridge) {
    bridge.callHandler(
            'iOS事件名', 
            {'参数param'}, 
            function responseCallback(responseData) {}
      );
});

iOS事件名：为iOS开发同事提供的唤起app中响应事件的事件名；
参数param：传递给iOS app的参数为key-value 键值对类型

iOS app中触发事件，唤起前端JavaScript封装的方法

setupWebViewJavascriptBridge(function(bridge) {
    bridge.registerHandler('jsFn', function(json) {
    var param = JSON.parse(json); // 数据类型转换
          jsFn(param);
    });
});

jsFn：为JavaScript封装的函数方法名；
注：与iOS app交互返回的数据为JSON字符串；需要iOS app传值的时候，则需要先使用JSON.parse（response）转换为JSON对象之后再传值给js封装的事件函数。

JavaScript和Android app之间的数据交互

// params为传递给Android app的参数值
window.android.AndroidEventName(params); 

AndroidEventName：为Android app开发提供的事件方法名；
如果在vue中实现Android app调用JavaScript封装的函数方法，则需要将JavaScript封装的函数名作用域指定到全局作用域，即window下。
注：Android调用JavaScript方法时，与js调用自身封装的方法一致。