ionic3实现app启动时进行网络监测功能

小灰灰 2022-05-18 10:43 173阅读 0赞

原文出处：[https://blog.csdn.net/ffrr33ee/article/details/79602173][https_blog.csdn.net_ffrr33ee_article_details_79602173]

需要联网的app一般都需要进行网络监测，尤其是在app启动时，若未发现网络连接应给出提示，本文在参照[官网][Link 1]的基础上实现了app启动进行网络监测，实现该功能其实非常简单，只需用到cordova的一个插件——[cordova-plugin-network-information][]，实现网络监测的核心就在于“this.network.type”，type类型有：![70][]，因此通过判断type的类型即可检测网络（官网给出了动态检测网络和手动检测网络的方法），过程如下。

**第一步——下载插件**

cd到ionic项目文件，执行如下命令

ionic cordova plugin add cordova-plugin-network-information

npm/cnpm install --save @ionic-native/network

**第二步——注入依赖（初学者很多会忘了这一步）**

![70 1][]

![70 2][]

**第三步——在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函数限制时间）

![70 3][]

[https_blog.csdn.net_ffrr33ee_article_details_79602173]: https://blog.csdn.net/ffrr33ee/article/details/79602173
[Link 1]: https://ionicframework.com/docs/native/network/
[cordova-plugin-network-information]: https://github.com/apache/cordova-plugin-network-information
[70]: /images/20220518/c4985825e4bf4d11b4628c88df037f63.png
[70 1]: /images/20220518/c4444189a510455a8426ea130404bfb1.png
[70 2]: /images/20220518/249b7459639f4ce1aa020ea8108b0891.png
[70 3]: /images/20220518/e0869e51151f447385dbfa8f29ef3adb.png