欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-08 17:42:37
问题 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法: 1.实现按返回键最小化应用(最小化应用需要装cordova...

问题

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

完成。

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