ionic2实战-完美处理安卓硬件返回按钮

效果演示

源代码已上传到github

由于ionic版本更新较快,有些写法可能改变来不及更新,请以github代码为准

ionic2-完美处理安卓硬件返回按钮.gif

介绍

• 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好. 所以当用户点击返回按钮,应该提示"再按一次退出"

• 不想实现"再按一次退出",想实现像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')获取
   

• 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;  //用于判断返回键是否触发
     @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) { //当触发标志为true时，即2秒内双击返回按键则退出APP
         this.platform.exitApp();
       } else {
         this.toastCtrl.create({
           message: '再按一次退出应用',
           duration: 2000,
           position: 'top'
         }).present();
         this.backButtonPressed = true;
         setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
       }
     }
  

  }

• tabs.html,添加#mainTabs,在tabs.ts文件通过@ViewChild('mainTabs') tabs: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)添加隐藏键盘事件