ionic2如何处理android硬件返回按钮_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 00:30:47 点击率：次

问题

注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出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 # 返回按钮 # Android 滑动返回Activity的实现代码 # Android 实现按两次返回键退出程序（两种方法） # Android onKeyDown监听返回键无效的解决办法 # Android悬浮球及全局返回功能的实现示例 # Android标题栏中添加返回按钮功能 # Android悬浮按钮点击返回顶部FloatingActionButton # Android 自定义返回按钮的实例详解 # 两种 # 双击 # 在这里 # 就好 # 就把 # 这句 # 两下 # 很不好 # 大家多多 # 再按 # 则将 # 第三种 # 几种方法 # core # angular # Component # ToastController # Platform # class # pre

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：大淘客建站：如何在阿里云上快速搭建电商网站？

下一篇：css元素宽高计算不准确怎么办_检查css盒模型是否被修改

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：大淘客建站：如何在阿里云上快速搭建电商网站？

下一篇：css元素宽高计算不准确怎么办_检查css盒模型是否被修改