【问题标题】:Ionic 4: Hardware Back Button Reloading ApplicationIonic 4:硬件后退按钮重新加载应用程序
【发布时间】:2019-12-28 21:49:03
【问题描述】:

从事项目并陷入问题:

硬件后退按钮重新加载应用程序(我在此应用程序中使用 Angular 路由器)。

我的退出应用程序代码:

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

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

虽然相同的逻辑在其他应用程序中工作。但在这个应用程序中,它重新加载应用程序而不是退出它。

P.S:我也尝试将它放入 platform.ready() 但没有运气。

【问题讨论】:

    标签: android angular ionic-framework ionic4


    【解决方案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

    更新:

    • 尝试使用这个新版本的 exitApp cordova plugin。我没有 尝试过自己,但从受欢迎程度来看很有希望。
    • 还尝试从 Navcontroller 清空页面堆栈或转到您的主屏幕,似乎这会导致带有侧边菜单和标签页的应用程序重新加载...this.navCtrl.pop() / this._navCtrl.navigateBack('HomeScreen'),然后调用exitApp

    注意:选项卡和边菜单,因为它们有自己的路由模块,确实会增加应用导航的复杂性。

    【讨论】:

    • 不工作。抱歉,我没有在我的问题中提到我已经尝试过subscribeWithPriority()
    • 看起来不像你说你试过subscribeWithPriority :)
    • @NajamusSaqib - 抱歉一直忙于我的项目,用您可以尝试的某些事情更新了我的答案。
    • this.platform.exitApp() 未定义。
    【解决方案2】:

    已解决:

    正如@rtpHarry 提到的 SideMenu / 选项卡模板具有历史记录,这会导致应用程序在根页面上自行重新加载。我可以通过清除历史来解决这个问题。

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

    在您的根页面上,只需清除您的历史记录,您的硬件后退按钮将关闭应用程序而不是重新加载它。

    【讨论】:

      【解决方案3】:

      您的应用中有侧边菜单吗?我只是好奇,因为这似乎也是我遇到这个问题的时候。

      如果您查看检查器,您会看到 window.history 的长度为 1。

      我在某些应用程序中看不到它,但我有一个侧边菜单设置的应用程序会以这种方式运行 - 在主页上,如果您按下返回,屏幕会变白,然后它会重新加载应用程序。

      就像我说的那样,在检查器中查看显示有一个历史可以退回到,它正在尝试做,而无论那个历史步骤是什么,它只是将它推回到主页,这让我想知道如果它是设置自己控制导航系统的侧边菜单。

      我可能说了一些措辞不佳的术语,但由于我自己还没有解决这个问题,所以我想我会告诉你我发现了什么......希望它可以帮助你继续前进。

      在我的场景中,我什至没有尝试执行退出代码 - 我只是注意到如果我一直按回,应用程序似乎会“重新启动”。

      【讨论】:

      • 其基于 TABS 的应用程序。我会寻找这个历史长度。谢谢
      • 是的,我查过了。历史的长度为 1。我的应用中有标签。可能是标签正在控制路由。
      • 如果这有助于但没有完全解决它,请考虑投票,它计入我的 ionic4 徽章并让我高兴 :) 我希望你能弄清楚,因为它一直在困扰我。我怀疑它实际上是 Ionic 本身的一个错误。如果我没记错的话,它不会一直这样做——也许在浏览器上运行它很好,但作为应用程序安装它就可以——不能确定它是否是这样。
      • 它对我有部分帮助,但我现在无法解决这个问题。深入研究它。还有1件事。在 Emulator(Android v9) 中关闭应用程序的后退按钮。但在真实设备(Android v7)应用程序重新加载本身。所以它可能与android版本有关。
      • 是的,upvote 表示“这个答案很有用”(将鼠标悬停在 upvote 按钮上可以看到这个),标记为 answer 表示“这个答案完全解决了问题”。我的经验是,当我在我的 huawei p20 pro 上运行它时,它会这样做,但当我在浏览器中开发/测试它时却不是。
      【解决方案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(默认)

      来源:

      【讨论】:

      • 我认为IonicModule.forRoot({ hardwareBackButton: true }), 将关闭所有/任何页面上的应用程序。如果用户只想从根页面而不是其他页面关闭应用程序怎么办?
      • 感谢您的问题澄清,我会尽力回答。 "hardwareBackButton: true" 的适用性涵盖了所有情况,您始终可以为当前视图设置自定义行为,因此在相同情况下转发视图关闭请求或在其他情况下以不同方式处理。跨度>
      • 感谢您的解释,我会在我的一些场景中测试它并让您知道结果。
      猜你喜欢
      • 2019-05-01
      • 1970-01-01
      • 2014-12-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-15
      • 2020-03-03
      相关资源
      最近更新 更多