此记录为H5端:
新建bridge.js文件
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// 注册jsbridge
function connectWebViewJavascriptBridge(callback) {
if (isAndroid) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function () {
callback(WebViewJavascriptBridge)
},
false
);
}
return;
}
if (isiOS) {
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(function (bridge) {
if (isAndroid) {
bridge.init(function (message, responseCallback) {
responseCallback(data);
});
}
});
然后引入工程,我使用的是VUE,则在main.js引入bridge.js文件
在需要使用的地方:
window.WebViewJavascriptBridge.callHandler('payByAli',{orderInfo:data},function(res) {
window.console.log(res)
});
payByAli 为APP端定义的方法名,中间为参数,后面函数返回结果
APP调用js方法:
window.WebViewJavascriptBridge.registerHandler('testFunction',function(data,responseCallback){
// data 是 APP 传递过来的数据.
// responseCallback 是 JS 调用完毕之后传递给 APP 的数据
alert("JS 被 app 调用了.");
responseCallback({data: "js 的数据",from : "JS"});
})