前几天测出了一个问题,就是在根目录点击安卓的硬件返回键,会直接导致程序退出。在网上找到了 小军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