离子电容器硬件后退按钮会自动关闭应用程序

Question

我当前的设置是：

@电容器/核心：3.0.0， @ionic-native/核心：5.0.7

我正在尝试更改应用程序的行为，以不关闭应用程序，而是返回导航堆栈。据我所知，Android 设备上的硬件后退按钮不会自动关闭应用程序，直到我将 Capacitor 升级到 3.0.0

让我感到困惑的是，我如何拥有绝对 0 代码来处理后退按钮功能，并且从我在线搜索的所有内容来看，后退按钮默认情况下不执行任何操作，不会自动关闭应用程序作为默认值（正如我的似乎）正在做的事情）。我已经搜索了所有项目文件以查找与“platform”、“backButton”和“App.Exit”有关的任何内容，但无法找到任何可能导致应用程序关闭的代码。

我尝试使用下面的代码订阅后退按钮按下事件，但它从未运行。应用程序将关闭，而不是显示警报对话框。我已将优先级从 0、10 和 99 更改为（Ionic 文档中列出的所有优先级）

this.platform.backButton.subscribeWithPriority(10, () => {
  alert('Back button pressed!');
});

Answer 1

1. 安装电容器应用程序。

   npm install @capacitor/app

2. 导入它。

   import { App as CapacitorApp } from '@capacitor/app';

3. 如果可以返回，则添加返回监听器，然后我们可以返回或退出应用程序。

   CapacitorApp.addListener('backButton', ({canGoBack}) => {
     if(!canGoBack){
       CapacitorApp.exitApp();
     } else {
       window.history.back();
     }
   });
   

Answer 2

所以，意识到这一点后我感觉有点愚蠢，但这是因为我必须运行以下命令，因为我在升级 Capacitor 时显然没有更新它们。确保您的所有插件均已完全更新，您的插件可能与我的不同。

npm install @capacitor/app
npx cap sync

Answer 3

我遇到了同样的问题，我尝试安装所有插件，就像它所说的那样here

npm install @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar

安装完成后，仍然出现错误。我的 PushNotifications 插件也无法工作。

我的问题是我忘记从

OnCreate

中删除

MainActivity.java

方法。因此，如果您在安装插件后仍然遇到问题，请尝试删除

OnCreate

方法，以便您的

MainActivity.java

看起来像这样：

 public class MainActivity extends BridgeActivity {}

查看更多这里。

它还修复了我的 PushNotifications 插件。

如果我理解正确的话，如果你有任何未正确注册的插件，就会导致这种错误。 这个答案也对我有帮助。

Answer 4

https://stackoverflow.com/a/69084017/19086322

这篇文章对我来说真的很好！！

在写这篇文章之前，我做了这些命令，在它起作用之后：

npm install @capacitor/app                                             
npx cap sync

Answer 5

我有同样的问题，并将 @capacitor/app 添加到我的应用程序可用于调试目的。问题是，当我构建发布应用程序时，它仍然会关闭该应用程序。

--- 编辑 ---

我通过构建一个全新的 Ionic 应用程序（包含所有内容的最新版本）然后复制我的代码来解决这个问题。 我认为这确实与 Ionic 和 Capacitor 软件包的安装版本有关

Answer 6

您需要使用以下代码来处理 Ionic 应用程序中的硬件后退按钮：

//back button handle
//Registration of push in Android and Windows Phone
let lastTimeBackPress: number = 0;
let timePeriodToExit: number = 2000;

platform.registerBackButtonAction(() => {

    //Double check to exit app
    if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
        //this.platform.exitApp(); //Exit from app

        this.appMinimize.minimize().then(() => {
            console.log('minimized successfully');
        });
    } else {

        this.toastCtrl.create({
            message: this.translate.instant('EXIT_APP_MESSAGE'),
            duration: 3000,
            position: 'bottom'
        }).present();

        lastTimeBackPress = new Date().getTime();
    }
});

Answer 7

对于安卓：

import android.webkit.WebView;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    //in my case I call it the JS function when I press the back button
    @Override
    public void onBackPressed() {
        WebView webView = getBridge().getWebView();

        webView.loadUrl("javascript:pressBack()");

        // in Index.html create tag
        //<script type="text/javascript">
        //   function  pressBack(){
        //      alert('yes!!')
        //   } 
        //</script>

        return;
    }
}

Answer 8

当我在下一个 15 个应用程序路由器的 useEffect 中使用下面的 addListener 时，它工作正常。 （可以用客户端放内页）。

useEffect(() => {
CapacitorApp.addListener("backButton", ({ canGoBack }) => {
  if (!canGoBack) {
    CapacitorApp.exitApp(); // Exit the app
  } else {
    window.history.back(); // Navigate back
  }
});

return () => {
  CapacitorApp.removeAllListeners("backButton"); // Clean up listener
};

}, []);