cordova network-information插件

最新推荐文章于 2020-04-30 16:51:13 发布

michael_ouyang

最新推荐文章于 2020-04-30 16:51:13 发布

阅读量2.8k

点赞数

分类专栏： cordova 文章标签： cordova plugin webapp network-information

本文链接：https://blog.csdn.net/michael_ouyang/article/details/75675879

版权

cordova 专栏收录该内容

21 篇文章 5 订阅

订阅专栏

介绍

这个插件提供了有关设备的蜂窝和wifi连接信息和设备是否有网络连接。

安装

cordova plugin add cordova-plugin-network-information

支持的平台Supported Platforms

· Amazon Fire OS

· Android

· BlackBerry 10

· Browser

· iOS

· Windows Phone 7 and 8

· Tizen

· Windows

· Firefox OS

详情

连接Connection

这个connection对象，暴露了navigator.connection，提供关于设备的蜂窝和WiFi连接信息。

属性Properties

· connection.type

connection.type

此属性提供了一个快速的方法来确定设备的网络连接状态和连接类型。

iOS 特性

无法检测到蜂窝网络连接的类型

navigator.connection.type 设置为Connection.CELL 为所有的蜂窝数据

常量Constants

· Connection.UNKNOWN

· Connection.ETHERNET

· Connection.WIFI

· Connection.CELL_2G

· Connection.CELL_3G

· Connection.CELL_4G

· Connection.CELL

· Connection.NONE

网络相关事件Network-related Events

离线offline

事件触发时，一个应用程序脱机，和设备没有连接到互联网。

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

详情Details

这个offline 事件触发时，先前连接的设备失去网络连接，应用程序不能访问互联网。它依赖于相同的信息连接的API，和连接时的值connection.type成为NONE

应用程序应该使用document.addEventListener附加到事件监听器deviceready事件触发

小示例

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

function onOffline() {

// Handle the offline event

}

iOS 特性

During initial startup, the first offline event (if applicable) takes at least a second to fire.

在初始启动时，第一个离线事件（如适用）需要至少一秒才触发。

在线online

当一个应用上线时这个事件会被触发，和设备将连接到网络。

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

详情Details

当先前无连接的设备接收网络连接，允许应用连接到网络时，这个online 事件触发。它依赖于相同的信息连接的API，和当connection.type从NONE改变到其他值时触发。

应用程序应该使用document.addEventListener附加到事件监听器deviceready事件触发

小示例

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

function onOnline() {

// Handle the online event

}

iOS 特性

在初始启动时，首先online 事件(要是可用的话)，需要至少一秒才触发，要是connection.type是UNKNOWN之前

示例

示例一：

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
         .line{
              padding: 10px;
         }
    </style>
</head>
<body>
<div class="app">
    <h1>网络信息</h1>
    <div class="line"><button id="btn">按钮</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent();
    },
    receivedEvent: function() {
        var _this = this;
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            _this.checkConnection();
        }
    },
    checkConnection() {
        var networkState = navigator.connection.type;
        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';
        alert('Connection type: ' + states[networkState]);
    }
};

app.initialize();

运行：

点击“按钮”，显示网络信息是WIFI网络

示例二：

在示例一的基础上，加入了onOnline事件监听器，设备在线的情况下触发此事件。

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
         .line{
              padding: 10px;
         }
    </style>
</head>
<body>
<div class="app">
    <h1>网络信息</h1>
    <div class="line"><button id="btn">按钮</button></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        document.addEventListener("online", this.onOnline.bind(this), false);
    },
    // 获取网络状态
     onOnline() {
         var networkState = navigator.connection.type;
         // 如果状态不等于Connection.NONE（即有网络）
         if (networkState !== Connection.NONE) {
             this.receivedEvent();
         }
     },
    receivedEvent: function() {
        var _this = this;
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            _this.checkConnection();
        }
    },
    checkConnection() {
        var networkState = navigator.connection.type;
        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';
        alert('Connection type: ' + states[networkState]);
    }
};

app.initialize();

运行：

在触发时，会有一秒的迟缓

点击“按钮”，显示网络信息是WIFI网络

运行：

点击“按钮”，显示网络信息是WIFI网络

michael_ouyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cordova network-information插件

介绍这个插件提供了有关设备的蜂窝和wifi连接信息和设备是否有网络连接。安装cordova plugin add cordova-plugin-network-information 支持的平台Supported Platforms· Amazon Fire OS· Android· BlackBerry 1
复制链接

扫一扫