参考:http://ionicframework.com/docs/v2/native/network/
(后须还将发表其他我正在ionic2使用的插件或功能)
增加网络监测功能的cordova插件:
$ ionic plugin add cordova-plugin-network-information
开启网络状态动态检测:
// 开启网络监测
startNetDetect() {
// watch network for a disconnect
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
});
// stop disconnect watch (停止断网检测)
// disconnectSubscription.unsubscribe();
// watch network for a connection
let connectSubscription = Network.onConnect().subscribe(() => {
console.log('network connected!');
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait
// prior to doing any api requests as well.
setTimeout(() => {
this.showNetworkStatus();
}, 3000);
});
// stop connect watch (停止联网检测)
// connectSubscription.unsubscribe();
}
为加入显示正在查看当前网络状态的效果,加入LoadingController,显示网络检测过程:
checkNetwork() {
let loader = this.loadingCtrl.create({
content: "网络监测中..."
});
loader.present();
setTimeout(() => {
loader.dismiss();
this.showNetworkStatus();
}, 3000);
}
显示网络状态信息的方法:
showNetworkStatus() {
if(Network.connection == 'unknown') {
console.log('This is a unknown network!');
} else if(Network.connection == 'none') {
console.log('none network!');
} else {
console.log('we got a ' + Network.connection + ' connection, woohoo!');
}
}
程序如下:
home.html
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="home">
<h2>Welcome to Ionic!</h2>
<button (click)="startNetDetect()">开启网络监测</button>
<button (click)="checkNetwork()">当前网络状态</button>
</ion-content>
home.ts
import {Component} from '@angular/core';
import {NavController, LoadingController} from 'ionic-angular';
import {Network} from "ionic-native";
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
constructor(private navCtrl: NavController,
private loadingCtrl: LoadingController) {
}
// 开启网络监测
startNetDetect() {
// watch network for a disconnect
let disconnectSubscription = Network.onDisconnect().subscribe(() => {
console.log('network was disconnected :-(');
});
// stop disconnect watch (停止断网检测)
// disconnectSubscription.unsubscribe();
// watch network for a connection
let connectSubscription = Network.onConnect().subscribe(() => {
console.log('network connected!');
// We just got a connection but we need to wait briefly
// before we determine the connection type. Might need to wait
// prior to doing any api requests as well.
setTimeout(() => {
this.showNetworkStatus();
}, 3000);
});
// stop connect watch (停止联网检测)
// connectSubscription.unsubscribe();
}
checkNetwork() {
let loader = this.loadingCtrl.create({
content: "网络监测中..."
});
loader.present();
setTimeout(() => {
loader.dismiss();
this.showNetworkStatus();
}, 3000);
}
showNetworkStatus() {
if(Network.connection == 'unknown') {
console.log('This is a unknown network!');
} else if(Network.connection == 'none') {
console.log('none network!');
} else {
console.log('we got a ' + Network.connection + ' connection, woohoo!');
}
}
}
Advanced
connection
property will return one of the following connection types: unknown
, ethernet
, wifi
, 2g
, 3g
, 4g
, cellular
, none
Network.connection 的可能值为unknown、ethernet、wifi、2g、3g、4g、cellular、none。