碼云Git：Ionic4_Tabs

ionic4_tabs 默認情況：
1、在登錄界面，點擊【安卓返回鍵】，無反應(yīng)。
2、在Tabs選項卡界面，點擊【安卓返回鍵】，無反應(yīng)。
3、在子頁面，點擊【安卓返回鍵】，返回上一層。

Bug場景：
在選項卡Tab"我的"界面，有一個【重新登錄】按鈕，點擊【重新登錄】，跳轉(zhuǎn)到登錄界面，點擊【安卓返回鍵】，返回選項卡Tab"我的"界面了，邏輯不對，如下圖。

bug.gif

Bug處理：
1、在登錄界面，點擊【安卓返回鍵】，最小化APP。
2、在Tabs選項卡界面，點擊【安卓返回鍵】，提示2秒內(nèi)再點【安卓返回鍵】，退出APP。
3、在子頁面，點擊【安卓返回鍵】，返回上一層。
4、選項卡Tab"我的"界面，點擊【重新登錄】，跳轉(zhuǎn)到登錄界面，點擊【安卓返回鍵】，最小化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; // 用于判斷返回鍵是否觸發(fā)

  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調(diào)試工具
    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("再按一次退出應(yīng)用！", "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、若在登錄界面，點擊【安卓返回鍵】，就是觸發(fā)login.page.ts里的androidLoginBack()，最小化APP；
2、若在Tabs界面，就是監(jiān)聽【安卓返回鍵】，雙擊【安卓返回鍵】，退出APP；
3、若在子頁面，就是退回上一層。