ionic3專案監聽Android物理鍵返回事件
阿新 • • 發佈:2018-12-05
針對ionic專案的兩個模板分別處理。
一、tabs模板專案的物理鍵返回事件處理機制
import { Component, ViewChild } from '@angular/core'; import {Platform, Nav, IonicApp, ToastController} from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; backButtonPressed: boolean = false; @ViewChild('myNav') nav: Nav; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public ionicApp: IonicApp, public toastCtrl: ToastController) { 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(); splashScreen.hide(); this.registerBackButtonAction(); //註冊返回按鍵事件 if (this.platform.is('cordova')) { this.jpush.init(); this.jpush.setDebugMode(true); this.jpush.setBadge(0); this.jpush.setApplicationIconBadgeNumber(0); this.getRegistrationID(); } }); } 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: 'middle' }).present(); this.backButtonPressed = true; setTimeout(() => this.backButtonPressed = false, 2000);//2秒內沒有再次點選返回則將觸發標誌標記為false } // var that = this; // this.ionicService.presentConfirm('退出提示','確定要退出應用程式嗎?',function () { // that.platform.exitApp(); // }) }
二、ionic sideMenu模板專案的物理鍵返回事件處理機制
import { Component, ViewChild } from '@angular/core'; import {Nav, Platform, IonicApp, ToastController, NavController, App, Tabs} from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; export class MyApp { @ViewChild(Nav) nav: Nav; backButtonPressed: boolean = false; constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public ionicApp: IonicApp,public toastCtrl: ToastController, public app:App) { this.initializeApp() } initializeApp() { this.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. this.statusBar.styleDefault(); this.splashScreen.hide(); this.registerBackButtonAction(Tabs); //註冊返回按鍵事件 }); } registerBackButtonAction(tabRef){ this.platform.registerBackButtonAction(() => { //獲取NavController let activeNav: NavController = this.app.getActiveNav(); // 有博主說上面的方法在新的版本中被移除,但是我在測試的時候還可以繼續使用,下面這段程式碼是新的使用方式,我也貼出來。 // let activeNav: NavController = this.appCtrl.getActiveNavs()[0]; //如果可以返回上一頁,則執行pop if (activeNav.canGoBack()) { activeNav.pop(); } else { // if (tabRef == null || tabRef._selectHistory[tabRef._selectHistory.length - 1] === tabRef.getByIndex(0).id) { // //執行退出 // this.showExit(); // } else { // //選擇首頁第一個的標籤 // tabRef.select(0); // } this.showExit(); } }); } //雙擊退出提示框 showExit() { if (this.backButtonPressed) { //當觸發標誌為true時,即2秒內雙擊返回按鍵則退出APP this.platform.exitApp(); } else { this.toastCtrl.create({ message: '再按一次退出應用', duration: 2000, position: 'middle' }).present(); this.backButtonPressed = true; setTimeout(() => this.backButtonPressed = false, 2000);//2秒內沒有再次點選返回則將觸發標誌標記為false } } }
可以針對不同的專案情況,做相應的調整。