ionic2 处理android硬件返回按钮
2017-04-04 14:09
405 查看
问题
注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出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() { } }
完成。
相关文章推荐
- ionic2如何处理android硬件返回按钮
- Ionic2 下处理 Android 设备下返回按钮的事件
- ionic3对安卓硬件返回的处理
- Android ActionBar Home按钮返回事件处理的两种方式
- 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
- 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
- ionic框架对Android返回键的处理
- ionic框架对Android返回键的处理
- angular ionic 框架对 Android 返回键 的 退出app 处理
- Android中Fragment监听返回按钮及返回栈BackStack的一些处理
- Android ActionBar Home按钮返回事件处理的两种方式:
- 玩转Android之如何处理返回按钮
- ionic框架对Android返回键的处理
- ionic框架对Android返回键的处理
- ionic2开发返回按钮处理
- ionic框架对Android返回键的处理
- ionic android双击退出应用和物理返回按钮隐藏键盘的实现
- Ionic系列——android双击退出应用和物理返回按钮隐藏键盘的实现
- sencha touch中处理Android返回按钮事件
- ionic2开发(五)返回按钮处理