月丶
H5与原生APP交互,WebViewJavascriptBridge
2020-2-26 月丶


此记录为H5端:



新建bridge.js文件








var u = navigator.userAgent;


var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1//android终端


var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端


// 注册jsbridge


function connectWebViewJavascriptBridge(callback) {


    if (isAndroid) {


        if (window.WebViewJavascriptBridge) {


            callback(WebViewJavascriptBridge)


        } else {


            document.addEventListener(


                'WebViewJavascriptBridgeReady',


                function () {


                    callback(WebViewJavascriptBridge)


                },


                false


            );


        }


        return;


    }


    if (isiOS) {


        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)


    }


}


// 调用注册方法


connectWebViewJavascriptBridge(function (bridge) {


    if (isAndroid) {


        bridge.init(function (messageresponseCallback) {


            responseCallback(data);


        });


    }




});


然后引入工程,我使用的是VUE,则在main.js引入bridge.js文件






在需要使用的地方:








window.WebViewJavascriptBridge.callHandler('payByAli',{orderInfo:data},function(res) {


            window.console.log(res)


        }); 



payByAli 为APP端定义的方法名,中间为参数,后面函数返回结果







APP调用js方法:





window.WebViewJavascriptBridge.registerHandler('testFunction',function(data,responseCallback){


            // data 是 APP 传递过来的数据.


            // responseCallback 是 JS 调用完毕之后传递给 APP 的数据


            alert("JS 被 app 调用了.");


            responseCallback({data: "js 的数据",from : "JS"});


        })


发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容