码云Git：Ionic4_Tabs
ionic4_tabs 默认情况：
1、在登录界面，点击【安卓返回键】，无反应。
2、在Tabs选项卡界面，点击【安卓返回键】，无反应。
3、在子页面，点击【安卓返回键】，返回上一层。
Bug场景：
在选项卡Tab"我的"界面，有一个【重新登录】按钮，点击【重新登录】，跳转到登录界面，点击【安卓返回键】，返回选项卡Tab"我的"界面了，逻辑不对，如下图。
bug.gif
Bug处理：
1、在登录界面，点击【安卓返回键】，最小化APP。
2、在Tabs选项卡界面，点击【安卓返回键】，提示2秒内再点【安卓返回键】，退出APP。
3、在子页面，点击【安卓返回键】，返回上一层。
4、选项卡Tab"我的"界面，点击【重新登录】，跳转到登录界面，点击【安卓返回键】，最小化APP。
在login.page.html的<ion-content></ion-content>里加上一个隐藏的input：
<input id="loginAndroidBack" type="hidden" (click)='androidLoginBack()' />
在login.page.ts：
//安卓返回键
androidLoginBack(){
this.appMinimize.minimize();//登录界面点击【安卓返回键】，最小化APP
}
在app.component.ts里：
import { Component, HostListener } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import VConsole from 'vconsole';
import { Device } from '@ionic-native/device/ngx';
import { Router, NavigationEnd } from '@angular/router';
import { TabsService } from './service/TabsService';
import { AppMinimize } from '@ionic-native/app-minimize/ngx';
import { Toast } from '@ionic-native/toast/ngx';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
providers: [Device, StatusBar, SplashScreen, AppMinimize]
})
export class AppComponent {
backButtonPressed = false; // 用于判断返回键是否触发
constructor(private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private device: Device,
private router: Router,
private toast: Toast,
private tabsService: TabsService,
private appMinimize: AppMinimize, ) {
var vConsole = new VConsole(); //VConsole调试工具
this.initializeApp();
this.androidBack();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
//安卓返回按钮事件
androidBack() {
this.platform.backButton.subscribe(() => {
console.log("路由url：" + this.router.url);
if (this.router.url === '/') { //login.page.html点击[安卓返回键]，最小化APP
this.appMinimize.minimize();
} else if (this.router.url === '/tabs/home' || this.router.url === '/tabs/recommend' ||
this.router.url === '/tabs/find' || this.router.url === '/tabs/me') { //Tabs选项卡，双击退出APP
if (this.backButtonPressed) {
navigator['app'].exitApp();
} else {
this.toast.show("再按一次退出应用！", "2000", 'center').subscribe(); // 提示toast
this.backButtonPressed = true;
setTimeout(() =>{
this.backButtonPressed = false
} , 2000);
}
} else { //子页面，返回上一层
window.history.back();
}
});
}
@HostListener('document:ionBackButton', ['$event'])
private overrideHardwareBackAction($event: any) {
$event.detail.register(100, async () => {
let tmp = document.getElementById("loginAndroidBack");
if (tmp) {
tmp.click(); //login.page.html点击[安卓返回键]，最小化APP
}
});
}
}
解释一下：
上面代码就是重写了安卓返回键逻辑：
1、若在登录界面，点击【安卓返回键】，就是触发login.page.ts里的androidLoginBack()，最小化APP；
2、若在Tabs界面，就是监听【安卓返回键】，双击【安卓返回键】，退出APP；
3、若在子页面，就是退回上一层。
