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 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

用fiddler进行debug

昨晚在家里调试一个页面,弄了好一会,fiddler都没有抓到数据。最后Google之,才发现因为我等都装了SwitchySharp这类自动翻墙插件。导致Chro...

8700
来自专栏建站达人秀

如何搭建 Express 网站

Express 是一种保持最低程度规模的灵活 Node.js Web 应用程序框架,为 Web 和移动应用程序提供一组强大的功能。nenggou 使用您提议的各...

52020
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【8.网页中的css/js/image处理】

通常情况下,网页开发时,页面中的样式是通过外部css样式进行处理的,外部的css文件加载在Django中,需要进行简单的处理

9120
来自专栏Jerry的SAP技术分享

如何将BSP应用配置成Fiori Launchpad上的一个tile

当我们通过WebIDE或者Eclipse的插件Team Provider把一个本地开发好的UI5应用部署到了ABAP Netweaver服务器上之后,我们可以将...

24370
来自专栏FreeBuf

EKFiddle:基于Fiddler研究恶意流量的框架

EKFiddle是一个基于Fiddler web debugger的,用于研究漏洞利用套件、恶意软件和恶意流量的框架。

12900
来自专栏Golang语言社区

golang使用protobuf

为什么要使用protobuf 最近的项目中,一直使用Json做数据传输。Json用起来的确很方便。但相对于protobuf数据量更大些。做一个移动端应用,为用户...

90950
来自专栏IT可乐

HTML中的超链接

超链接:也叫URL(Uniform Resource Locator),就是统一资源定位器。一般效果是我们点击网页上某个地方,网页会自动跳转到另外一个地方。 一...

38150
来自专栏源码之家

DZ X2.0去除贴内AD图标,贴内广告上移到分享按钮上面的方法

11120
来自专栏WindCoder

ubuntu 14.04 下安装 PyTesser 进行OCR识别

玩python期间,看到好多用python做的爬虫,感觉挺好玩,就开始了爬虫之旅的学习,期间受一些教程的启发想去试试学校的教务系统,可惜登录需要验证码,于是四处...

18410
来自专栏云计算

如何在腾讯云COS部署HEXO博客

前段时间发现我的博客老是报456错误,而且国内速度加载越来越慢,不知道是什么问题,打算优化下。正在我查资料的时候,突然发现,腾讯云COS竟然支持静态网站部署了,...

1.2K20

扫码关注云+社区

领取腾讯云代金券