android自动触发返回,ionic4处理android返回按钮事件

前言

之前在这里介绍了ionic3如何处理android返回按钮

ionic4和ionic3关于android返回按钮的处理是不一样的，而且有点坑，所以本文介绍一下

效果演示

如下gif，所有返回操作，包括关闭alert等弹出框都是点击android硬件返回按钮的效果

处理逻辑

点击返回按钮判断当前页面是否有弹出层打开，如果有则关闭，否则判断当前页面是否是根页面，如果不是根页面就“调用”页面返回方法，如果是根页面就调用插件最小化app(我这里使用最小化，你可以做按两次退出提示)

1.是否弹出层：alert、action、popover、modal等属于弹出层，需要手动关闭

2.是否是根页面：一般是登录页或tabs的一级页面

3.调用页面返回方法：ionic3是我们手动调用NavController.pop()；ionic4我们判断当前不是根页面，不用做处理，ionic4是会自动调用返回

4.调用插件最小化app：使用App Minimize插件

核心代码

tabs.page.html添加#tabs

完整的tabs.page.ts代码

import { Component, OnInit, ViewChild } from '@angular/core';

import {

ActionSheetController,

AlertController,

Events,

IonTabs,

MenuController,

ModalController, Platform,

PopoverController

} from '@ionic/angular';

import { Helper } from '../../providers/Helper';

import { NativeService } from '../../providers/NativeService';

@Component({

selector: 'app-tabs',

templateUrl: 'tabs.page.html',

styleUrls: ['tabs.page.scss']

})

export class TabsPage implements OnInit {

@ViewChild('tabs') tabs: IonTabs;

tabsCanGoBack = false;

tabsParentCanGoBack = false;

constructor(public platform: Platform,

public events: Events,

public helper: Helper,

public native: NativeService,

public alertCtrl: AlertController,

public modalCtrl: ModalController,

public menuCtrl: MenuController,

public actionSheetCtrl: ActionSheetController,

public popoverCtrl: PopoverController) {

}

ngOnInit() {

this.platform.backButton.subscribe(() => {

this.tabsCanGoBack = this.tabs.outlet.canGoBack();

this.tabsParentCanGoBack = this.tabs.outlet.parentOutlet.canGoBack();

this.androidBackButtonHandle();

});

}

async androidBackButtonHandle() {

try {

const alert = await this.alertCtrl.getTop();

if (alert) {

alert.dismiss();

return;

}

const action = await this.actionSheetCtrl.getTop();

if (action) {

action.dismiss();

return;

}

const popover = await this.popoverCtrl.getTop();

if (popover) {

popover.dismiss();

return;

}

const modal = await this.modalCtrl.getTop();

if (modal) {

modal.dismiss();

return;

}

const isOpen = await this.menuCtrl.isOpen();

if (isOpen) {

this.menuCtrl.close();

return;

}

if (!this.tabsCanGoBack && !this.tabsParentCanGoBack) {

this.native.appMinimize();

return;

}

} catch (error) {

}

}

}

需要注意的问题

在tabs.page.ts中使用this.platform.backButton.subscribe订阅android返回按钮事件，注意避免使用redirectTo路由重定向到TabsPage，否则会重复订阅，因为platform是全局的

默认情况下若不在根页面，ionic4会自动调用返回，但不会自动关闭弹出层，并且弹出层是异步操作。所以如下代码先获取当前路由和父路由看是否为根页面，然后在处理弹出层

// 先判断是否能返回，不能返回则认为是根页面

this.tabsCanGoBack = this.tabs.outlet.canGoBack();

this.tabsParentCanGoBack = this.tabs.outlet.parentOutlet.canGoBack();

// 处理弹出层

this.androidBackButtonHandle();

// 如果有弹出层打开，则关闭并return

const alert = await this.alertCtrl.getTop();

if (alert) {

alert.dismiss();

return;

}

......

// 如果没有弹出层打开则最小化app

if (!this.tabsCanGoBack && !this.tabsParentCanGoBack) {

this.native.appMinimize();

return;

}

你以为就这样就结束了？图样图森破

当app启动，第一个页面是登录页，这时还没有加载tabs.page.ts，也就没有订阅android返回按钮事件，那这时候点击返回按钮没有任何反应。所以如下图在app.component.ts应用入口处理一下

也许你会问为何不统一在app.component.ts中处理路由？因为在app.component.ts中获取不到tabs路由

那你可能会想当tabs.page.ts加载后，把tabs路由赋值给全局变量，然后在app.component.ts中统一处理，那确实应该没问题，本文只是说明各种情况，后面我的代码也可能优化

最后

我的完整代码在github ionic4_tabs，请clone下来方便查看，每次看之前，先更新一波，因为随时更新