ionic2.0雙擊返回鍵退出應(yīng)用
最近才把ionic的版本更新到2.0,所以便想感受一下2.0版本帶來(lái)的新體驗(yàn)。
看了官方網(wǎng)站以及網(wǎng)上的各種介紹后,才知道這2.0版本結(jié)合了TypeScript和ES6,和1.0+版本有很大的不同,所以在此記錄下使用2.0版本開(kāi)發(fā)應(yīng)用的過(guò)程與代碼。此文就是介紹在2.0版本雙擊返回鍵退出應(yīng)用。
先在這說(shuō)下我從更新后到現(xiàn)在的經(jīng)驗(yàn)吧。ionic2.0的項(xiàng)目目錄和以前不一樣了,而且是在/app這個(gè)文件夾下開(kāi)發(fā)的,html、scss和ts文件都在這里,生成一個(gè)頁(yè)面需要的三個(gè)文件(html、scss、ts)是使用命令ionic g page生成的。如,在當(dāng)前項(xiàng)目下,使用ionic g page MyPage,就可以生成my-page一個(gè)文件夾以及文件夾里面的所需的三個(gè)文件。
還有,想在瀏覽器上測(cè)試效果,你就得執(zhí)行命令ionic serve來(lái)測(cè)試,不像以前刷新就可以了(此處我被坑了很久才知道)。
雙擊返回鍵退出應(yīng)用
首先,貼一下效果圖:

然后就是主要代碼。打開(kāi)/app目錄下的app.ts,把下面的代碼全部復(fù)制粘貼,然后執(zhí)行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';//這個(gè)是為了出現(xiàn)“再按一次退出”的彈出框才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);
在此結(jié)束。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果的示例代碼
- Cordova(ionic)項(xiàng)目實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用
- ionic+html5+API實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用
- 三步實(shí)現(xiàn)ionic3點(diǎn)擊退出app程序
- ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
- ionic使用angularjs表單驗(yàn)證(模板驗(yàn)證)
- Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
- 基于Ionic3實(shí)現(xiàn)選項(xiàng)卡切換并重新加載echarts
相關(guān)文章
JS面試必備之手寫(xiě)instanceof,深拷貝,節(jié)流和防抖
JavaScript如何實(shí)現(xiàn)手寫(xiě)instanceof、深拷貝、節(jié)流、防抖也是面試時(shí)常??嫉降闹R(shí)點(diǎn),這篇文章為大家進(jìn)行了詳細(xì)介紹,需要的可以參考一下2023-05-05
使用window.print()前端實(shí)現(xiàn)網(wǎng)頁(yè)打印超詳細(xì)教程(含代碼示例)
前端實(shí)現(xiàn)打印功能的方法有很多,大家在網(wǎng)上隨便一搜就是一大堆,下面這篇文章主要給大家介紹了關(guān)于使用window.print()前端實(shí)現(xiàn)網(wǎng)頁(yè)打印的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
js獲取dom的高度和寬度(可見(jiàn)區(qū)域及部分等等)
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)捇蚋摺⒕W(wǎng)頁(yè)正文全文寬或高以及網(wǎng)頁(yè)正文部分左或右,詳細(xì)請(qǐng)看下文,希望對(duì)大家有所幫助2013-06-06
js+html5實(shí)現(xiàn)canvas繪制橢圓形圖案的方法
這篇文章主要介紹了js+html5實(shí)現(xiàn)canvas繪制橢圓形圖案的方法,涉及html5圖形繪制的基礎(chǔ)技巧,感興趣的朋友可以參考一下2016-05-05
JS數(shù)組的遍歷方式for循環(huán)與for...in
本節(jié)主要介紹了JS數(shù)組的遍歷方式for循環(huán)與for...in,需要的朋友可以參考下2014-07-07
es6?js?匹配兩個(gè)數(shù)組對(duì)象的方法
這篇文章主要介紹了es6?js?匹配兩個(gè)數(shù)組對(duì)象的方法,實(shí)例代碼介紹了判斷兩個(gè)數(shù)組用的value是否相等,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03

