ionic2、3双击硬件back按键退出应用

在手机设备上，经常可以看到双击手机上的返回键两次，就会提示是否要退出应用，关于官方的相关文档在这里：https://ionicframework.com/docs/api/platform/Platform/，大家可以看一下platform.registerBackButtonAction的使用方法，在ionic中的使用方式如下：
1、在src/app/app.component.ts中输入一下代码，或者自行改造一下
import { Component, ViewChild } from '@angular/core';
import { Platform, ToastController, Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage = TabsPage;
backButtonPressed: boolean = false; //用于判断返回键是否触发
@ViewChild(Nav) nav: Nav;
constructor(public platform: Platform, public toastCtrl: ToastController) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
StatusBar.styleDefault();
Splashscreen.hide();
//注册返回按键事件
this.platform.registerBackButtonAction((): any => {
let activeVC = this.nav.getActive();
let page = activeVC.instance;
//当前页面非tab栏
if (!(page instanceof TabsPage)) {
if (!this.nav.canGoBack()) {
return this.showExit();
}
return this.nav.pop();
}
let tabs = page.tabs;
let activeNav = tabs.getSelected();
if (!activeNav.canGoBack()) {
//当前页面为tab栏，退出APP
return this.showExit();
}
//当前页面为tab栏的子页面，正常返回
return activeNav.pop();
}, 101);
});
}
//双击退出提示框，这里使用Ionic2的ToastController
showExit() {
if (this.backButtonPressed) this.platform.exitApp(); //当触发标志为true时，即2秒内双击返回按键则退出APP
else {
let toast = this.toastCtrl.create({
message: '再按一次退出应用',
duration: 2000,
position: 'bottom'
});
toast.present();
this.backButtonPressed = true;
//2秒内没有再次点击返回则将触发标志标记为false
setTimeout(() => {
this.backButtonPressed = false;
}, 2000)
}
}
}

2、src/pages/tabs/tabs.html





3、src/pages/tabs/tabs.ts
import { Component,ViewChild } from '@angular/core';
import { Tabs } from 'ionic-angular';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
@ViewChild('mainTabs') tabs:Tabs;
//根据html中的'#mainTabs'获取Tabs实例
tab1Root: any = HomePage;
tab2Root: any = AboutPage;
tab3Root: any = ContactPage;
constructor() {
}
}