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下来方便查看,每次看之前,先更新一波,因为随时更新
android自动触发返回,ionic4处理android返回按钮事件相关推荐
- .Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化
原文:.Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化 我们知道资源被注册到R.java我们通过R.java就可以读取到界面中的组件.跟我们.net一样,通过ID来读取组件 ...
- android自动申请悬浮窗权限,Android 悬浮窗--无需权限
image.png 无需一切权限,不受各种国产ROM限制,默认可以显示的应用内悬浮窗. 应用内显示,无需申请任何权限 应用内显示,所有机型都可以默认显示悬浮窗,无需引导用户做更多设置 支持拖拽 超出屏 ...
- android 可编辑的表格框架,smartTable-一款android自动生成表格框架---A Android automatically generated table framework...
一款android自动生成表格框架功能介绍 1. 快速配置自动生成表格: 2. 自动计算表格宽高: 3. 表格列标题组合: 4. 表格固定左序列.顶部序列.第一行.列标题.统计行: 5. 自动统计,排 ...
- android自动接听电话并回复,android自动接听电话各种异常处理
public void autoAnswerPhone() { try { Log.i(TAG,"autoAnswerPhone"); ITelephony itelephony ...
- android 自动更新 服务端,搭建android版本更新服务器使用android系统自带的DownloadManager下载文件...
这几天想自己做一个文件更新的功能,但是由于不知道怎样写服务端,所以一直没有去做,后来发现原来服务端编写简直是太简单了,所以今天就实现了 版本更新的这样一个功能. 一搭建版本更新服务器: 搭建这个一个服 ...
- android 自动打包脚本,Jenkins实现Android自动化打包
1.Tomcat 进入 https://tomcat.apache.org/ 官网,下载最新的 tomcat 安装包并且安装. 安装完成后,启动 tomcat 后,在浏览器中输入 http://loc ...
- android自动测试2:使用android studio实现设备循环自动重启
一.前提: apk可以获得系统签名 二.适用: 需要对android设备进行循环重启测试 三.步骤: 1. AndroidManifest.xml中添加以下权限: <uses-permissio ...
- android 自动上下翻滚,如何让Android TextView自动向下滚动到最后?
我有一个TextView,其内容从文本文件中复制.现在每次将文本文件的内容加载到TextView中时,我都希望它自动向下滚动到最后. 这是我的布局XML文件的部分内容: android:id=&quo ...
- android 自动打开第三方应用程序,Android如何做到应用程序图标隐藏,由第三方程序显示启动...
Android如何做到应用程序图标隐藏,由第三方程序显示启动 发布时间:2020-07-13 03:25:02 来源:51CTO 阅读:11353 作者:ord1nary 在AndroidManife ...
最新文章
- LeetCode-两个结构分别遍历,然后合并
- Java Review - Java进程内部的消息中间件_Event Bus设计模式
- php mysql全能权威指南 pdf_《PHP+MySQL全能权威指南(配光盘)》怎么样_目录_pdf在线阅读 - 课课家教育...
- gnuradio android手机,如何搭配USRP在安卓设备上搭建GNU Radio
- 从客户的角度看网站涉及的第一要素
- android view滑动到顶部并固定在顶部
- mysql死锁的排查方法_MySQL死锁系列-线上死锁问题排查思路
- 基础算法 —— 高精度计算 —— 高精度除法
- hadoop学习——Hadoop核心组件
- php dsn port,PHP的InfluxDB客户端库使用
- torch中permute()函数用法
- python13文件_python中13个实用的文件操作
- Autodesk AutoCAD 2022 产品系列已发布(附下载)
- 【Scratch】进阶篇-《Scratch游戏开发》恐龙跳一跳
- pyaudio 声音处理
- 渗透测试技术_Nessus工具(一)Linux centos7下 Nessus8.13的下载、安装
- 安卓手机如何打开开发者模式?
- java 怎么做批量修改_JAVA实现批量修改文件名称
- Scala关键字lazy的理解和使用
- EXCEL的水文数据四舍六入修约
热门文章
- mysql limit函数
- How to Calibrate Battery And Charge Battery To Max
- MySQL数据库概述
- 您不知道Bash:Bash阵列简介
- (23)css3文字阴影text-shadow
- Less的@import指令
- sql注入mysql判断_sql注入笔记二——数据库信息判断
- C语言里面双分号是啥意思,问什么C程序里总是提示缺少分号;,而明明有分号?...
- macOS Big Sur 11当前存在的一些问题(更新中)
- React Native 开发豆瓣评分(六)添加字体图标