使用cordova network-information 插件监听手机网络状态

在使用html5配合cordova做webapp时,有时需要实时监测手机的网络 状况。html5里面是没有相关的js的,这时就需要在cordova里找相关插件了。

一、插件查找

1、在cordova中文网http://cordova.axuer.com/,的插件里搜索 "network-information",如下图:

会在页面下方出现该插件的网址:cordova-plugin-network-information

二、使用插件

1、安装插件

在项目文件-》app文件下使用cmd调出命令框,安装 cordova plugin add cordova-plugin-network-information

2、插件应用

2-1,得到当年网络状态:

 var networkState = navigator.connection.type;
networkState的返回值(网络的状态):
var states = {};
    states[Connection.UNKNOWN]  = 'Unknown connection';
    states[Connection.ETHERNET] = 'Ethernet connection';
    states[Connection.WIFI]     = 'WiFi connection';
    states[Connection.CELL_2G]  = 'Cell 2G connection';
    states[Connection.CELL_3G]  = 'Cell 3G connection';
    states[Connection.CELL_4G]  = 'Cell 4G connection';
    states[Connection.CELL]     = 'Cell generic connection';
    states[Connection.NONE]     = 'No network connection';
状态值分别代表:
UNKNOWN  = '未知连接' ;   
ETHERNET  = '以太网连接' ;  
WIFI  = ' WiFi连接' ;      
CELL_2G = '小区2G连接' ;   
CELL_3G  = '小区3G连接' ;   
CELL_4G ]= '单元格4G连接' ;   
CELL  = '单元格通用连接' ;      
NONE  = '没有网络连接' ; 

2-2,监听手机失去网络连接

document.addEventListener("offline", callbackfunction, false);

2-3,监听手机收到网络连接以允许应用程序访问互联网时

document.addEventListener("online", callbackfunction, false);

3,具体示例

     var networkFlag  = true;// 默认手机联网
    var networkState = navigator.connection.type;
        if(networkState=='none'){// 无网
            networkFlag = false;
        }
        document.addEventListener("offline", function(){ // 断网
            networkFlag = false;
            // 其它语句
        }, false);
        document.addEventListener("online", function(){  // 开启网络
            networkFlag = true;
            // 其它语句
        }, false);    

 4,注意:此插件只能监听网络的状态,并不能知道是否有真实的网络。部分情况如下:

4-1、手机欠费,数据流量开启,,返回的状态是CELL_2G 或 CELL_3G 或 CELL_4G ;

4-2,wifi有信号,实际没有网络。即路由器正常工作,没有插网线。返回状态“WiFi”

4-3,wifi有信号,但有权限,必须认证后才能连接。返回状态也是“wifi”

这三种情况下监听到的都是有网络的,实际没网络

 

posted @ 2017-12-12 20:04  左岸-oopp  阅读(3371)  评论(0编辑  收藏  举报