目前在做一个移动端app的项目，在开发的过程中遇到一个问题：就是如果用户登录app应用时网络不太好，就会卡在登录页面上没有反应了。这样带来的用户体验非常不好，所以我们决定寻找一个方法解决这类问题。

第一种方式

首先我开始查找js是否有类似的判断方法，后来在MDN文档上找到了相应的方法，可以完美解决我的问题，那就是NavigatorOnLine.onLine

navigator.onLine，是一个属性，返回浏览器的联网状态。主要用于查看你是否连接上了互联网。正常联网(在线)返回true,不正常联网(离线)返回false。

附MDN文档链接：
NavigatorOnLine.onLine - Web API 接口 | MDN

也就是说，我在进入登录页进行登录请求的时候，它会做一个判断，如果当前环境没有网络，就给出提示，并退出当前页面。

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对移动端还是很好用的。