前言
之前在这里介绍了ionic3如何处理android返回按钮
ionic4和ionic3关于android返回按钮的处理是不一样的,而且有点坑,所以本文介绍一下
效果演示
android onclick、如下gif,所有返回操作,包括关闭alert等弹出框都是点击android硬件返回按钮的效果
处理逻辑
点击返回按钮判断当前页面是否有弹出层打开,如果有则关闭,否则判断当前页面是否是根页面,如果不是根页面就“调用”页面返回方法,如果是根页面就调用插件最小化app(我这里使用最小化,你可以做按两次退出提示)
1.是否弹出层:alert、action、popover、modal等属于弹出层,需要手动关闭
2.是否是根页面:一般是登录页或tabs的一级页面
android系统返回键、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,
android按钮点击事件。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',
android设置按钮点击事件、styleUrls: ['tabs.page.scss']
})
export class TabsPage implements OnInit {
@ViewChild('tabs') tabs: IonTabs;
tabsCanGoBack = false;
js自动触发按钮点击、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) {
android点击事件传递机制、}
ngOnInit() {
this.platform.backButton.subscribe(() => {
this.tabsCanGoBack = this.tabs.outlet.canGoBack();
this.tabsParentCanGoBack = this.tabs.outlet.parentOutlet.canGoBack();
PPT返回动作按钮怎么设置?this.androidBackButtonHandle();
});
}
async androidBackButtonHandle() {
try {
java点击按钮触发事件。const alert = await this.alertCtrl.getTop();
if (alert) {
alert.dismiss();
return;
}
android按钮监听事件,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下来方便查看,每次看之前,先更新一波,因为随时更新
版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。
工作时间:8:00-18:00
客服电话
电子邮件
admin@qq.com
扫码二维码
获取最新动态