H5和原生APP做交互

WebViewJavascriptBridge是H5与app交互的一个第三方插件

1、在当前h5页面引入以下代码

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 = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

2、js调用原生APP

setupWebViewJavascriptBridge(function(bridge) {         
         //js调用oc的方法  clickHeadImage(方法名与APP端保持一致)  大括号内是传递参数的方式

          //xxxxx是与APP相约定的方法名，“”是参数，有则填，没有可以不写
           window.WebViewJavascriptBridge.callHandler('xxxxx'," ", function(response) {
                 //response是APP返回的结果，可以在此方法里面走自己的逻辑
           });

3、原生APP调用js

setupWebViewJavascriptBridge(function(bridge) {            
         //注册一个方法，oc调用js的方法  clickHeadImage(方法名与APP端保持一致)  大括号内是传递参数的方式
           bridge.registerHandler('music',function(data,responseCallback){
               //data是APP传过来的参数，responseCallback是回调函数
           })
    });

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！