Ionic 4: 硬件返回按钮重新加载应用程序

Question

在项目中遇到问题：

硬件返回按钮重新加载应用程序（我在此应用程序中使用Angular路由器）。

退出应用程序的代码：

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

  ionViewWillLeave(){
        this.subscription.unsubscribe();
  }

在其他应用程序中，相同的逻辑可以正常工作。但在这个应用程序中，它会重新加载应用程序而不是退出应用程序。

附言：我也尝试将其放入 platform.ready() 中，但没有成功。

- Najam Us Saqib

Answer 1

在 IONIC 4 中，有一个新方法 subscribeWithPriority 被开发出来用于处理软件和硬件返回按钮之间的竞争。请尝试像下面这样修改您的代码:

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

subscribeWithPriority() 在事件执行后停止其传播，如果我们使用高优先级进行订阅并执行自定义导航而不是默认导航，则它将按您所需的方式工作。

详细的参考文档：
https://github.com/ionic-team/ionic/commit/6a5aec8b5d76280ced5e8bb8fd9ea6fe75fe6795
https://medium.com/@aleksandarmitrev/ionic-hardware-back-button-nightmare-9f4af35cbfb0

更新：

• 尝试使用此cordova插件的新版本exitApp。我自己没有尝试过，但从受欢迎程度来看，似乎很有前途。
• 还可以尝试从Navcontroller中清空页面堆栈或转到主屏幕，因为这似乎会导致带有侧栏菜单和选项卡页面的应用程序重新加载... this.navCtrl.pop() / this._navCtrl.navigateBack('HomeScreen')，然后调用exitApp。

注意：选项卡和侧边栏因具有自己的路由模块而导航复杂性很大。

- Amith Kumar

---

不起作用。抱歉我在问题中没有提到我已经尝试过subscribeWithPriority()。 - Najam Us Saqib

看起来你好像没有尝试过使用subscribeWithPriority :) - rtpHarry

@NajamusSaqib - 抱歉我一直忙于自己的项目，现在更新了我的答案并提供了一些你可以尝试的方法。 - Amith Kumar

this.platform.exitApp() 未定义。 - Najam Us Saqib

Answer 2

已解决：

正如@rtpHarry所提到的，侧边菜单/标签的模板具有历史记录，这会导致应用程序在根页面上重新加载。我通过清除历史记录来解决了这个问题。

ionViewDidEnter(){
  navigator['app'].clearHistory();    
}

在您的根页面上，只需清除浏览历史记录，您的硬件返回按钮就会关闭应用程序而不是重新加载它。

- Najam Us Saqib

Answer 3

您的应用程序中是否有侧边菜单？我只是好奇，因为这似乎是我遇到这个问题的时候。

如果您查看检查器，您会发现window.history的长度为1。

在我的某些应用程序中，我没有看到它，但是我设置了侧边菜单的应用程序会表现出这种方式-在主页上，如果按下返回键，屏幕会变白，然后重新加载应用程序。

就像我说的，查看检查器显示有一个历史记录可以回退，它正在尝试做的是，无论历史步骤是什么，它都会将其向前推回主页，这让我想知道它是否是侧边菜单设置自己控制导航系统的方式。

我可能使用了一些措辞不当，但由于我自己没有解决这个问题，所以我想告诉您我找到的东西...希望它能帮助您前进。

在我的情况下，我甚至没有尝试退出后退代码-我只是注意到如果我不断按返回键，应用程序似乎会“重新启动”。

- rtpHarry

---

这是一个基于TAB的应用程序。我会查找这个历史记录长度。谢谢。 - Najam Us Saqib

是的，我检查过了。历史记录长度为1。我的应用程序中有选项卡。也许选项卡正在控制路由。 - Najam Us Saqib

如果这篇文章对你有所帮助但并没有完全解决问题，请考虑点赞，这将有助于我获得ionic4徽章并让我感到高兴 :) 我希望你能解决这个问题，因为它一直困扰着我。我怀疑这实际上是Ionic本身的一个bug。如果我没记错的话，它并不总是出现 - 可能在浏览器上运行时没问题，但安装为应用程序时会出现 - 不能确定是否是这个原因。 - rtpHarry

它在某种程度上帮助了我，但我现在无法解决这个问题。我正在深入研究。还有一件事，在模拟器（Android v9）中，返回按钮会关闭应用程序。但在真实设备（Android v7）中，应用程序会重新加载。因此，这可能与Android版本有关。 - Najam Us Saqib

是的，点赞意味着“这个答案很有用”（将鼠标悬停在点赞按钮上即可看到此内容），标记为答案意味着“这个答案完全解决了问题”。我的经验是，在我的华为P20 Pro上运行时会出现这种情况，但在浏览器中开发/测试时不会。 - rtpHarry

Answer 4

这段文字解释了Ionic 5（以及4.6+版本，我想也适用）的解决方案。

private backButtonSub: Subscription;

ionViewDidEnter() {
  this.backButtonSub = this.platform.backButton.subscribeWithPriority(
    10000,
    () => {
        // do your stuff
    }
  );
}

ionViewWillLeave() {
  this.backButtonSub.unsubscribe();
}

同时保留

IonicModule.forRoot({
  hardwareBackButton: true
}),

在你的app.module.ts中将其设置为true（默认值）

来源：

• https://www.damirscorner.com/blog/posts/20191122-CustomizingAndroidBackButtonInIonic4.html
• 文档

- Jackie Degl'Innocenti

---

我认为 IonicModule.forRoot({ hardwareBackButton: true }), 会在所有/任何页面上关闭应用程序。如果用户只想从根页面关闭应用程序而不是其他页面，该怎么办？ - Najam Us Saqib

感谢您的澄清问题，我会尽力回答。 "hardwareBackButton：true" 的属性涵盖了所有情况，因此您始终可以为当前视图设置自定义行为，并在某些情况下转发视图关闭请求或以其他方式处理它。 - Jackie Degl'Innocenti

感谢解释，我将在一些场景中进行测试并告诉您结果。 - Najam Us Saqib