蝙蝠岛资源网 Design By www.hbtsch.com

最近才把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);

在此结束。

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

标签:
ionic2.0双击返回键退出应用,ionic双击返回键退出,ionic2.0双击退出应用

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“ionic2.0双击返回键退出应用”

暂无ionic2.0双击返回键退出应用的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。