1:引入Platform、ToastController、 Nav、 NavController
import { Platform, ToastController, Nav, NavController} from '@ionic/angular';
2:安装AppMinimize(可以最小化Android设备上的应用程序)
$ ionic cordova plugin add cordova-plugin-appminimize
$ npm install --save @ionic-native/app-minimize@beta
import {AppMinimize} from '@ionic-native/app-minimize/ngx';
注意因为是ionic4测试版本所以app-minimize后面要加@beta,以及引入的时候后面要加ngx
3:引入Subscription、SplashScreen、StatusBar
Subscription(https://segmentfault.com/a/1190000005059624)
SplashScreen(https://beta.ionicframework.com/docs/native/splash-screen/)
StatusBar(https://beta.ionicframework.com/docs/native/status-bar/)
import {Subscription} from 'rxjs';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
3:在需要监听返回按钮的页面引入AppMinimize
import {AppMinimize} from "@ionic-native/app-minimize/ngx";
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
providers:[AppMinimize]
})
constructor(
public platform: Platform,
private appMinimize: AppMinimize,
) {}
4:在app.module里面引入BackButtonService服务
import {BackButtonService} from './core/service/back-button.service';
providers: [
BackButtonService
]
5:代码
有this.platform.registerBackButtonAction(()=>{do something…})代码报错的情况。
是因为ionic4测试版本缺少注册自定义后退操作的功能platform.registerBackButtonAction,这个功能还没有被迁移,将功能platform.registerBackButtonAction迁移到ionic4
代码需要像以下一样进行迁移:
export class AppComponent {
backButtonPressed: boolean = false; //用于判断返回键是否触发
customBackActionSubscription: Subscription;
constructor(
private platform: Platform,
private appMinimize: AppMinimize,//可以最小化Android设备上的应用程序
private app: App,
public navController:NavController,//导航控制器
public toastCtrl: ToastController,
) {
this.initRouterListen();
this.platform.ready().then(() => {
StatusBar.styleDefault(); // 管理本机状态栏的外观,styleDefault使用默认状态栏(深色文本,浅色背景)。
SplashScreen.hide(); // 显示和隐藏启动画面。
this.registerBackButtonAction(); // 注册返回按键事件
this.platform.resume.subscribe(); // 弹出框
});
}
registerBackButtonAction () {
this.customBackActionSubscription = this.platform.backButton.subscribe(() => {
if (this.backButtonPressed) {
this.appMinimize.minimize();
console.log('最小化');
this.backButtonPressed = false;
} else {
alert('再按一次退出应用');
this.backButtonPressed = true;
setTimeout(() => this.backButtonPressed = false, 2000);
}
}, 1);
}
}
但是如果子页面返回的话应该先返回到主页面,然后在主页面点击退出
首先监听路由路径
import {Router, NavigationEnd} from '@angular/router';
constructor(private router: Router) {}
this.router.events.subscribe(event =>{
if(event instanceof NavigationEnd){
this.url = event.url //this.url就是当前路由路径
}
})
registerBackButtonAction() {
this.customBackActionSubscription = this.platform.backButton.subscribe(() => {
if (this.url === '/home' || this.url === '/map' || this.url === '/camera') {
if (this.backButtonPressed) {
this.appMinimize.minimize();
this.backButtonPressed = false;
} else {
alert('再按一次退出应用');
this.backButtonPressed = true;
setTimeout(() => this.backButtonPressed = false, 2000);
}
} else {
this.navController.goBack();
}
}, 1);
}
全部代码
import {Component, ViewChild} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {Platform, ToastController, Nav, App, NavController, Tabs} from '@ionic/angular';
import {AppMinimize} from '@ionic-native/app-minimize/ngx';
import {Subscription} from 'rxjs';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [AppMinimize, App]
})
export class AppComponent {
sideMenuDisabled = true;
backButtonPressed: boolean = false; //用于判断返回键是否触发
customBackActionSubscription: Subscription;
url;
constructor(
private platform: Platform,
private router: Router,
private appMinimize: AppMinimize,//可以最小化Android设备上的应用程序
private app: App,
public navController: NavController,//导航控制器
public toastCtrl: ToastController,
) {
this.initRouterListen();
this.platform.ready().then(() => {
StatusBar.styleDefault();//管理本机状态栏的外观,styleDefault使用默认状态栏(深色文本,浅色背景)。
SplashScreen.hide(); //显示和隐藏启动画面。
this.registerBackButtonAction();//注册返回按键事件
this.platform.resume.subscribe();//弹出框
});
}
registerBackButtonAction() {
this.customBackActionSubscription = this.platform.backButton.subscribe(() => {
if (this.url === '/home' || this.url === '/map' || this.url === '/camera') {
if (this.backButtonPressed) {
this.appMinimize.minimize();
this.backButtonPressed = false;
} else {
alert('再按一次退出应用');
this.backButtonPressed = true;
setTimeout(() => this.backButtonPressed = false, 2000);
}
} else {
this.navController.goBack();
}
}, 1);
}
initRouterListen() {
this.router.events.subscribe(event => { // 需要放到最后一个执行
if (event instanceof NavigationEnd) {
this.url = event.url;
}
});
}
}