H5与App WebView交互-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

h5和app之间的webview交互

这是常用的交互方法之一，iOS可以使用WKWebView,安卓可以使用JsBridge,完成常见的交互效果。

function webViewHandler(iosCallback, adrCallback) {
    if (getMobileOperatingSystem() === 'iOS') {
        setupWebViewJavascriptBridge(iosCallback);
    } else if (getMobileOperatingSystem() === 'Android') {
        connectWebViewJavascriptBridge(adrCallback);
    }

    /*获取移动终端的操作系统,mobile*/
    function getMobileOperatingSystem() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        if (/windows phone/i.test(userAgent)) {
            return "Windows Phone";
        }
        if (/android/i.test(userAgent)) {
            return "Android";
        }
        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return "iOS";
        }
        return "unknown";
    }

    /*设置页面js桥,mobile*/
    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 = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function () {
            document.documentElement.removeChild(WVJBIframe)
        }, 0)
    }

    /*连接页面js桥,mobile*/
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function () {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    }
};

调用方式如下：

webViewHandler(function (bridge) {
    //JsCallAppFuncName是js调用客户端iOS的方法名，params则是h5传给客户端app的参数,appCallbackHander是调用成功后js收到的回调。
    bridge.callHandler('JsCallAppFuncName', {"params": true},callbackAppHander);
    // AppCallJsFuncName是js注册的方法，供客户端iOS调用，callbackJsFunc是调用后js执行的回调
    bridge.registerHandler('AppCallJsFuncName', callbackJsFunc);
}, function (bridge) {
    // 初始化
    bridge.init(function (message, responseCallback) {
        responseCallback({'Javascript Responds': 'Wee!'});
    });
    // 方法参数和ios是一样的，只是Android必须要有初始化过程
    window.WebViewJavascriptBridge.callHandler('JsCallAppFuncName', {'params': true}, function (responseData) {console.log(responseData)});
    bridge.registerHandler('AppCallJsFuncName', callbackJsFunc);
})

获取设备的基本信息和环境

function getMobileInfo() {
        var info = {
            screen: {},
            device: {
                deviceType: 0,
                deviceVal: ''
            },
            env: {
                type: 0,
                value: ''
            }
        };
        // 屏幕大小
        info.screen.width = window.screen.height;
        info.screen.height = window.screen.width;
        // 设备终端
        var sUserAgent = navigator.userAgent.toLowerCase(),
            bIsiOs = (/iPad|iPhone|iPod/.test(sUserAgent) && !window.MSStream),
            bIsAndroid = sUserAgent.match(/android/i) == "android",
            bIsMidp = sUserAgent.match(/midp/i) == "midp",
            bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
            bIsUc = sUserAgent.match(/ucweb/i) == "ucweb",
            bIsCE = sUserAgent.match(/windows ce/i) == "windows ce",
            bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile",

            isWeixin = sUserAgent.match(/MicroMessenger/i) == "micromessenger",
            isWeiBo = sUserAgent.match(/WeiBo/i) == "weibo",
            isQQ = sUserAgent.match(/QQ/i) == "qq";
        if (bIsiOs) {
            info.device.deviceType = 1;info.device.deviceVal = 'iOS';
        } else if (bIsAndroid) {
            info.device.deviceType = 2;info.device.deviceVal = 'Android';
        }else if (bIsWM) {
            info.device.deviceType = 3;info.device.deviceVal = 'Windows mobile';
        } else {
            info.device.deviceType = 0;info.device.deviceVal = 'pc';
        }
        // 第三方环境
        if (isWeixin) {
            info.env.type = 1;info.env.value = 'weixin';
        } else if (isWeiBo) {
            info.env.type = 2;info.env.value = 'weibo';
        } else if (isQQ) {
            info.env.type = 3;info.env.value = 'qq';
        } else {
            info.env.type = 0;info.env.value = '其他';
        }
        return info;
    }