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;    }

• 返回的是设备屏幕大小，终端类型，以及所处环境(微信，微博，qq)