效果演示
源代码已上传到github
由于ionic版本更新较快,有些写法可能改变来不及更新简书,请以github代码为准
ionic2-完美处理安卓硬件返回按钮.gif
介绍
-
注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好. 所以当用户点击返回按钮,应该提示"再按一次退出"
-
不想实现"再按一次退出",想实现像QQ一样按返回最小化app?可以看这里
-
ionic2更新比较快,Google找到的许多处理方法都是旧版本,下面就贴出package.json完整代码,截至目前是最新的
{
"name": "ionic-app-base",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "1.1.7",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"@ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
}
} -
今天(2017年3月17日 10:12:31)升级到最新版本,代码不变,依然可以用,特此说明
核心代码
核心代码就4个文件,这4个文件中的完整代码如下
- app.html,添加
#myNav,在app.component.ts文件通过@ViewChild('myNav')获取
<ion-nav #myNav [root]="rootPage"></ion-nav>
-
import {Component, ViewChild} from '@angular/core'; import {Platform, ToastController, Nav, IonicApp} from 'ionic-angular'; import {StatusBar, Splashscreen} from 'ionic-native'; import {TabsPage} from '../pages/tabs/tabs'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage = TabsPage; backButtonPressed: boolean = false; //用于判断返回键是否触发 @ViewChild('myNav') nav: Nav; constructor(public ionicApp: IonicApp, public platform: Platform, public toastCtrl: ToastController) { platform.ready().then(() => { StatusBar.styleDefault(); Splashscreen.hide(); this.registerBackButtonAction();//注册返回按键事件 }); } registerBackButtonAction() { this.platform.registerBackButtonAction(() => { //如果想点击返回按钮隐藏toast或loading或Overlay就把下面加上 // this.ionicApp._toastPortal.getActive() || this.ionicApp._loadingPortal.getActive() || this.ionicApp._overlayPortal.getActive() let activePortal = this.ionicApp._modalPortal.getActive(); if (activePortal) { activePortal.dismiss().catch(() => {}); activePortal.onDidDismiss(() => {}); return; } let activeVC = this.nav.getActive(); let tabs = activeVC.instance.tabs; let activeNav = tabs.getSelected(); return activeNav.canGoBack() ? activeNav.pop() : this.showExit() }, 1); } //双击退出提示框 showExit() { if (this.backButtonPressed) { //当触发标志为true时，即2秒内双击返回按键则退出APP this.platform.exitApp(); } else { this.toastCtrl.create({ message: '再按一次退出应用', duration: 2000, position: 'top' }).present(); this.backButtonPressed = true; setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false } }}
-
tabs.html,添加
#mainTabs,在tabs.ts文件通过@ViewChild('mainTabs') tabs:Tabs;获取
<ion-tabs #mainTabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs> -
tabs.ts
import {Component, ViewChild} from '@angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import {Tabs} from "ionic-angular";@Component({ templateUrl: 'tabs.html' }) export class TabsPage { @ViewChild('mainTabs') tabs:Tabs; tab1Root: any = HomePage; tab2Root: any = AboutPage; tab3Root: any = ContactPage; constructor() { } }
今天(2017年3月21日 22:34:42)添加隐藏键盘事件
网友评论
用这段替换你的registerBackButtonAction方法
registerBackButtonAction() {
if (!this.nativeService.isAndroid()) {
return;
}
this.platform.registerBackButtonAction(() => {
if (this.keyboard.isOpen()) {//如果键盘开启则隐藏键盘
this.keyboard.close();
return;
}
//如果想点击返回按钮隐藏toast或loading或Overlay就把下面加上
// this.ionicApp._toastPortal.getActive() ||this.ionicApp._loadingPortal.getActive()|| this.ionicApp._overlayPortal.getActive()
let activePortal = this.ionicApp._modalPortal.getActive() || this.ionicApp._toastPortal.getActive() || this.ionicApp._overlayPortal.getActive();
if (activePortal) {
activePortal.dismiss();
return;
}
let activeVC = this.nav.getActive();
let activeNav = activeVC.getNav();
return activeNav.canGoBack() ? activeNav.pop() : this.nativeService.minimize();//this.showExit()
}, 1);
}
我把 ionicApp 放到app.module.ts的providers里 还是报错,请问要怎么解决?
https://github.com/yanxiaojun617/ionic2_tabs/blob/master/src/app/app.component.ts
});
this.platform.resume.subscribe(() => {//app从后台恢复事件
});
你要问直接杀掉app进程怎么处理?那就只能定时保存数据,没办法监听用户何时杀掉进程
登录的单页跳转到tab无法使用
let activeVC = this.nav.getActive();
let page = activeVC.instance;
if (!(page instanceof TabsPage)) {
if (!this.nav.canGoBack()) {
console.log('检测到在根视图点击了返回按钮。');
return platform.exitApp();
}
console.log('检测到在子路径中点击了返回按钮。');
return this.nav.pop();
}
还需要检测页面是否是tabs
this.ionicApp._toastPortal.getActive() || this.ionicApp._loadingPortal.getActive() || this.ionicApp._overlayPortal.getActive()
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
具体看官网.
源码是这样的
/** @private */
instance: any;
这个属性被注释为private不是,但其实还不是private,可以获取
我已经升级到最新版,测试没问题的,你不妨下载我的源码测试