H5开发中常用的js方法

摘要: 本文主要封装了h5和app开发中常用的js方法，如webview的交互，网络请求的封装等。

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)