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 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
三步实现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
模仿OSO的论坛(四)
2006/10/09 PHP
php strnatcmp()函数的用法总结
2013/11/27 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
vue实现登录功能
2020/12/31 Vue.js
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python画双y轴图像的示例代码
2019/07/07 Python
Django model select的多种用法详解
2019/07/16 Python
200行python代码实现2048游戏
2019/07/17 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
自考生毕业自我鉴定
2013/10/10 职场文书
班组长工作职责
2013/12/25 职场文书
工程质量月活动方案
2014/02/19 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
颐和园导游词400字
2015/01/30 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技