原文出处:https://blog.csdn.net/ffrr33ee/article/details/79602173
需要联网的app一般都需要进行网络监测,尤其是在app启动时,若未发现网络连接应给出提示,本文在参照官网的基础上实现了app启动进行网络监测,实现该功能其实非常简单,只需用到cordova的一个插件——cordova-plugin-network-information,实现网络监测的核心就在于“this.network.type”,type类型有:,因此通过判断type的类型即可检测网络(官网给出了动态检测网络和手动检测网络的方法),过程如下。
第一步——下载插件
cd到ionic项目文件,执行如下命令
ionic cordova plugin add cordova-plugin-network-information
npm/cnpm install --save @ionic-native/network
第二步——注入依赖(初学者很多会忘了这一步)
第三步——在app.component.ts中实现app启动时网络监测
完成代码如下(直接copy即可用)
import { Component } from '@angular/core'; import { Platform, LoadingController } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { TabsPage } from '../pages/tabs/tabs'; import {Network} from "@ionic-native/network"; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage:any = TabsPage; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private network: Network, private loadingCtrl: LoadingController) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); this.checkNetwork(); //写入函数,让app启动后进行网络监测 }); } //检测网络,若未连接网络,给出提示 checkNetwork() { if(this.network.type === 'unknown') { console.log('This is a unknown network, please be careful!'); } else if(this.network.type === 'none') { console.log('none network!'); let loader = this.loadingCtrl.create({ content: "当前网络不可用,请检查网络设置!" }); loader.present(); } else { console.log('we got a ' + this.network.type + ' connection, woohoo!'); } } }
由代码可见实现该功能的核心即是判断type的类型,网上有些帖子说的是检测connection的状态,可能是ionic版本不同的缘故吧,博主试了connection发现不行,参考官网总是没问题的。
看下效果吧,当未连接网络时,app会一直给出提示(当然也可用setTimeout函数限制时间)