ionic2如何處理android硬體返回按鈕

NO IMAGE

問題

註冊安卓硬體返回按鈕事件是必須的,因為使用者不小心點選了返回按鈕就退出app體驗很不好,所以有幾種方法:

1.實現按返回鍵最小化應用(最小化應用需要裝cordova-plugin-appminimize外掛,使用window[‘AppMinimize’].minimize();)。
2.要麼請求使用者確認(新增一個Confirmation Alerts)。
3.按一下提示,按兩下退出(加一個方法用toast提醒)。

這裡用第三種展示。

解決

在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; //用於判斷返回鍵是否觸發
@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();//另外兩種方法在這裡將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;獲取:


<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() {
}
}

完成。