ionic3按两次关闭（typescript语言）

最新推荐文章于 2022-07-06 20:57:16 发布

是阿晋啊

最新推荐文章于 2022-07-06 20:57:16 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic 软件文章标签： html ionic typescript

本文链接：https://blog.youkuaiyun.com/qq_38255285/article/details/87942837

软件同时被 2 个专栏收录

19 篇文章

订阅专栏

ionic

4 篇文章

订阅专栏

在 Ionic3 应用中，通过 TypeScript 实现了全局事件监听，当用户在两秒内连续点击关闭键（自定义按键或返回键），程序将退出。主要操作包括在 app.component.ts 中添加事件监听，修改前端代码，定义提示框函数，并在 setting.ts 文件中进行全局变量设置，确保按键和返回键行为一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于是全局事件，所以直接在app.component.ts中写

头文件中添加

import { Platform, ToastController} from 'ionic-angular';
import { SettingsProvider } from '../providers/settings/settings';

然后进行定义

 backButtonPressed: boolean = false;  //用于判断返回键是否触发
  @ViewChild('myNav') nav:Nav;

前端改为：

<ion-nav [root]="rootPage" [class]="selectedTheme" #myNav [root]="rootPage"></ion-nav>

构造函数

 constructor(platform: Platform, 
    statusBar: StatusBar, 
    splashScreen: SplashScreen,
    public platform1: Platform, 
    public ionicApp: IonicApp, 
    public settings:SettingsProvider,
    public toastCtrl: ToastController) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      this.registerBackButtonAction();//注册返回按键事件
    });
  }

下面定义的两个函数，分别是事件和提示框

 registerBackButtonAction() {
    this.platform1.registerBackButtonAction(() => {
      let activePortal = this.ionicApp._modalPortal.getActive();
      if (activePortal) {
        activePortal.dismiss().catch(() => {});
        activePortal.onDidDismiss(() => {});
        return;
      }
      let activeVC = this.nav.getActive();
      let tabs = activeVC.instance.tabs;
      let activeNav = tabs.getSelected();
      return activeNav.canGoBack() ? activeNav.pop() : this.showExit()
    }, 1);
  }

  //双击退出提示框
  showExit() {
    if (this.settings.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP
      this.platform1.exitApp();
    } else {
      this.toastCtrl.create({
        message: '再按一次退出应用',
        duration: 2000,
        position: 'top'
      }).present();
      this.settings.backButtonPressed = true;
      setTimeout(() => this.settings.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
    }
  
  }

想设立关闭键

setting.html界面

<button ion-item (click)= "Appdimiss()">
        <ion-icon name="close-circle" item-start color="dark"></ion-icon>
        <ion-label>关闭</ion-label>
</button>

页面的setting.ts文件

导入

import { SettingsProvider } from '../../providers/settings/settings';
import { Platform, IonicPage, NavController, NavParams, ViewController,IonicApp,ToastController} from 'ionic-angular';

构造

public settings:SettingsProvider,
public platform1: Platform, 
public toastCtrl: ToastController,

函数

  Appdimiss(){
    if (this.settings.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP
      this.platform1.exitApp();
    } else {
      this.toastCtrl.create({
        message: '再按一次退出应用',
        duration: 2000,
        position: 'top'
      }).present();
      this.settings.backButtonPressed = true;
      setTimeout(() => this.settings.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
    }
  }

providers里面的setting.ts，目的是设置为全局变量，使按键和返回键行使统一效果

  public backButtonPressed: boolean = false;

这样无论是按我们设置的按键还是返回键，在两秒内按另一个都可以结束程序。

效果图：