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