app内嵌H5网页(webviewJavaScriptBridge)

Posted Ziggs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)的主要内容,如果未能解决你的问题,请参考以下文章

使用Safari调试App内内嵌H5配置方法

app 内嵌H5 底部头部兼容

小程序内嵌H5公众号授权

微信app支付和h5支付的区别

app内嵌h5页面:前端与原生语言的配合

ios内嵌h5的video标签,不显示视频第一帧,只显示了一个播放器,当点击播放了一次之后,才显示出了第一帧