您好,登錄后才能下訂單哦!
最近才把ionic的版本更新到2.0,所以便想感受一下2.0版本帶來的新體驗(yàn)。
看了官方網(wǎng)站以及網(wǎng)上的各種介紹后,才知道這2.0版本結(jié)合了TypeScript和ES6,和1.0+版本有很大的不同,所以在此記錄下使用2.0版本開發(fā)應(yīng)用的過程與代碼。此文就是介紹在2.0版本雙擊返回鍵退出應(yīng)用。
先在這說下我從更新后到現(xiàn)在的經(jīng)驗(yàn)吧。ionic2.0的項(xiàng)目目錄和以前不一樣了,而且是在/app這個(gè)文件夾下開發(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來測(cè)試,不像以前刷新就可以了(此處我被坑了很久才知道)。
雙擊返回鍵退出應(yīng)用
首先,貼一下效果圖:
然后就是主要代碼。打開/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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。