效果演示

源代碼已上傳到github

由于ionic版本更新較快,有些寫法可能改變來不及更新簡書,請以github代碼為準(zhǔn)

ionic2-完美處理安卓硬件返回按鈕.gif

介紹

• 注冊安卓硬件返回按鈕事件是必須的,因為用戶不小心點擊了返回按鈕就退出app體驗很不好. 所以當(dāng)用戶點擊返回按鈕,應(yīng)該提示"再按一次退出"

• 不想實現(xiàn)"再按一次退出",想實現(xiàn)像QQ一樣按返回最小化app?可以看這里

• ionic2更新比較快,Google找到的許多處理方法都是舊版本,下面就貼出package.json完整代碼,截至目前是最新的
  {
  "name": "ionic-app-base",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
  "clean": "ionic-app-scripts clean",
  "build": "ionic-app-scripts build",
  "ionic:build": "ionic-app-scripts build",
  "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
  "@angular/common": "2.2.1",
  "@angular/compiler": "2.2.1",
  "@angular/compiler-cli": "2.2.1",
  "@angular/core": "2.2.1",
  "@angular/forms": "2.2.1",
  "@angular/http": "2.2.1",
  "@angular/platform-browser": "2.2.1",
  "@angular/platform-browser-dynamic": "2.2.1",
  "@angular/platform-server": "2.2.1",
  "@ionic/storage": "1.1.7",
  "ionic-angular": "2.0.0-rc.4",
  "ionic-native": "2.2.11",
  "ionicons": "3.0.0",
  "rxjs": "5.0.0-beta.12",
  "zone.js": "0.6.26"
  },
  "devDependencies": {
  "@ionic/app-scripts": "0.0.47",
  "typescript": "2.0.9"
  }
  }

• 今天(2017年3月17日 10:12:31)升級到最新版本,代碼不變,依然可以用,特此說明

  
  

核心代碼

核心代碼就4個文件,這4個文件中的完整代碼如下

1. app.html,添加#myNav,在app.component.ts文件通過@ViewChild('myNav')獲取
   <ion-nav #myNav [root]="rootPage"></ion-nav>

• app.component.ts

   import {Component, ViewChild} from '@angular/core';
   import {Platform, ToastController, Nav, IonicApp} 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;  //用于判斷返回鍵是否觸發(fā)
     @ViewChild('myNav') nav: Nav;
  
     constructor(public ionicApp: IonicApp, public platform: Platform, public toastCtrl: ToastController) {
       platform.ready().then(() => {
         StatusBar.styleDefault();
         Splashscreen.hide();
         this.registerBackButtonAction();//注冊返回按鍵事件
       });
     }
  
     registerBackButtonAction() {
       this.platform.registerBackButtonAction(() => {
         //如果想點擊返回按鈕隱藏toast或loading或Overlay就把下面加上
         // this.ionicApp._toastPortal.getActive() || this.ionicApp._loadingPortal.getActive() || this.ionicApp._overlayPortal.getActive()
         let activePortal = this.ionicApp._modalPortal.getActive();
         if (activePortal) {
           activePortal.dismiss().catch(() => {});
           activePortal.onDidDismiss(() => {});
           return;
         }
         let activeVC = this.nav.getActive();
         let tabs = activeVC.instance.tabs;
         let activeNav = tabs.getSelected();
         return activeNav.canGoBack() ? activeNav.pop() : this.showExit()
       }, 1);
     }
  
     //雙擊退出提示框
     showExit() {
       if (this.backButtonPressed) { //當(dāng)觸發(fā)標(biāo)志為true時仇哆，即2秒內(nèi)雙擊返回按鍵則退出APP
         this.platform.exitApp();
       } else {
         this.toastCtrl.create({
           message: '再按一次退出應(yīng)用',
           duration: 2000,
           position: 'top'
         }).present();
         this.backButtonPressed = true;
         setTimeout(() => this.backButtonPressed = false, 2000);//2秒內(nèi)沒有再次點擊返回則將觸發(fā)標(biāo)志標(biāo)記為false
       }
     }
  

  }

• tabs.html,添加#mainTabs,在tabs.ts文件通過@ViewChild('mainTabs') tabs:Tabs;獲取
  <ion-tabs #mainTabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>

• tabs.ts
  import {Component, ViewChild} from '@angular/core';
  import { HomePage } from '../home/home';
  import { AboutPage } from '../about/about';
  import { ContactPage } from '../contact/contact';
  import {Tabs} from "ionic-angular";

   @Component({
     templateUrl: 'tabs.html'
   })
   export class TabsPage {
     @ViewChild('mainTabs') tabs:Tabs;
     tab1Root: any = HomePage;
     tab2Root: any = AboutPage;
     tab3Root: any = ContactPage;
   
     constructor() {
     }
   }
  

今天(2017年3月21日 22:34:42)添加隱藏鍵盤事件