目前在做一个移动端app的项目，在开发的过程中遇到一个问题：就是如果用户登录app应用时网络不太好，就会卡在登录页面上没有反应了。这样带来的用户体验非常不好，所以我们决定寻找一个方法解决这类问题。
第一种方式
首先我开始查找js是否有类似的判断方法，后来在MDN文档上找到了相应的方法，可以完美解决我的问题，那就是NavigatorOnLine.onLine
navigator.onLine，是一个属性，返回浏览器的联网状态。主要用于查看你是否连接上了互联网。正常联网(在线)返回true,不正常联网(离线)返回false。
也就是说，我在进入登录页进行登录请求的时候，它会做一个判断，如果当前环境没有网络，就给出提示，并退出当前页面。
if (navigator.onLine) {
alert("有网络")
} else {
alert("无网络");
}
最好的一点就是它具备实时监听的功能，也就是说如果你网络连接发生变化，他也会执行不同的方法。
window.addEventListener("online", function(){
console.log("网络已连接");
});
window.addEventListener("offline", function(){
console.log("网络已断开");
});
当你切换网络时，它会执行这个方法，只要在连接网络的online方法中做跳转就可以了。
当我正在庆幸解决问题的同时，测试发来邮件，表示在安卓4.4.2版本并没有解决网络连接的问题。
于是我进一步查阅资料。
Page_img.png
这个方法支持的浏览器格式比较少，平时开发移动端难免会遇到比较旧的安卓版本。所以这个方法之能应用与少数浏览器，在这个项目中还是行不通的。
第二种方式
由于onLine方法不支持部分安卓浏览器，我又找到了比较兼容移动端的mui框架。在mui中也有类似的解决网络连接的方法。
if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
alert("网络异常");
}else{
alert("可以连接"):
}
以及实时的网络监听，如果在断网状态，网络恢复正常就会自动执行方法：
document.addEventListener("netchange",onNetChange,false);
function onNetChange(){
//获取当前网络类型
var nt = plus.networkinfo.getCurrentType();
switch(nt){
case plus.networkinfo.CONNECTION_ETHERNET:
case plus.networkinfo.CONNECTION_WIFI:
mui.toast("网络已连接");
break;
default:
mui.toast("网络已断开");
break;
}
}
这样就可以解决移动端网络连接的问题了。感觉mui对移动端还是很好用的。
