美文网首页ionic学习与开发
ionic3最小化并且监控到前台运行和后台运行

ionic3最小化并且监控到前台运行和后台运行

作者: 亦久亦韭 | 来源:发表于2018-06-01 15:21 被阅读504次

1.安装插件

ionic cordova plugin add cordova-plugin-appminimize
npm install --save @ionic-native/app-minimize

2.建立BackButtonProvider

import { AppMinimize } from '@ionic-native/app-minimize';

export class BackButtonProvider {

  //控制硬件返回按钮是否触发,默认false
  backButtonPressed: boolean = false;

  //构造函数 依赖注入
  constructor(public platform: Platform,
    public appCtrl: App,
    public toastCtrl: ToastController, private appMinimize: AppMinimize) { }

  //注册方法
  registerBackButtonAction(tabRef: Tabs): void {

    //registerBackButtonAction是系统自带的方法
    this.platform.registerBackButtonAction(() => {
      //获取NavController
      let activeNav: NavController = this.appCtrl.getActiveNavs()[0];
      //如果可以返回上一页,则执行pop
      if (activeNav.canGoBack()) {
        activeNav.pop();
      } else {
        if (tabRef == null || tabRef._selectHistory[tabRef._selectHistory.length - 1] === tabRef.getByIndex(0).id) {
          //执行退出
          this.appMinimize.minimize();
        } else {
          //选择首页第一个的标签
          tabRef.select(0);
        }
      }
    });
  }

}

3.在tabs.html页面,如下设置

<ion-tabs #myTabs>

4.在tabs.ts页面

@ViewChild('myTabs') tabRef: Tabs;

  constructor(public backButtonService: BackButtonProvider,
    private platform: Platform) {
    this.platform.ready().then(() => {
      this.backButtonService.registerBackButtonAction(this.tabRef);
    });
  }

5.此处需要注意的是,目前就可以退出最小化了。但是二级页面现在会退出最小化,我们需要如下设置,

  constructor(public navCtrl: NavController, public navParams: NavParams, private platform: Platform, public backButtonService: BackButtonProvider) {

    this.platform.ready().then(() => {
      this.backButtonService.registerBackButtonAction(null);
    });
  }

6.最后说下如何监听软件是在运行。还是已经最小化了(后台运行)。
我们需要app.component.ts里设置,如下:

 constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

    platform.ready().then(() => {

      document.addEventListener("resume", () => {
        statusBar.styleDefault();
        splashScreen.hide();
        alert("进入,前台展示"); //进入,前台展示

      }, false);
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      document.addEventListener("pause", () => {

        alert("退出,后台运行"); //退出,后台运行

      }, false);
    });
  }

相关文章

  • ionic3最小化并且监控到前台运行和后台运行

    1.安装插件 2.建立BackButtonProvider 3.在tabs.html页面,如下设置 4.在tabs...

  • Spring Boot打jar包并运行

    前言 Spring Boot的代码写完以后,可以打成jar包,使用内嵌的Tomcat运行,分为前台运行和后台运行两...

  • iOS开发笔记 | 远程推送相关

    APP的三种状态 APP未运行 APP在后台运行 APP在前台运行 不同状态接收到通知时的表现 当APP在前台运行...

  • Service

    Service介绍 运行于后台,没有前台界面的组件,用于运行需要在后台运行的代码。 在Activity中开启线程下...

  • Docker Compose 命令

    前台运行 docker-compose up 后台运行 docker-compose up -d 启动 docke...

  • Notification

    前台服务通知 如果您的应用正在运行“前台服务”(一种长时间在后台运行且用户可察觉到的 [Service](http...

  • Ubuntu进程前后台切换

    已经在前台运行的程序切换到后台

  • ionic5+Angular8 状态栏通知+震动+自定义音频

    ionic3 即时通讯(待机/后台运行可用)github官方文档ionic官方文档blog实例 ionic3本地通...

  • 了解前台到后台的运行机制

    昨天跟朋友讨论面试,忽然想起上次找工作面试官问我前台用的什么模板?知道前台到后台的执行过程么? 现在想想当时答的是...

  • RN-AppState

    ReactNative 提供了AppState 来告知 App当前状态:前台运行中、后台台运行中 1 获取当前应用...

网友评论

    本文标题:ionic3最小化并且监控到前台运行和后台运行

    本文链接:https://www.haomeiwen.com/subject/aihksftx.html