前端 vue H5和安卓IOS 实现互调，传递参数，调用安卓iOS的方法

**

前端 vue H5和安卓IOS 实现互调，传递参数，调用安卓iOS的方法

因为H5和安卓，ios互调的方法不同，所以应该先判断是安卓还是IOS 把下面的方法放到公共的方法里面去。直接拷贝即可。
function checkDevice() {
// js判断是否是苹果设备
function checkIsAppleDevice() {
var u = navigator.userAgent,
app = navigator.appVersion;
var ios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
var iPad = u.indexOf(“iPad”) > -1;
var iPhone = u.indexOf(“iPhone”) > -1 || u.indexOf(“Mac”) > -1;
if (ios || iPad || iPhone) {
return true;
} else {
return false;
}
}
//js判断是否为Android设备
function checkIsAndroidDevice() {
var u = navigator.userAgent;
if (u.indexOf(“Android”) > -1 || u.indexOf(“Adr”) > -1) {
return true;
} else {
return false;
}
}

if (checkIsAppleDevice()) {
    return "ios";
} else {
    return "andriod";
}

}
export default checkDevice;

在需要调用的方法里面进行引入调用，需要在一开始的时候就调用方法
created() {
this.getAndioOfIOSInfoList()
},
this.phone = checkDevice(); //

getAndioOfIOSInfoList() { //根据 机型 安卓 iOS 进行不同方法的初始化 和调用
// js判断是否为ios设备
if (this.phone== “ios”) { //机型为IOS的时候调用 H5 与iOS建立连接的方案
this.setupWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) { //初始化
console.log(“JS got a message”, message);
var data = {
“Javascript meassage”: “准备通信!”
};
if (responseCallback) {
console.log(“JS responding with”, data);
responseCallback(data);
}
});
/**
*
* 安卓IOS 调用我的方法向我传值
/
bridge.registerHandler(“returnMsgCallBack”, function(
data,
responseCallback
) { //安卓回调我的方法名称 returnMsgCallBack data为传递过来的参数 responseCallback
console.log(“data from Java: =”, data);
let reback = JSON.parse(data);
/
根据返回的数据，
进行相应的操作
*/
if (responseCallback) {
var responseData = “Javascript Says Right back aka!”;
responseCallback(responseData);
}
});
});

  } else {   
this.connectWebViewJavascriptBridge(function(bridge) {   //和安卓通信的调用方法
  bridge.init(function(message, responseCallback) {
    console.log("JS got a message", message);
    var data = {
      "Javascript meassage": "准备通信!"
    };
    if (responseCallback) {
      console.log("JS responding with", data);
      responseCallback(data);
    }
  });
  /**
   *
   * 安卓IOS 调用我的方法向我传值
   */
  bridge.registerHandler("returnMsgCallBack", function(   
    data,
    responseCallback
  ) {
    console.log("data from Java: =", data);
    let reback = JSON.parse(data);
    /*
     根据返回的数据，
     进行相应的操作
     */
    if (reback.code == 0) {
      //支付成功
    } else {
      //支付失败
    }
    if (responseCallback) {
      var responseData = "Javascript Says Right back aka!";
      responseCallback(responseData);
    }
  });
});
  }
}，

H5和IOS通信的方法

setupWebViewJavascriptBridge(callback) {
/**
*H5和IOS通信的方法
/
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);
},
connectWebViewJavascriptBridge(callback) {
/
*H5和安卓 通过WebViewJavascriptBridge
*建立通信桥梁的方法
*/
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
“WebViewJavascriptBridgeReady”,
function() {
callback(WebViewJavascriptBridge);
},
false
);
}
},
**

H5 调用 安卓 iOS的 方法，向安卓IOS 传递参数

window.WebViewJavascriptBridge.callHandler(
“sendOrderInfoFunc”, //和安卓IOS 确定的方法名
JSON.stringify(this.dirverInfos), //要传递给安卓IOS 的参数，转成JSON字符串
function(responseData) {
console.log(“return->[” + i++ + “]” + responseData);
}
);
**

可以直接拷贝以上代码，到一个页面就可以运行。
以上只是为了做个笔记，记录一下，请各位大神多多指教