app内嵌H5网页(webviewJavaScriptBridge)

x33g5p2x  于2022-02-20 转载在 JavaScript  
字(1.5k)|赞(0)|评价(0)|浏览(212)

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

相关文章