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


Posted in Javascript onSeptember 17, 2019

最近才把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来测试,不像以前刷新就可以了(此处我被坑了很久才知道)。

双击返回键退出应用

首先,贴一下效果图:

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

然后就是主要代码。打开/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);

在此结束。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js原型链原理看图说明
Jul 07 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
三步实现ionic3点击退出app程序
Sep 17 #Javascript
ionic3双击返回退出应用的方法
Sep 17 #Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 #Javascript
vue.js购物车添加商品组件的方法
Sep 17 #Javascript
关于vue项目中搜索节流的实现代码
Sep 17 #Javascript
Vue的生命周期操作示例
Sep 17 #Javascript
小程序两种滚动公告栏的实现方法
Sep 17 #Javascript
You might like
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
PHP cron中的批处理
2008/09/16 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
js中new一个对象的过程
2017/02/20 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
python编程线性回归代码示例
2017/12/07 Python
python实现textrank关键词提取
2018/06/22 Python
在django view中给form传入参数的例子
2019/07/19 Python
Django如何实现防止XSS攻击
2020/10/13 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
幼儿园教师备课制度
2014/01/12 职场文书
明星员工获奖感言
2014/08/14 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技
Hive常用日期格式转换语法
2022/06/25 数据库