判断 JSbridge 在不同设备调用

判断 JSbridge 在不同设备调用

【说明】

我们在使用 jsbridge 的时候，虽然在 ios环境下 也可以使用 Android环境下 的 jsbridge 文件，但是实际在测试的时候，遇到过几次调用未成功的状态，然后同样情况下，在 ios环境中 使用 ios环境下的 jsbridge 则未遇到，所以在这里还是对不同环境下的 jsbridge 文件进行了新的处理。即，在一个统一配置的 config.js 文件中，首先对环境进行判断，然后再添加进不同环境下的 jsbridge.js 文件。
所以在这里对jsbridge 生成了 jsbridge_android.js 和 ios_jsbridge.js 两个环境文件，和 jsbridge.config.js 一个环境判断配置文件。 
后续如果进行开发的时候，在页面中引入 jsbridge.config.js 文件即可。如step三

[参考链接]：http://demo.yichaowang.bevateachers.com/js_bridge/judge_jsbridge/page/test.html

一、生成两份 JSbridge 的 android.js&ios.js 文件，然后在 jsbridge.config.js 中对不同设备进行判断调用新 jsbridge 文件。

【android 中调用jsbridge】jsbridge_android.js

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

function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        if (!isAndroid) {
            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)
        } else {
            document.addEventListener('WebViewJavascriptBridgeReady', function (event) {
                callback(WebViewJavascriptBridge)
            }, false)
        }
    }
}

/**
 * 获取用户信息 测试
 */
function getUserInfoFun() {
    addLog("测试 onload 中调用了该函数 获取用户信息数据")
    connectWebViewJavascriptBridge(function (bridge) {
        var data = {
            "method": "getUserInfo",
            "param": {}
        }
        addLog('JS调用APP：' + JSON.stringify(data))
        bridge.callHandler('bevaAppHandler', data, function (response) {
            addLog('APP回调 返回数据======：' + JSON.stringify(response))
            js_flag = true
        })
    });
}
/**
 * 控制台 数据打印至页面
 * @param {String} text "需要打印到页面的数据"
 */
function addLog(text) {
    document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend", text)
}

/**
 * 初始化jsbridge 以及注册事件
 */
function jsbridgeInitFn() {
    addLog("In Android init")
    connectWebViewJavascriptBridge(function (bridge) {
        bridge.init(function (data, responseCallback) {
            responseCallback(data)
        })
        bridge.registerHandler('bevaJSHandler', function (data, responseCallback) {
            responseCallback(data)
        })
    });
}

【ios中调用的jsbridge】jsbridge_ios.js

function connectWebViewJavascriptBridge(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)

    connectWebViewJavascriptBridge(function (bridge) {
        //注册一个方法（方法名是“bevaJSHandler”）
        bridge.registerHandler('bevaJSHandler', function (data, responseCallback) {
            addLog('注册 一个名为“bevaJSHandler”的方法，客户端进行调用')
            responseCallback(data)
        })
    })
}

/**
 *  获取用户信息 测试
 */
function getUserInfoFun() {
    addLog("测试 onload 中调用了该函数 获取用户信息数据")
    connectWebViewJavascriptBridge(function (bridge) {
        var data = {
            "method": "getUserInfo",
            "param": {}
        }
        addLog('JS调用APP：' + JSON.stringify(data))
        bridge.callHandler('bevaAppHandler', data, function (response) {
            addLog('APP回调 返回数据======：' + JSON.stringify(response))
            js_flag = true
        })
    });
}


/**
 * 控制台 数据打印至页面
 * @param {String} text "需要打印到页面的数据"
 */
function addLog(text) {
    document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend", text)
}

/**
 * 初始化jsbridge 以及注册事件
 */
function jsbridgeInitFn() {
    addLog("In iOS init")
}

二、在 jsbridge.config.js 中对调用 jsbridge 进行判断操作

生成 jsbridge.config.js 文件

/**
 * 判定当前 页面类型 设置调用 文件类型
 */
function pageInit() {
    var iphone_ios = iphoneTypeFn()
    console.log(iphone_ios + "【當前設備是 IOS】")
    var b = document.getElementsByTagName("body")[0]
    console.log(b)
    if (iphone_ios) {
        document.write("<script src='../js/jsbridge_ios.js'></script>")
    } else {
        document.write("<script src='../js/jsbridge_android.js'></script>")
    }
}
pageInit()

/**
 * 判断当前设备信息 ios || android
 */
function iphoneTypeFn() {
    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终端
    return isiOS // 判斷是否為ios
}

/**
 * JSbridge 全局变量
 * js_flag ： 查看当前设备是否已经成功加载了jsbridge代码
 */
var js_flag = false;

/**
 * 页面初始化
 */
window.onload = function(){
    jsbridgeInitFn()
}

三、在测试页面中只调用 jsbridge.config.js 文件即可

【html 示例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试jsbridge的调用，在ios和android中</title>
</head>
<body>
    <div>测试jsbridge的调用，在ios和android中</div>
    <script src="../js/jsbridge.config.js"></script>
    <script>
        getUserInfoFun()
    </script>
</body>
</html>