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

需要联网的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函数限制时间）

ionic3实现app启动时进行网络监测功能相关推荐

android启动画面白屏,Android app启动时黑屏或者白屏的原因及解决办法
1.产生原因其实显示黑屏或者白屏实属正常,这是因为还没加载到布局文件,就已经显示了window窗口背景,黑屏白屏就是window窗口背景. 示例: 2.解决办法通过设置设置Style (1)设置背 ...
App启动时黑屏问题
问题:app启动时,会出现一会儿的黑屏或者白屏才进入Activity的界面显示分析:黑屏或者白屏这里并不是不正常,而是还没加载到布局文件,就已经显示了window窗口背景,黑屏白屏就是window窗 ...
ionic2 中的网络监测功能
参考:http://ionicframework.com/docs/v2/native/network/ (后须还将发表其他我正在ionic2使用的插件或功能) 增加网络监测功能的cordova插件: ...
Android APP启动时出现白屏或者黑屏怎么办？
1.为什么APP启动时会出现白屏或者黑屏? 当打开一个Activity时,如果这个Activity所属的应用还没有在运行,系统会为这个Activity所属的应用创建一个进程,但进程的创建与初始化都需要 ...
APP启动时白屏/黑屏或者 Activity打开时白屏/黑屏
绘制整个窗口需要按顺序执行以下几个步骤: 1. 绘制背景. 2. 绘制View本身的内容. 3. 绘制子View. 4. 绘制修饰内容(例如滚动条). 在Theme中可以指定窗口的背景,Activit ...
Android App启动时经常会卡顿黑屏或白屏 By Terry
App在点击图标启动时,初始化时候需要一段时间. 如果因为各种原因,导致这个初始化时间过长,会造成很糟糕的用户体验. 经常会产生长时间黑屏,或者长时间白屏的现象.其实产生这一现象的时候App已经进入要 ...
android+闪屏启动优化,Android分享笔记(2) APP启动时闪屏
App在启动时,即在欢迎界面.老是出现白屏或黑屏,闪一下然后才出现欢迎界面. 我欢迎界面原先是这样的:<?xml version="1.0" encoding=" ...
记录一下公司中对于app启动时长的做法
公司最近要做启动时长,需求是在每次周版本分别记录一下 app的整体功耗(耗电量以后更新),和app的启动时长前置条件: 一.app启动没有广告,闪屏,特殊弹窗有广告:猎豹清理大师,首页开屏会出广告 ...
解决App启动时白屏的问题
第一次 03-25 11:02:34.431 6908-6908/com.newenergyjinfu.jytz D/App: before_onCreate: 239 03-25 11:02:34. ...

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

ionic3实现app启动时进行网络监测功能相关推荐

最新文章

热门文章