ionic4 安卓物理返回键处理

码云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的里加上一个隐藏的input：

在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、若在子页面，就是退回上一层。