如何使用设备后退按钮退出 Ionic 4 应用程序？

Question

当我按下android设备上的后退按钮时，我想关闭应用程序，但什么也没发生，我通过将以下代码写入主页找到了解决方案。主页已加载到我的选项卡中，并且在关闭应用程序时确实有效。但它也会从所有其他页面关闭应用程序。请帮忙！

ionViewDidEnter() {
    this.subscription = this.platform.backButton.subscribe(() => {
      navigator["app"].exitApp();
    });
  }
  ionViewDidLeave() {
    this.subscription.unsubscribe();
  }

Answer 1

使用设备返回按钮退出 Ionic4 应用程序

我试过这个方法，对我来说效果很好。

当视图进入时，我将它订阅到变量中，当它离开时取消订阅。这样后退按钮上的退出应用程序将仅针对该特定页面执行。

constructor(private platform: Platform){}
backButtonSubscription;
ionViewWillEnter() {
  this.backButtonSubscription = this.platform.backButton.subscribe(async () => {
  navigator['app'].exitApp();
  });
 }
}
ionViewDidLeave() {
 this.backButtonSubscription.unsubscribe();
}

Answer 2

更新答案

Ionic4 似乎有些不同。他们添加了subscribeWithPriority() 功能。

你可以使用这个可以在首页设置的sn-p，让后退按钮退出：

 this.platform.backButton.subscribeWithPriority(1, () => {
        navigator['app'].exitApp();
 });

您可以轻松地为此敬酒，如果您在短时间内按两次它会退出超时，或者有一个确认按钮退出。

原答案

这是一个长镜头，但我最近正在寻找类似的东西。

我想要实现的功能是我在一些应用程序中看到的“再次按下以退出”。

这通常由用户完全按回应用程序的开头来触发。然后再次按下它会显示一个 toast 警告他们再次回来，您将退出应用程序。这会阻止用户意外退出应用程序。

我知道您正在寻找 Ionic 4，这也是我编写的代码，但我发现它被标记为 Ionic 3。它没有提及 Ionic 4，即使它最近更新了 2 个月以前，所以我想如果您仍在尝试解决此问题，您应该尝试一下：

• https://github.com/heidji/ionic3-android-backbutton

仅供参考，我在 Ionic Framework 论坛上的 lengthy discussion 末尾找到了这个。

Answer 3

如果您的意图是仅在主页上退出应用程序并在双击后退按钮后，这是对我有用的解决方案，它是来自https://www.youtube.com/watch?v=Ntql-JPIQW8 的代码的一部分。

代码

import { Component, ViewChild } from "@angular/core";
import { IonRouterOutlet, Platform, ToastController } from "@ionic/angular";
import { Location } from "@angular/common";

export class AppComponent {
  private lastBackTime: number = 0;
  private intervalExitApp: number = 2000;
  @ViewChild(IonRouterOutlet, { static: true }) routerOutlet: IonRouterOutlet;

  constructor(
    private platform: Platform,
    private toastController: ToastController,
    private location: Location
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.backButtonEvent();
    });
  }

  private backButtonEvent() {
    this.platform.backButton.subscribeWithPriority(10, () => {
      let currentTime = new Date().getTime();
      console.log("currentTime", currentTime);
      console.log("lastBackTime -> ", this.lastBackTime);
      console.log("Subtraction -> ", currentTime - this.lastBackTime);
      if (
        !this.routerOutlet.canGoBack() &&
        this.lastBackTime &&
        this.lastBackTime > 0 &&
        currentTime - this.lastBackTime < this.intervalExitApp
      ) {
        navigator["app"].exitApp();
        return;
      }
      if (!this.routerOutlet.canGoBack()) {
        this.createToastExitApp();
      } else {
        this.location.back();
      }
      console.log("backButton.subscribeWithPriority");
    });
  }

  private createToastExitApp() {
    this.toastController
      .create({
        message: this.getStringFromTranslateService(
          "toastMessage.message.exitApp"
        ),
        duration: 2000,
        color: "primary",
      })
      .then((toastEl) => {
        toastEl.present();
        this.lastBackTime = new Date().getTime();
      });
  }
}

Answer 4

试试这个。 在AppComponent里面initializeApp添加

this.platform.backButton.subscribeWithPriority(0, () => {
navigator['app'].exitApp();
});

例如

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.platform.backButton.subscribeWithPriority(0, () => {
        navigator['app'].exitApp();
       
     });
    });
  }