ionic2.0双击返回键退出应用

最近才把ionic的版本更新到2.0，所以便想感受一下2.0版本带来的新体验。

看了官方网站以及网上的各种介绍后，才知道这2.0版本结合了TypeScript和ES6，和1.0+版本有很大的不同，所以在此记录下使用2.0版本开发应用的过程与代码。此文就是介绍在2.0版本双击返回键退出应用。

先在这说下我从更新后到现在的经验吧。ionic2.0的项目目录和以前不一样了，而且是在/app这个文件夹下开发的，html、scss和ts文件都在这里，生成一个页面需要的三个文件（html、scss、ts）是使用命令ionic g page生成的。如，在当前项目下，使用ionic g page MyPage，就可以生成my-page一个文件夹以及文件夹里面的所需的三个文件。

还有，想在浏览器上测试效果，你就得执行命令ionic serve来测试，不像以前刷新就可以了（此处我被坑了很久才知道）。

双击返回键退出应用

首先，贴一下效果图：

然后就是主要代码。打开/app目录下的app.ts，把下面的代码全部复制粘贴，然后执行ionic run android就可以了。

import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {ToastController} from 'ionic-angular';//这个是为了出现“再按一次退出”的弹出框才import的

@Component({
 template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {

 private rootPage: any;
 public static backButtonPressedOnceToExit = false;

 constructor(private platform: Platform,public toastCtrl:ToastController) {
 this.rootPage = TabsPage;

 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.
  StatusBar.styleDefault();
 });
 platform.registerBackButtonAction(function(e){
  if(MyApp.backButtonPressedOnceToExit){
  platform.exitApp();
  }else{
  MyApp.backButtonPressedOnceToExit = true;
  let toast = toastCtrl.create({
   message: '再按一次退出',
   duration: 2000,
   position: 'bottom'
  });
  toast.present();
  setTimeout(function(){
   MyApp.backButtonPressedOnceToExit = false;
  },2000)
  }
 },101)
 }
}
ionicBootstrap(MyApp);

在此结束。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 三步实现ionic3点击退出app程序

    本文实例为大家分享了ionic3点击退出app程序的具体代码,供大家参考,具体内容如下 其实也很简单.大概分为三步 1.tabs.ts文件需要声明一下 @ViewChild('mainTabs') tabs:Tabs;//声明tabs组件(<ion-tabs #mainTabs >) 2.app.component.ts文件 @ViewChild('myNav') nav: Nav;//声明根组件(<ion-nav #myNav [root]="rootPage"&g

  • ionic3双击返回退出应用的方法

    ionic3 做双击退出应用的时候按照网上大神的来,从中遇到了一些问题,用this.app.getRootNav().push(MyPage);跳转的页面无法返回,this.app.getActiveNav().pop();这个方法在新的版本中已近被移除了,最后使用另外一种返回方式this.appCtrl.getRootNav().pop(); 完整代码: 1.tabs.ts文件 import {Component, ViewChild} from '@angular/core'; import

  • ionic监听android返回键实现“再按一次退出”功能

    在android平台上的app,在主页面时经常会遇到"再按一次退出app"的功能,避免只按一下返回键就退出app提升体验优化. 1.这个功能需要我们用到ionic提供的registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority, [actionId]) 参数 类型 说明 callback function 当点击返回按钮时触发,如果该监视器具有最高的优先级 priority num

  • ionic App问题总结系列之ionic点击系统返回键退出App

    在安卓下,如果不处理系统返回键的事件,那么每次点击返回键,将页面将返回到上一个路由,这种逻辑不符合app的路由逻辑.正确的应该是:当页面到了各个导航页的首页时,此时再按返回键应该提示是否退出app,用户点击确认后退出app. 在run()方法中添加下面的方法 $ionicPlatform.registerBackButtonAction(function (e){ //阻止默认的行为 e.preventDefault(); // 退出提示框 function showConfirm() { va

  • ionic2.0双击返回键退出应用

    ionic2.0双击返回键退出应用

    最近才把ionic的版本更新到2.0,所以便想感受一下2.0版本带来的新体验. 看了官方网站以及网上的各种介绍后,才知道这2.0版本结合了TypeScript和ES6,和1.0+版本有很大的不同,所以在此记录下使用2.0版本开发应用的过程与代码.此文就是介绍在2.0版本双击返回键退出应用. 先在这说下我从更新后到现在的经验吧.ionic2.0的项目目录和以前不一样了,而且是在/app这个文件夹下开发的,html.scss和ts文件都在这里,生成一个页面需要的三个文件(html.scss.ts)是

  • Android实现双击返回键退出应用实现方法详解

    Android实现双击返回键退出应用实现方法详解

    前言 现在市面上很多应用都会有当用户按返回键的时候提示用户:再按一次将退出应用的提示,也就是双击双击返回键退出应用,接下来我们就用几种办法来实现这个功能 效果图 实现 第一种办法 响应Activity的 onKeyUp事件,两次点击时间大于2秒钟就不响应,小于2秒钟就退出程序 代码: //记录用户首次点击返回键的时间 private long firstTime = 0; /** * 第一种解决办法 通过监听keyUp * @param keyCode * @param event * @ret

  • Cordova(ionic)项目实现双击返回键退出应用

    Android原生项目实现双击返回键退出应用,是十分简单的,添加如下代码即可实现: //记录按键时间 private long exitTime; @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK){ exit(); } return super.onKeyDown(keyCode, event); } public void exit(){

  • ionic+html5+API实现双击返回键退出应用

    使用ionic+MUI联合开发app,鉴于ionic单方面实现的双击返回键过于复杂,所以想出了使用ionic与html5+API一起使用实现双击返回键退出应用,单击返回键返回上层的功能. $scope.listenbackbutton = function() { document.addEventListener("plusready", onPlusReady, false); function onPlusReady() { plus.key.addEventListener(&

  • Android中双击返回键退出应用实例代码

    Android中双击返回键退出程序 1.在MyAppliction中(继承Application) //运用list来保存们每一个activity是关键 private List<Activity> mList = new LinkedList<Activity>(); //为了实现每次使用该类时不创建新的对象而创建的静态对象 private static MyApplication instance; //构造方法 public MyApplication() { } //实例化

  • Android 双击返回键退出程序的方法总结

    Android 双击返回键退出程序的方法总结 下面先说说LZ思路,具体如下: 1. 第一种就是根据用户点击俩次的时间间隔去判断是否退出程序; 2. 第二种就是使用Android中计时器(Timer),其实这俩种都差不多. 思路是有了,,,接下来要怎么开搞呢???用户点击肯定会触发相应的事件,,,我们先来看下面俩个事件的作用... Activity.onKeyDown(); 当某个键被按下时会触发,但不会被任何的该Activity内的任何view处理. 默认按下KEYCODE_BACK键后会回到上

  • Android双击返回键退出程序的实现方法

    本文实例讲述了Android双击返回键退出程序的实现方法,是Android程序开发中一个非常实用的功能,分享给大家供大家参考之用.具体方法如下: 一.实现思路: 用户按下返回键时设定一个定时器来监控是否2秒内实现了退出,如果用户没有接着按返回键,则清除第一次按返回键的效果,使程序还原到第一次按下返回键之前的状态.定时器是每次用户按下返回键才去创建. 二.功能代码: /** * 菜单.返回键响应 */ @Override public boolean onKeyDown(int keyCode,

  • Android 双击Back键退出应用的实现方法

    Android 双击Back键退出应用的实现方法 实现原理: 双击退出程序的原理无非就是设置一个退出标识(询问是否退出),如果改变了这个标识(确认退出),则再次点击时立马退出,如果规定时间内没有退出,则延时重置这个标识(不退出). 延时重置: 使用 Java API 提供了 Timer 类,它能够执行定时任务.利用 Timer 就能够对标识进行延时重置. Timer 对象的 schedule( ) 方法需要一个 TimerTask 对象和一个时间长度(毫秒)作为参数.TimerTask 对象需要

  • Android实现点击两次返回键退出

    在做安卓应用是我们经常要判断用户对返回键的操作,一般为了防止误操作都是在用户连续按下两次返回键的时候提示用户是否退出应用程序. 第一种实现的基本原理就是,当按下BACK键时,会被onKeyDown捕获,判断是BACK键,则执行exit方法. 在exit方法中,会首先判断isExit的值,如果为false的话,则置为true,同时会弹出提示,并在2000毫秒(2秒)后发出一个消息,在Handler中将此值还原成false.如果在发送消息间隔的2秒内,再次按了BACK键,则再次执行exit方法,此时

随机推荐