摘要:使用的插件为 webviewJavaScriptBridge,app 端需要引入一下这个包,html 页面只需一段 JS 代码
与 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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {document.documentElement.removeChild(WVJBIframe) }, 0)
}
<!-- 处理交互 方法名要和ios内定义的对应-->
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler("showAlert", function(data) { //ios 调用 js 方法
alert(data+",54646")
});
bridge.callHandler('objcEchoToJs', {foo:'bar', function(response) { //js 调用 ios 方法
alert('收到回调:'+response)
})
})
与 android 交互
<! 申明交互(此处代码固定) >
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
},false);
}
}
<!-- 处理交互 方法名要和android内定义的对应-->
connectWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler("functionInJs", function(data, responseCallback) { //android 调用 js 方法
alert(data);
});
bridge.callHandler('objcEchoToJs', {'param': data} , function(responseData) { //js 调用 android 方法
alert(responseData);
});
})
总结:交互声明代码固定,交互接口与 IOS/android 对应好即可(附:前端的 registerHandler 方法接口对应他们的 callHandler,callHandler 方法接口对应他们的 registerHandler)
来源: http://www.bubuko.com/infodetail-2472417.html