前端使用jsbridge.js 对接安卓和ios开发传递、接收各自的事件方法和参数

99 阅读1分钟

步骤1. cdn地址引入jsbridge,可复制保存到本地相对地址引入

<script type="text/javascript" charset="utf-8" src="https://qzonestyle.gtimg.cn/qzone/phone/m/v4/widget/mobile/jsbridge.js"></script>

步骤2. mounted生命周期复制去初始化jsbridge

image.png

    mounted() {
            if (/iphone/i.test(navigator.userAgent)) {
                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)
                }
                setupWebViewJavascriptBridge(function (bridge) {
                    bridge.registerHandler('userInfoCallback',function(data, responseCallback){
                
                        responseCallback({})
                    })
                    bridge.registerHandler('getLoginStatus',function(data, responseCallback){
                        document.getElementById('test').innerHTML +=  '99'
    
                        responseCallback({})
                    })
                })
            }else{
                function connectWebViewJavascriptBridge(callback) {
                    if (window.WebViewJavascriptBridge) {
                        callback(WebViewJavascriptBridge)
                    } else {
                        document.addEventListener(
                            'WebViewJavascriptBridgeReady'
                            , function () {
                                callback(WebViewJavascriptBridge)
                            },
                            false
                        );
                    }
                }
                connectWebViewJavascriptBridge(function (bridge) {
                    //注册一个登录成功方法(方法名是“successLogin”),客户端进行调用(方法名也是“successLogin”),responseCallback是回调函数
                    bridge.registerHandler('getLoginStatus', function (data, responseCallback) {
                        document.getElementById('test').innerHTML += data+responseCallback + '111'
            
                    })
                })

            }
       

        },

步骤3:前端h5 传递方法给安卓和ios,回调函数接收返回的参数

  clickbox_bd() {
                //  document.getElementById('test').innerHTML+='usera:'+navigator.userAgent
                //  document.getElementById('test').innerHTML+=this.memberId+'this.memberId安卓有吗'
                var appLink = '?type=app&target='
                if (this.isAndroid) {
                    setTimeout(() => {
                        window.WebViewJavascriptBridge.init()
                        window.WebViewJavascriptBridge.callHandler('getLoginStatus',{},function(responseData) {
                                  document.getElementById('test').innerHTML+=responseData
                                    if (JSON.parse(responseData).userId=='0'||JSON.parse(responseData).userId == '') {
                                        appLink = 'yiqibaziapp://' + '?type=app&target=' + 'MemberLogin'
                                        var ver = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)
                                        if (ver && parseInt(ver[1]) >= 9) return window.location.href = appLink
                                        var iframe = document.createElement('iframe')
                                        iframe.src = appLink
                                        iframe.style.display = 'none'
                                        document.body.appendChild(iframe)
                                        setTimeout(function () {
                                            document.body.removeChild(iframe)
                                        }, 2000)

                                    }

                            }
                        );
                    }, 200)
                } else {
                    window.WebViewJavascriptBridge.callHandler('getUserInfo',{},function(responseData){
                        if(JSON.parse(responseData).userId==0||JSON.parse(responseData).userId==''){
                            appLink = 'yiqiApp://' + '?type=app&target=' + 'MemberLogin'
                            var ver = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)
                            if (ver && parseInt(ver[1]) >= 9) return window.location.href = appLink
                            var iframe = document.createElement('iframe')
                            iframe.src = appLink
                            iframe.style.display = 'none'
                            document.body.appendChild(iframe)
                            setTimeout(function () {
                                document.body.removeChild(iframe)
                            }, 2000)
                        }
                        // document.getElementById('test').innerHTML+='222'+responseData.userId
                    })
                }
             
            },