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)