ionic2处理安卓注册硬件返回按钮

发表于

背景：
使用ionic编写的安卓应用，在主页面按返回时，应用会直接退出应用，体验很不好。
正常的用户体验是在主页按返回时，程序最小化或者提示用户是否退出。

解决方法有以下几种：

1.实现按返回键最小化应用
最小化应用需要装cordova-plugin-appminimize插件：
cordova plugin add https://github.com/tomloprod/cordova-plugin-appminimize.git
在应用中使用window['AppMinimize'].minimize();。

2.要么请求用户确认（添加一个Confirmation Alerts）。

3.按一下提示，按两下退出（加一个方法用toast提醒）。

这里介绍一下第三种方法的具体解决方案：

1.app.html中，添加标签#myNav，在app.component.ts文件通过@ViewChild(‘myNav’)获取

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

2.app.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 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
     }
   }
}

3.tabs.html，添加#mainTabs，在tabs.ts文件通过@ViewChild('mainTabs')获取

1
2
3
4
5
<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>

4.tabs.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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() {
  }
}