ionic2 处理android硬件返回按钮

问题

注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出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() {
   }
 }

完成。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏developerHaoz 的安卓之旅

Android 解锁 Gradle 依赖新姿势

相信现在大部分人都在使用 Gradle 来进行依赖管理,不得不说,Gradle 真的相当简洁、好用,举个例子,如果我们想依赖 okhttp,直接

824
来自专栏张戈的专栏

修改WordPress默认评论表情(附:跳转到多说评论框的方法)

先吐槽一下:这两天博主折腾抢票火车票去了,博客也没怎么打理,最不爽的是折腾到最后才弄到一张无座的,唉,说多了都是泪啊!铁道部你技术不行可以招标啊,干嘛拿老百姓做...

3539
来自专栏happyJared

Python + Selenium 自动发布文章(一):开源中国

  还是说说出这个系列的起因吧。之前写完或是修改了Markdown文章,我还分别需要在多个平台进行发布或是更新维护这些内容,这些平台目前包括我的博客、简书、开源...

471
来自专栏咸鱼不闲

web项目实现国际化

2.资源文件:以.properties文件的key-value的特性,设置key和value,一般一个语种要写一个文件。

452
来自专栏张戈的专栏

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个...

3715
来自专栏从零开始学自动化测试

selenium+python自动化96-执行jquery报:$ is not defined

前言 背景介绍:做wap页面自动化的时候,把url地址直接输入到浏览器(chrome浏览器有手机wap模式)上测试,有个按钮死活点不到,用wap模式的触摸事件也...

3036
来自专栏221-B

markdown-TOC

今天写了一篇比较长的文章, 想用目录使结构清晰一点,但是却发现markdown对TOC的支持实在是……

572
来自专栏张善友的专栏

为你的.NET/Mono应用程序加入更新支持NetSparkle

2010年什么最火,无疑是iPhone,iPad , Andriod。从Web又回到桌面软件开发,程序的更新问题是一个必须考虑的问题,如何将程序更新及时优雅的推...

1975
来自专栏知晓程序

开发 | 一篇文章,带你从 0 到 1 开发小程序插件

1153
来自专栏程序员宝库

趣图:各种程序员的键盘热力图

936

扫码关注云+社区