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

2022-10-02 11:07:02

在使用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”

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

码农公寓

一、插件查找

二、使用插件

相关文章