ionic2.0双击返回键退出应用

最近才把ionic的版本更新到2.0，所以便想感受一下2.0版本带来的新体验。

看了官方网站以及网上的各种介绍后，才知道这2.0版本结合了TypeScript和ES6，和1.0+版本有很大的不同，所以在此记录下使用2.0版本开发应用的过程与代码。此文就是介绍在2.0版本双击返回键退出应用。

先在这说下我从更新后到现在的经验吧。ionic2.0的项目目录和以前不一样了，而且是在/app这个文件夹下开发的，html、scss和ts文件都在这里，生成一个页面需要的三个文件（html、scss、ts）是使用命令ionic g page生成的。如，在当前项目下，使用 ionic g page MyPage，就可以生成my-page一个文件夹以及文件夹里面的所需的三个文件。

还有，想在浏览器上测试效果，你就得执行命令ionic serve来测试，不像以前刷新就可以了（此处我被坑了很久才知道）。

双击返回键退出应用

首先，贴一下效果图：

然后就是主要代码。打开/app目录下的app.ts，把下面的代码全部复制粘贴，然后执行ionic run android就可以了。

[javascript] view plain copy print?

1. import {Component} from '@angular/core';  
2. import {Platform, ionicBootstrap} from 'ionic-angular';  
3. import {StatusBar} from 'ionic-native';  
4. import {TabsPage} from './pages/tabs/tabs';  
5. import {ToastController} from 'ionic-angular';//这个是为了出现“再按一次退出”的弹出框才import的  
6.   
7. @Component({  
8.   template: '<ion-nav [root]="rootPage"></ion-nav>'  
9. })  
10. export class MyApp {  
11.   
12.   private rootPage: any;  
13.   public static backButtonPressedOnceToExit = false;  
14.   
15.   constructor(private platform: Platform,public toastCtrl:ToastController) {  
16.     this.rootPage = TabsPage;  
17.   
18.     platform.ready().then(() => {  
19.       // Okay, so the platform is ready and our plugins are available.  
20.       // Here you can do any higher level native things you might need.  
21.       StatusBar.styleDefault();  
22.     });  
23.     platform.registerBackButtonAction(function(e){  
24.       if(MyApp.backButtonPressedOnceToExit){  
25.         platform.exitApp();  
26.       }else{  
27.         MyApp.backButtonPressedOnceToExit = true;  
28.         let toast = toastCtrl.create({  
29.           message: '再按一次退出',  
30.           duration: 2000,  
31.           position: 'bottom'  
32.         });  
33.         toast.present();  
34.         setTimeout(function(){  
35.           MyApp.backButtonPressedOnceToExit = false;  
36.         },2000)  
37.       }  
38.     },101)  
39.   }  
40. }  
41. ionicBootstrap(MyApp);  

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {ToastController} from 'ionic-angular';//这个是为了出现“再按一次退出”的弹出框才import的

@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {

  private rootPage: any;
  public static backButtonPressedOnceToExit = false;

  constructor(private platform: Platform,public toastCtrl:ToastController) {
    this.rootPage = TabsPage;

    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();
    });
    platform.registerBackButtonAction(function(e){
      if(MyApp.backButtonPressedOnceToExit){
        platform.exitApp();
      }else{
        MyApp.backButtonPressedOnceToExit = true;
        let toast = toastCtrl.create({
          message: '再按一次退出',
          duration: 2000,
          position: 'bottom'
        });
        toast.present();
        setTimeout(function(){
          MyApp.backButtonPressedOnceToExit = false;
        },2000)
      }
    },101)
  }
}
ionicBootstrap(MyApp);

在此结束。