WebViewJavascriptBridge

最新推荐文章于 2020-08-10 16:41:58 发布

weixin_30502965

最新推荐文章于 2020-08-10 16:41:58 发布

阅读量89

点赞数

文章标签：移动开发 json 操作系统

原文链接：http://www.cnblogs.com/xjy20170907/p/11023783.html

版权

在草料上根据页面网址生成二维码：http://192.168.36.95:8080/xx.html?type=1&id=1

用微信或者其他app扫它，判断ua然后用可以用WebViewJavascriptBridge和原生交互跳转

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />
    <script src="bridge.js"></script>
</head>
<body></body>
<script>
    let paramsObj = getParamsObj(window.location.search),
        platForm = bridge.getOSType();

    if(paramsObj.type == 1){
        let param = platForm === 'IOS' ? {
            "url":'xxx'
        } : {
            "url": 'xxx'
        };

        if(platForm === 'WEIXIN' ){
           window.location.href = "http://192.168.36.95:8081/"; 
        } else {
             bridge.callHandler('xxx', param, (data) => {
                 console.log('error');
             });
        }
    }
</script>
</html>

引入的js文件

function getOSType() {
    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终端
    var isWeixin = u.indexOf('MicroMessenger') !== -1; //微信终端

    if (isWeixin) {
        return 'WEIXIN';
    } else if (isiOS) {
        return 'IOS';
    } else if(isAndroid) {
        return 'ANDROID';
    }
}

/**
 * android系统js桥接口设置
 * @param {Object} callback 桥接口回调函数 桥接方式固定写法
 */
function setUpAndroidBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady',
            function () {
                return callback(WebViewJavascriptBridge);
            },
            false
        );
    }
}

/**
 * IOS系统js桥接口设置
 * @param {Object} callback 桥接口回调函数 桥接方式固定写法
 */
function setUpIOSBridge(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)
}

//确保 init 只有一次
function initAndroidBrider(bridge){
    bridge.init(function(message, responseCallback) {});
    initAndroidBrider = function(){}
}

function getParamsObj(search){
    let paramsArray = search.substr(1).split('&'), 
        i,
        paramsObj = {};

    paramsArray.forEach((item) => {
        i = item.indexOf('=');
        paramsObj[item.slice(0, i)] = item.slice(i+1);
    });

    return paramsObj;
}


let bridge = {
    getOSType: getOSType,
    getParamsObj: getParamsObj,
    callHandler(name, data, resultCallback) {
        var osType = getOSType();//获取系统类型
        //按系统类型 分别执行原生交互
        if (osType == 'IOS') {
            //苹果手机交互方式 消息体为字面量对象(json格式)： action 代表执行的动作 data 代表传递的数据
            setUpIOSBridge(function (bridge) {
                bridge.callHandler(name, data, function (response) {
                    if (typeof resultCallback == 'function') {
                        resultCallback(response);
                    }
                });
            });
        } else if (osType == 'ANDROID') {
            //安卓手机交互方式
            setUpAndroidBridge(function (bridge) {
                bridge.callHandler(name, data, function (response) {
                    if (typeof resultCallback == 'function') {
                        resultCallback(response);
                    }
                });
            });
        } else {
            //其他类型
        }
    },

    registerHandler(name, callback) {
        var osType = getOSType();//获取系统类型
        if (osType == 'IOS') {
            //苹果手机交互方式 消息体为字面量对象(json格式)： action 代表执行的动作 data 代表传递的数据
            setUpIOSBridge(function (bridge) {
                bridge.registerHandler(name, function (data, responseCallback) {
                    callback(data, responseCallback)
                })
            });
        } else if (osType == 'ANDROID') {
            //安卓手机交互方式
            setUpAndroidBridge(function (bridge) {
                initAndroidBrider(bridge)

                bridge.registerHandler(name, function (data, responseCallback) {
                    console.log('收到数据: '+data)
                    if(data){
                        data = JSON.parse(data)
                    }
                    callback(data, responseCallback);
                });
            });
        } else {
            //其他类型
        }
    }

}

转载于:https://www.cnblogs.com/xjy20170907/p/11023783.html

weixin_30502965

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebViewJavascriptBridge

在草料上根据页面网址生成二维码：http://192.168.36.95:8080/xx.html?type=1&id=1用微信或者其他app扫它，判断ua然后用可以用WebViewJavascriptBridge和原生交互跳转页面代码<!DOCTYPE html><html lang="en"><head> <m...
复制链接

扫一扫