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）

转载于:https://www.cnblogs.com/YmmY/p/8337051.html