app内嵌H5网页（webviewJavaScriptBridge）

摘要：使用的插件为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）