原生与js的交互--jsbridge

建立一个jsbridge.js

const utils = {
    setupWebViewJavascriptBridge: (callback) => {
        var sysPlatform;
        var ua = navigator.userAgent.toLowerCase();//判断浏览器类型
        if (/iphone|ipad|ipod/.test(ua)) {//调用设备对象的test方法判断设备类型
            sysPlatform = "IOS";
        } else if (/android/.test(ua)) {
            sysPlatform = "ANDROID";
        }

        if(sysPlatform == "IOS"){
            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)
        }else if(sysPlatform == "ANDROID"){
            if (window.WebViewJavascriptBridge) {
                console.group("window.WebViewJavascriptBridge had init")
                callback(WebViewJavascriptBridge);
            } else {
                console.group("window.WebViewJavascriptBridge init");
                document.addEventListener(
                    'WebViewJavascriptBridgeReady', function() {
                        WebViewJavascriptBridge.init(function(message, responseCallback) {
                            // console.log('JS got a message', message);
                            var data = {
                                'Javascript Responds': 'Wee!'
                            };
                            // console.log('JS responding with', data);
                            responseCallback(data);
                        });
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
    },
    WebViewJavascriptBridge: function(fuc,json) {  

        return new Promise(function (resolve, reject) {
            utils.setupWebViewJavascriptBridge(function (bridge) {
                var sysPlatform;
                var ua = navigator.userAgent.toLowerCase();//判断浏览器类型
                if (/iphone|ipad|ipod/.test(ua)) {//调用设备对象的test方法判断设备类型
                    sysPlatform = "IOS";
                } else if (/android/.test(ua)) {
                    sysPlatform = "ANDROID";
                }
                if(sysPlatform == "IOS"){
                    bridge.registerHandler('h5UserInfo', function (data, responseCallback) { 
                        var responseData = { 'Javascript Says': 'Right back atcha!' }
                        responseCallback(responseData);
                        resolve(data)
                    })
                    bridge.registerHandler('h5func', function (data, responseCallback) { 
                        var responseData = { 'Javascript Says': 'Right back atcha!' }
                        // utils.getPopup(responseData);
                        responseCallback(responseData);
                        resolve(data)
                    })
                    bridge.callHandler(fuc, json, function (response) {   //h5调用原生 能够获取原生的值
                        resolve(response);
                    })
                }else if(sysPlatform == "ANDROID"){
                    
                    bridge.registerHandler('h5UserInfo', function (data, responseCallback) {
                        var responseData = { 'Javascript Says': 'Right back atcha!' }
                        // utils.getPopup(responseData);
                        responseCallback(responseData);
                        resolve(data)
                    })
                
                    bridge.registerHandler('h5func', function (data, responseCallback) {
                        var responseData = { 'Javascript Says': 'Right back atcha!' }
                        // utils.getPopup(responseData);
                        responseCallback(responseData);
                        resolve(data)
                    })
        
                    bridge.callHandler(fuc, json, function (response) {
                        resolve(JSON.parse(response))
                    })
                }
            })
        });
    }
} 

export default utils;

用的时候只要 import 进来

这样使用

utils.WebViewJavascriptBridge("AppLogin",{}).then((data) => {


});

 

因为以前有版本没有用jsbridge 我们可以用 try catch去捕获错误。