ionic2实战-完美处理安卓硬件返回按钮

效果演示

源代码已上传到github

由于ionic版本更新较快,有些写法可能改变来不及更新简书,请以github代码为准

ionic2-完美处理安卓硬件返回按钮.gif

介绍

  • 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好. 所以当用户点击返回按钮,应该提示"再按一次退出"

  • 不想实现"再按一次退出",想实现像QQ一样按返回最小化app?可以看这里

  • ionic2更新比较快,Google找到的许多处理方法都是旧版本,下面就贴出package.json完整代码,截至目前是最新的
    {
    "name": "ionic-app-base",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
    "@angular/common": "2.2.1",
    "@angular/compiler": "2.2.1",
    "@angular/compiler-cli": "2.2.1",
    "@angular/core": "2.2.1",
    "@angular/forms": "2.2.1",
    "@angular/http": "2.2.1",
    "@angular/platform-browser": "2.2.1",
    "@angular/platform-browser-dynamic": "2.2.1",
    "@angular/platform-server": "2.2.1",
    "@ionic/storage": "1.1.7",
    "ionic-angular": "2.0.0-rc.4",
    "ionic-native": "2.2.11",
    "ionicons": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.26"
    },
    "devDependencies": {
    "@ionic/app-scripts": "0.0.47",
    "typescript": "2.0.9"
    }
    }

  • 今天(2017年3月17日 10:12:31)升级到最新版本,代码不变,依然可以用,特此说明


核心代码

核心代码就4个文件,这4个文件中的完整代码如下

  1. app.html,添加#myNav,在app.component.ts文件通过@ViewChild('myNav')获取
    <ion-nav #myNav [root]="rootPage"></ion-nav>
  • app.component.ts

     import {Component, ViewChild} from '@angular/core';
     import {Platform, ToastController, Nav, IonicApp} from 'ionic-angular';
     import {StatusBar, Splashscreen} from 'ionic-native';
     import {TabsPage} from '../pages/tabs/tabs';
    
     @Component({
       templateUrl: 'app.html'
     })
     export class MyApp {
       rootPage = TabsPage;
       backButtonPressed: boolean = false;  //用于判断返回键是否触发
       @ViewChild('myNav') nav: Nav;
    
       constructor(public ionicApp: IonicApp, public platform: Platform, public toastCtrl: ToastController) {
         platform.ready().then(() => {
           StatusBar.styleDefault();
           Splashscreen.hide();
           this.registerBackButtonAction();//注册返回按键事件
         });
       }
    
       registerBackButtonAction() {
         this.platform.registerBackButtonAction(() => {
           //如果想点击返回按钮隐藏toast或loading或Overlay就把下面加上
           // this.ionicApp._toastPortal.getActive() || this.ionicApp._loadingPortal.getActive() || this.ionicApp._overlayPortal.getActive()
           let activePortal = this.ionicApp._modalPortal.getActive();
           if (activePortal) {
             activePortal.dismiss().catch(() => {});
             activePortal.onDidDismiss(() => {});
             return;
           }
           let activeVC = this.nav.getActive();
           let tabs = activeVC.instance.tabs;
           let activeNav = tabs.getSelected();
           return activeNav.canGoBack() ? activeNav.pop() : this.showExit()
         }, 1);
       }
    
       //双击退出提示框
       showExit() {
         if (this.backButtonPressed) { //当触发标志为true时,即2秒内双击返回按键则退出APP
           this.platform.exitApp();
         } else {
           this.toastCtrl.create({
             message: '再按一次退出应用',
             duration: 2000,
             position: 'top'
           }).present();
           this.backButtonPressed = true;
           setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
         }
       }
    

    }

  • tabs.html,添加#mainTabs,在tabs.ts文件通过@ViewChild('mainTabs') tabs:Tabs;获取
    <ion-tabs #mainTabs>
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
    </ion-tabs>

  • tabs.ts
    import {Component, ViewChild} from '@angular/core';
    import { HomePage } from '../home/home';
    import { AboutPage } from '../about/about';
    import { ContactPage } from '../contact/contact';
    import {Tabs} from "ionic-angular";

     @Component({
       templateUrl: 'tabs.html'
     })
     export class TabsPage {
       @ViewChild('mainTabs') tabs:Tabs;
       tab1Root: any = HomePage;
       tab2Root: any = AboutPage;
       tab3Root: any = ContactPage;
     
       constructor() {
       }
     }
    

今天(2017年3月21日 22:34:42)添加隐藏键盘事件


推荐阅读更多精彩内容

  • 本示例是ionic3.3,用了懒加载 在app.html中,添加#myNav,在app.component.ts文...
    YuRi_1阅读 2,252评论 1 6
  • 如今算来,从开始工作到现在已经有4年了,如果算上兼职,工作的年限可以延伸到8年之久。摩羯座这个星座还是比较热爱工作...
    Commonsense阅读 228评论 0 1
  • 1.IP电商。微博是图文短视频消费平台,京东天猫是货消费平台,而事实是这两种平台的界限正在急剧模糊,淘宝这两三年很...
    海狸叔叔阅读 49评论 0 1
  • 如果现在你告诉我默默喜欢了一个人好久,我会赞叹你牛逼呀,然后骂你个sb,去追呀!这大好的青春是要用经历来填满的,而...
    ZXRLEMON阅读 258评论 5 6
  • 昨晚和一个做中介卖房的(吴元虎的)哥们儿吃饭。 哥们儿穿着工服戴着胸牌,在金手勺门口,一个大姐问,这片儿房价什么样...
    徐一棉阅读 129评论 0 0