ionic2如何处理android硬件返回按钮

 更新时间:2017年04月05日 09:25:51   作者:无所事事者爱嘲笑  
这篇文章主要为大家详细介绍了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() {
  }
 }

完成。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Handler制作简单相册查看器的实例代码

    Handler制作简单相册查看器的实例代码

    下面小编就为大家分享一篇Handler制作简单相册查看器的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • Android开发之底图局部加载移动的方法示例

    Android开发之底图局部加载移动的方法示例

    这篇文章主要介绍了Android开发之底图局部加载移动的方法,涉及Android针对图片与屏幕属性的读取、计算、设置等相关操作技巧,需要的朋友可以参考下
    2017-08-08
  • Android 打包三种方式实例详解

    Android 打包三种方式实例详解

    这篇文章主要介绍了 Android 打包三种方式实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • 深入浅析Android JSON解析

    深入浅析Android JSON解析

    android中网络数据传输是经常被用到的,通常我们使用xml或者json,而json更加轻量,便捷,我们使用的更多。我自己在项目中使用很多,今天就说说android中怎么去解析JSON,帮助自己总结内容,同时帮助别人少走弯路
    2015-12-12
  • 深入了解ViewPager2的使用

    深入了解ViewPager2的使用

    这篇文章主要介绍了ViewPager2 使用的相关资料,帮助大家更好的进行Android开发,感兴趣的朋友可以了解下
    2020-12-12
  • SwipeLayout框架实现侧拉删除编辑功能

    SwipeLayout框架实现侧拉删除编辑功能

    这篇文章主要为大家详细介绍了SwipeLayout框架实现侧拉删除编辑功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • Android程序启动时出现黑屏问题的解决方法

    Android程序启动时出现黑屏问题的解决方法

    这篇文章主要介绍了Android程序启动时出现黑屏问题的解决方法,分析了黑屏出现的原因及相应的解决方法,需要的朋友可以参考下
    2016-08-08
  • Flutter 创建私有公共插件的步骤

    Flutter 创建私有公共插件的步骤

    flutter pub中有很多开源库,如dio、provider等,这些都是package,直接在pubspec中引入就可以在工程中使用。看下如何自己进行创建
    2021-05-05
  • Android FlowLayout流式布局实现详解

    Android FlowLayout流式布局实现详解

    这篇文章主要为大家详细介绍了Android FlowLayout流式布局的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • RecyclerView的使用之多种Item加载布局

    RecyclerView的使用之多种Item加载布局

    本文给大家介石介绍下如何利用RecyclerView实现多Item布局的加载,多Item布局的加载的意思就是在开发过程中List的每一项可能根据需求的不同会加载不同的Layout
    2016-03-03

最新评论