Question

我正面临一个问题，如何处理默认移动设备的后退按钮，该按钮在退出应用程序时检查确认，如果我按下后退按钮，则应调用一些显示弹出窗口的处理程序，以确认退出。或者有任何方法调用registerBackButtonAction（）？或者是如何在 IONIC 2 中使用它？请帮帮我。在此先感谢。

Answer 1

在app.component.ts

        @ViewChild(Nav) nav: Nav;

        constructor(private platform: Platform, private toastCtrl:   ToastController, private alertCtrl: AlertController) {
            platform.ready().then(() => {
              // Okay, so the platform is ready and our plugins are available.
              // Here you can do any higher level native things you might need

              platform.registerBackButtonAction(() => {


                //uncomment this and comment code below to to show toast and exit app
                // if (this.backButtonPressedOnceToExit) {
                //   this.platform.exitApp();
                // } else if (this.nav.canGoBack()) {
                //   this.nav.pop({});
                // } else {
                //   this.showToast();
                //   this.backButtonPressedOnceToExit = true;
                //   setTimeout(() => {

                //     this.backButtonPressedOnceToExit = false;
                //   },2000)
                // }

                if(this.nav.canGoBack()){
                  this.nav.pop();
                }else{
                  if(this.alert){ 
                    this.alert.dismiss();
                    this.alert =null;     
                  }else{
                    this.showAlert();
                   }
                }
              });
            });

          }

          showAlert() {
          this.alert = this.alertCtrl.create({
            title: 'Exit?',
            message: 'Do you want to exit the app?',
            buttons: [
              {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                  this.alert =null;
                }
              },
              {
                text: 'Exit',
                handler: () => {
                  this.platform.exitApp();
                }
              }
            ]
          });
          alert.present();
        }

          showToast() {
            let toast = this.toastCtrl.create({
              message: 'Press Again to exit',
              duration: 2000,
              position: 'bottom'
            });

            toast.onDidDismiss(() => {
              console.log('Dismissed toast');
            });

            toast.present();
          }

Answer 2

Ionic最新版本3.xx

app.component.ts档案：

import { Platform, Nav, Config, ToastController } from 'ionic-angular';

constructor(public toastCtrl: ToastController, public platform: Platform) {
    platform.ready().then(() => {
        //back button handle
        //Registration of push in Android and Windows Phone
        var lastTimeBackPress = 0;
        var timePeriodToExit  = 2000;

        platform.registerBackButtonAction(() => {
            // get current active page
            let view = this.nav.getActive();
            if (view.component.name == "TabsPage") {
                //Double check to exit app
                if (new Date().getTime() - lastTimeBackPress < timePeriodToExit) {
                    this.platform.exitApp(); //Exit from app
                } else {
                    let toast = this.toastCtrl.create({
                        message:  'Press back again to exit App?',
                        duration: 3000,
                        position: 'bottom'
                    });
                    toast.present();
                    lastTimeBackPress = new Date().getTime();
                }
            } else {
                // go to previous page
                this.nav.pop({});
            }
        });
    });
}

Answer 3

Platform api有一个处理程序registerBackButtonAction。

您可以执行以下操作：

在app.component.ts

    constructor(platform: Platform){
     platform.ready().then(()=>{
       platform.registerBackButtonAction(()=>this.myHandlerFunction());
})


  myHandlerFunction(){
    //create alert
     }

Answer 4

这是我已解决并正在运行的代码。谢谢大家。

constructor(platform: Platform,public alertCtrl: AlertController,public toastCtrl:ToastController) {
    platform.ready().then(()=>{
       platform.registerBackButtonAction(()=>this.myHandlerFunction());
       StatusBar.styleDefault();
      Splashscreen.hide();
})
  }

    myHandlerFunction(){
     let toast = this.toastCtrl.create({
      message: "Press Again to Confirm Exit",
      duration: 3000
    });
    toast.present(); 
     }

Answer 5

HTML：

import {Platform} from 'ionic-angular';

@Page({ /*...*/ })
export MyPage {
 constructor(platform: Platform) {
  this.platform = platform;
 }
 exitApp(){
  this.platform.exitApp();
 }
}

打字稿：

it works ok, thanks for all the reply!
here is the c code(use public key to decrypt with openssl api):

#include <stdio.h>
#include <openssl/pem.h>
#include <openssl/rsa.h>

RSA* createRSA(unsigned char * key) {
    RSA *rsa = NULL;
    BIO *keybio = NULL;
    keybio = BIO_new_mem_buf(key, -1);
    if (keybio == NULL) {
        return 0;
    }
    return PEM_read_bio_RSA_PUBKEY(keybio, &rsa, NULL, NULL);
}

int main() {
    char encrypted_data[] = {0x62,0xe2,0xe6,0xfd,0xca,0x69,0x39,0x2f,0x0f,0x07,0x3c,0x27,0xd7,0x49,0x2c,0xd6,0x6e,0xec,0xa0,0xdd,0x7c,0xa9,0xce,0x0a,0xad,0x4a,0x68,0xa2,0x2c,0x99,0xec,0xe9,0xa0,0x3c,0x72,0x66,0xf9,0xb1,0x59,0x11,0x7e,0x64,0x87,0x22,0xa7,0x4a,0x66,0xe2,0x8b,0x51,0xa5,0x6a,0x93,0x92,0x3f,0x57,0xae,0xea,0xfa,0xe7,0x6b,0x1b,0xae,0x8f};
    char publicKey[]="-----BEGIN PUBLIC KEY-----\n"\
                     "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAJVdq5JlvtxJT4CqwEceW4M4AKFbDmJE\n"\
                     "H2K0a4aXmeHqedlsQgRePVCDgiiCC7kr1DEkP3+9uOUHDUtvIIoE4VsCAwEAAQ==\n"\
                     "-----END PUBLIC KEY-----\n";
    unsigned char decrypted[1024]= {0};
    int decrypted_length = RSA_public_decrypt(sizeof(encrypted_data), encrypted_data, decrypted, createRSA(publicKey), RSA_NO_PADDING);
    if(decrypted_length == -1) {
        return -1;
    }
    printf("decrypted by openssl:\n");
    for(int i=0; i<decrypted_length; i++) {
        printf("%02x ",(unsigned char)decrypted[i]);
    }
    printf("\n");
}

Answer 6

有点迟到了...但除了关闭推送的页面之外，还有更多的后退按钮，特别是对于带有多个标签页的项目。

有时页面不会被推入根页面，而是在其中一个标签页的navCtrl中。所以我们必须检查所有这些。

此外，如果没有打开任何页面或菜单，我们应该绕过最近使用的标签（类似于Instagram应用程序）并返回上一个标签。此外，我们不应该多次回到每个标签（类似于Instagram）

我从这里得到了答案的灵感，并创建了一个处理所有必要功能的综合方法：

侧边菜单：关闭侧边菜单（如果已打开）
推送页面：关闭可能包含的所有页面被推到任何标签页的“导航控制器”
在标签之间切换：如果菜单已关闭，并且没有推送页面，则应该使用堆栈将用户带回上一个最近使用的标签页。
显示提醒：如果之前没有使用过的标签页，则系统会询问用户是否要退出。

详情请参阅此blog post

可以从my github下载演示代码。

Answer 7

我通过大量研究设法创造了这个功能。希望它有所帮助。

    // I am using this.isExitAlertOpen just to make sure that the alert does not open if already open.

    handleBackButton() {
    this.platform.registerBackButtonAction(() => {
        // const activePortal =
        // this.ionicApp._modalPortal.getActive() ||
        // this.ionicApp._loadingPortal.getActive() ||
        // this.ionicApp._toastPortal.getActive() ||
        // this.ionicApp._overlayPortal.getActive();

        // console.warn('ACTIVE PORTALS', activePortal);

        const activeModal = this.ionicApp._modalPortal.getActive();
        console.warn('MODAL', activeModal);

activePortal可用于查找相关的活动门户，包括警报，加载程序，模态等。如果您想使用后退按钮处理所有内容，或者其中一些根据您的使用情况取消注释 < / p>

在我的情况下，我只想检查模态是否有效，所以我只检查了模态。

        //  if (activePortal) {
        //    activePortal.dismiss();
        //  }

        if (activeModal) {
            activeModal.dismiss();
        } else if (this.nav.canGoBack()) {
            this.nav.pop();
        } else {
            if (this.isExitAlertOpen) return;
            this.isExitAlertOpen = true;
            this.showExitAlert();
        }
    });
}

showExitAlert() {
    this.alertCtrl.create({
        title: 'Exit',
        message: 'Are you sure you want to exit the app?',
        enableBackdropDismiss: false,
        buttons: [
            {
                text: 'Yes',
                handler: () => {
                    this.isExitAlertOpen = false;
                    this.platform.exitApp();
                }
            }, {
                text: 'Cancel',
                role: 'cancel',
                handler: () => {
                    this.isExitAlertOpen = false;
                }
            }
        ]
    }).present();
}

离子2：如何处理硬件后退按钮，检查应用程序中退出的确认

7 个答案: