ionic2 android返回键,ionic3 教程（四）安卓硬件返回键处理

前几天测出了一个问题，就是在根目录点击安卓的硬件返回键，会直接导致程序退出。在网上找到了 小军617 写的这篇ionic2实战-完美处理安卓硬件返回按钮。

这篇文章解决了一部分问题，可以让我们在 Tabs 下点击返回按钮弹出一个 toast 提示“再按一次退出应用”，然后如果用户在2秒内再按一次就会真的退出。不过Demo 在登录页点击返回按钮没有任何反应，而且点击退出登录后，点击硬件返回按钮会回到主界面。

所以我打算对这个方法进行一下优化，包括以下几点。将方法从 app.component.ts 中抽出做成一个公共方法，便于其他页面使用

修复退出登录后，点击硬件返回按钮会回到主界面

在 tabs 页，如果不在首页标签，点击硬件返回按钮，先跳转到首页。之后再按两次退出

1.在 src 目录下，新建文件夹 services 和文件 backButton.service.ts

输入以下代码，我已经写了很全的注释，仔细看import { Injectable } from '@angular/core';import { Platform, ToastController, App, NavController, Tabs } from 'ionic-angular';

@Injectable()export class BackButtonService {  //控制硬件返回按钮是否触发，默认false

backButtonPressed: boolean = false;  //构造函数 依赖注入

constructor(public platform: Platform,

public appCtrl: App,

public toastCtrl: ToastController) { }  //注册方法

registerBackButtonAction(tabRef: Tabs): void {

//registerBackButtonAction是系统自带的方法

this.platform.registerBackButtonAction(() => {      //获取NavController

let activeNav: NavController = this.appCtrl.getActiveNavs()[0];      //如果可以返回上一页，则执行pop

if (activeNav.canGoBack()) {

activeNav.pop();

} else {        if (tabRef == null || tabRef._selectHistory[tabRef._selectHistory.length - 1] === tabRef.getByIndex(0).id) {          //执行退出

this.showExit();

} else {          //选择首页第一个的标签

tabRef.select(0);

}

}

});

}  //退出应用方法

private showExit(): void {    //如果为true，退出

if (this.backButtonPressed) {      this.platform.exitApp();

} else {        //第一次按，弹出Toast

this.toastCtrl.create({            message: '再按一次退出应用',            duration: 2000,            position: 'top'

}).present();      //标记为true

this.backButtonPressed = true;      //两秒后标记为false，如果退出的话，就不会执行了

setTimeout(() => this.backButtonPressed = false, 2000);

}

}

}

注意：

之前我写的是let activeNav: NavController = this.appCtrl.getActiveNav();

但是在新版中，getActiveNav() 这个方法被移除了，所以需要改为以下方法let activeNav: NavController = this.appCtrl.getActiveNavs()[0];

2.修改 app.module.ts

导入 BackButtonService，并添加到 providers 里

3.修改 Tabs

Tabs.html把修改为

Tabs.ts

这是修改了的部分，可以看看都改动了哪些引入ViewChild、Platform、Tabs、BackButtonService

@ViewChild('myTabs') tabRef: Tabs;this.platform.ready().then(() => {  this.backButtonService.registerBackButtonAction(this.tabRef);

});

完整版import { Component, ViewChild } from '@angular/core';import { Platform, Tabs } from 'ionic-angular';import { HomePage } from '../home/home';import { SettingPage } from "../setting/setting";import { BackButtonService } from "../../services/backButton.service";

@Component({  templateUrl: 'tabs.html'})export class TabsPage {

tabRoots: Object[];

@ViewChild('myTabs') tabRef: Tabs;  constructor(public backButtonService: BackButtonService,

private platform: Platform) {    this.tabRoots = [

{        root: HomePage,        tabTitle: 'Home',        tabIcon: 'home'

},

{        root: SettingPage,        tabTitle: '设置',        tabIcon: 'person'

}

];    this.platform.ready().then(() => {      this.backButtonService.registerBackButtonAction(this.tabRef);

});

}

}platform.ready().then 主要是为了保证能注册上，因为如果不是 ready 状态有可能会失败

4.Login

Login.ts

这是修改了的部分，可以看看都改动了哪些引入Platform、BackButtonService

this.platform.ready().then(() => {  this.backButtonService.registerBackButtonAction(null);

});

完整版import { Component } from '@angular/core';import { IonicPage, ModalController} from 'ionic-angular';import { TabsPage } from "../tabs/tabs";import { Platform } from 'ionic-angular';import { BackButtonService } from "../../services/backButton.service";

@IonicPage()

@Component({  selector: 'page-login',  templateUrl: 'login.html',

})export class LoginPage {  constructor(public modalCtrl: ModalController,

private backButtonService: BackButtonService,

private platform: Platform) {      this.platform.ready().then(() => {          this.backButtonService.registerBackButtonAction(null);

});

}

ionViewDidLoad() {    console.log('ionViewDidLoad LoginPage');

}

logIn(username: HTMLInputElement, password: HTMLInputElement) {    if (username.value.length == 0) {

alert("请输入账号");

} else if (password.value.length == 0) {

alert("请输入密码");

} else {      let userinfo: string = '用户名：' + username.value + '密码：' + password.value;

alert(userinfo);      let modal = this.modalCtrl.create(TabsPage);

modal.present();

}

}

}这里的 registerBackButtonAction 传了一个 null 进去，回去看看 backButton.service.ts 的判断，我们就可以知道，这里是为了让他能执行双击退出操作

5.使用安卓手机测试//执行这两句$ ionic cordova platform add android

$ ionic cordova build android

接下来就可以运行了，我这边是直接打开 Android Studio 装到手机运行的，亲测有效。试一试吧

作者：Snorlax丶

链接：https://www.jianshu.com/p/02f190059aaa