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）
app內嵌H5網頁（webviewJavaScriptBridge）