Ionic5如何实现退出应用（退出App）

野性酷女 2022-12-17 01:24 300阅读 0赞

### Ionic5如何实现退出应用（退出App） ###

*  背景
 *  关键点
 *  代码实现

# 背景 #

默认开发的Ionic App打包在手机上安装后，是无法通过返回（屏幕滑动的返回操作）退出应用的，要想实现这个功能， 还需要编写一部分代码来实现。

# 关键点 #

通过在app.component.ts中增加订阅platform返回操作来实现。  
关键代码：

navigator['app'].exitApp();     //退出应用

# 代码实现 #

app.component.ts

import {  Component } from '@angular/core';
    
    import {  Platform } from '@ionic/angular';
    import {  SplashScreen } from '@ionic-native/splash-screen/ngx';
    import {  StatusBar } from '@ionic-native/status-bar/ngx';
    
    import {  Router } from '@angular/router';
    
    @Component({ 
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss']
    })
    export class AppComponent { 
      lastTimeBackPress = 0;
      timePerionToExit = 2000;    //时间间隔2秒
    
      constructor(
        private platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private router: Router
      ) { 
        this.initializeApp();
    
        this.platform.backButton.subscribe(() => { 
          if (this.router.url.indexOf('tab1') > -1) { 
            if (new Date().getTime() - this.lastTimeBackPress < this.timePerionToExit) { 
              navigator['app'].exitApp();     //退出应用 
            }
            this.lastTimeBackPress = new Date().getTime();
          }
        });
      }
    
      initializeApp() { 
        this.platform.ready().then(() => { 
          this.statusBar.styleDefault();
          this.splashScreen.hide();
        });
      }
    }

如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/a573659060a64ccdbbc315b86c99d7bb.png