ionic（11）：解决安卓返回键返回登陆页面和返回2s双击退出

1. 首先在app.html页面添加 #myNav，代码如下：

   <ion-nav #myNav [root]="rootPage"></ion-nav>

app.html

2. 在app.component.ts文件通过@ViewChild('myNav')获取，代码如下（新加的代码我会在图片中用红色标出）：

import { Component, ViewChild } from '@angular/core';
import { Platform, ToastController, Nav, IonicApp, Keyboard} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TabsPage } from '../pages/tabs/tabs';
// import { LoginPage } from '../pages/login/login';
import { LoadingPage } from '../pages/loading/loading';
// import { Toast } from '@ionic-native/toast';
@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage:any = LoadingPage;
    backButtonPressed: boolean = false;  //用于判断返回键是否触发
    @ViewChild('myNav') nav: Nav;
    constructor(
        public platform: Platform,
        public toastCtrl: ToastController, 
        public keyBoard: Keyboard,
        public ionicApp: IonicApp,
        statusBar: StatusBar,
        splashScreen: SplashScreen
        ) 
    {
        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.registerBackButtonAction();//注册返回按键事件

        });
    }
    registerBackButtonAction() {
        this.platform.registerBackButtonAction(() => {
            if (this.keyBoard.isOpen()) {
                this.keyBoard.close();
            }
            else {
                let activeVC = this.nav.getActive();
                let page = activeVC.instance;
                //此处if是rootPage为登录页的情况，else是rootPage为TabsPage（如果不需要判断登录页的情况直接用else内的代码即可）
                if (!(page instanceof TabsPage)) {
                    if (!this.nav.canGoBack()) {
                        console.log("检测到在根视图点击了返回按钮");
                        this.showExit();
                    }
                    else {
                        console.log("检测到在子路径中点击了返回按钮。");
                        this.nav.pop();
                    }
                }
                else {
                    let tabs = page.tabs;
                    let activeNav = tabs.getSelected();
                    if (!activeNav.canGoBack()) {
                        console.log('检测到在 tab 页面的顶层点击了返回按钮。');
                        this.showExit();
                    }
                    else {
                        console.log('检测到当前 tab 弹出层的情况下点击了返回按钮。');
                        activeNav.pop();
                    }
                }
            }
        }, 1);
    }
    showExit() {
        if (this.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP
            this.platform.exitApp();
        } else {
            this.toastCtrl.create({
                message: "再按一次退出应用",
                duration: 2000,
                position: 'middle',
                cssClass: 'tip' //修改样式（根据需要添加）
            }).present();
            this.backButtonPressed = true;
            setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
        }
    }
}

Tip:其中的toast我自己改了样式，所以可能你需要修改一下适合自己的toast样式

app.component.ts页面
app.component.ts页面2

3. 添加#mainTabs,在tabs.ts文件通过@ViewChild('mainTabs') tabs:Tabs;获取

<ion-tabs #mainTabs color="fff" class="tabs-bar mytabs">
  <ion-tab tabIcon="home" tabTitle="首页" [root]="tab1Root"></ion-tab>
  <ion-tab tabIcon="information-circle" tabTitle="消息" [root]="tab2Root" [tabBadge]="num" tabBadgeStyle="danger"></ion-tab>
  <ion-tab tabIcon="settings" tabTitle="我的" [root]="tab3Root" ></ion-tab>
</ion-tabs>

tabs.html页面

4. tabs.ts页面中添加以下代码：

import { Component, ViewChild} from '@angular/core';

@ViewChild('mainTabs') tabs: Tabs;

tabs.ts页面

5. 打包到手机查看

 //sudo -s //获取管理员超级权限，这步可省略
cd #项目目录
ionic cordova build android //打包

6. 在手机调试，在登陆页面和tabs首页点击返回键会有提示再次点击退出，这个提示间隔2s，其他页面点击则是pop(返回)到上一个页面。图就不贴了

7. 参考资料：https://blog.csdn.net/genglanggenglang/article/details/77679245

---

8. 往期传送门：
   ionic(10):修改头部返回按钮返回指定页面
   ionic(9):JS对象数组去重
   ionic(8):打包APP并生成下载地址，生成下载二维码
   ionic(7): 编译报错Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebu...
   ionic（6）：实现手机上头部沉浸式效果
   ionic学习（5）：颜色拓展、修改头部颜色、按钮button演示
   ionic学习（4）：仿微信QQ的消息提示
   ionic3学习（3）：页面跳转以及隐藏二级菜单tabs和修改返回按钮
   ionic3学习（2）：ionic调用相机相册并上传图片
   ionic3学习：修改toast样式显示位置自定义颜色