h5与原生app互调的前端做法（其中的一种）

菜鸟一枚，如有错误，欢迎指正。

判断是安卓手机还是苹果手机
var ua = navigator.userAgent;

 var isAndroid = /Android/.test(ua);

安卓调取h5，只需要将函数暴露在window对象上即可，req可以是原生传递的参数。

window.haha = function (req){}

h5调取安卓，这里的函数名haha跟showStoreAddress是与安卓商量好的

var obj = {

          "name": this.mername,

          "address": this.meradress,

          "lat": this.latitude,

          "long": this.longitude

        }

        window.android.showStoreAddress(JSON.stringify(obj));

h5跟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调h5，这里的setName是与ios商量好的，data是ios传递过来的参数，这里的callBack有需要可以使用，是被ios调取后返回给他的callback

var that = this;

    setupWebViewJavascriptBridge(function(bridge) {

      bridge.registerHandler("setName", function(data，callBack) {

        callBack({ title: 34234 });

        var obj = JSON.stringify(data);

        that.name = data;

      });

    });

h5调ios，这里的getName是与ios商量好的，title是传递给ios的参数，responseCallback有需要可以使用，是调取完ios后返回的callback

setupWebViewJavascriptBridge(function(bridge) {

      bridge.callHandler(

        "getName",

        { titile: 1111 },

        function responseCallback(responseData) {

          that.name = JSON.stringify(responseData);

        }

      );

    });