资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

android硬件中的返回按钮如何利用ionic2进行处理

本篇文章给大家分享的是有关android硬件中的返回按钮如何利用ionic2进行处理,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

创新互联建站专注于利川企业网站建设,响应式网站建设,商城网站开发。利川网站建设公司,为利川等地区提供建站服务。全流程按需网站设计,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务

问题

注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法:

1.实现按返回键最小化应用(最小化应用需要装cordova-plugin-appminimize插件,使用window['AppMinimize'].minimize();)。
2.要么请求用户确认(添加一个Confirmation Alerts)。
3.按一下提示,按两下退出(加一个方法用toast提醒)。

这里用第三种展示。

解决

在app.html中,添加#myNav,在app.component.ts文件通过@ViewChild('myNav')获取:


在app.component.ts中:

 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();//另外两种方法在这里将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;获取:

 
  
  
  
 

在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() {
  }
 }

以上就是android硬件中的返回按钮如何利用ionic2进行处理,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


当前文章:android硬件中的返回按钮如何利用ionic2进行处理
URL网址:http://cdkjz.cn/article/jgogco.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220