三步实现ionic3点击退出app程序

本文实例为大家分享了ionic3点击退出app程序的具体代码，供大家参考，具体内容如下

其实也很简单。大概分为三步

1.tabs.ts文件需要声明一下

@ViewChild('mainTabs') tabs:Tabs;//声明tabs组件(<ion-tabs #mainTabs >)

2.app.component.ts文件

@ViewChild('myNav') nav: Nav;//声明根组件(<ion-nav #myNav [root]="rootPage">)

3.贴代码

platform.ready().then(()=>{
this.exitApp();
})
public backButtonPressed: boolean = false;
exitApp() {
  this.platform.registerBackButtonAction(() => {
   //控制modal、系统自带提示框
   let overlay = this.appCtrl._appRoot._overlayPortal.getActive() ||  this.appCtrl._appRoot._modalPortal.getActive();
   if (overlay) {
    overlay.dismiss();
    return;
   }
   let activeVC = this.nav.getActive();
   let page = activeVC.instance;
   if (page.tabs) {
    let activeNav = page.tabs.getSelected();
    if (activeNav.canGoBack()) {
     return activeNav.pop();
    } else {
     return this.showExit();
    }
   }
   if (page instanceof LoginPage) {//查看当前页面是否是登陆页面
    this.showExit();
    return;
   }
   this.appCtrl.getActiveNav().pop();//剩余的情况全部使用全局路由进行操作
  });
 }

 //双击退出函数
 showExit() {
  if (this.backButtonPressed) {
   this.platform.exitApp();
  } else {
   this.presentToast();//再按一次退出
   this.backButtonPressed = true;
   setTimeout(() => {
    this.backButtonPressed = false;
   }, 2000)
  }
 }
 presentToast() {
  let toast = this.toastCtrl.create({
   message: '再按一次退出应用',
   duration: 2000,
   position: 'top'
  });

  toast.onDidDismiss(() => {
   console.log('Dismissed toast');
  });

  toast.present();
 }

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

赞 (0)

相关推荐

  • ionic App问题总结系列之ionic点击系统返回键退出App

    在安卓下,如果不处理系统返回键的事件,那么每次点击返回键,将页面将返回到上一个路由,这种逻辑不符合app的路由逻辑.正确的应该是:当页面到了各个导航页的首页时,此时再按返回键应该提示是否退出app,用户点击确认后退出app. 在run()方法中添加下面的方法 $ionicPlatform.registerBackButtonAction(function (e){ //阻止默认的行为 e.preventDefault(); // 退出提示框 function showConfirm() { va

  • ionic监听android返回键实现“再按一次退出”功能

    在android平台上的app,在主页面时经常会遇到"再按一次退出app"的功能,避免只按一下返回键就退出app提升体验优化. 1.这个功能需要我们用到ionic提供的registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority, [actionId]) 参数 类型 说明 callback function 当点击返回按钮时触发,如果该监视器具有最高的优先级 priority num

  • ionic3双击返回退出应用的方法

    ionic3 做双击退出应用的时候按照网上大神的来,从中遇到了一些问题,用this.app.getRootNav().push(MyPage);跳转的页面无法返回,this.app.getActiveNav().pop();这个方法在新的版本中已近被移除了,最后使用另外一种返回方式this.appCtrl.getRootNav().pop(); 完整代码: 1.tabs.ts文件 import {Component, ViewChild} from '@angular/core'; import

  • 三步实现ionic3点击退出app程序

    本文实例为大家分享了ionic3点击退出app程序的具体代码,供大家参考,具体内容如下 其实也很简单.大概分为三步 1.tabs.ts文件需要声明一下 @ViewChild('mainTabs') tabs:Tabs;//声明tabs组件(<ion-tabs #mainTabs >) 2.app.component.ts文件 @ViewChild('myNav') nav: Nav;//声明根组件(<ion-nav #myNav [root]="rootPage"&g

  • Flutter 点击两次退出app的实现示例

    目录 1.App组件 2.InAppWebview组件 在安卓手机上才会有物理返回键,而ios手机是没有的,所以说这个是安卓手机独有的功能. 使用场景:当用户在某一段时间内连续点击两次返回键,才会被认为是退出应用. 在Flutter中想实现这个功能,首先我们先来认识一个Flutter中的组件WillPopScope,在Flutter中我们是用这个组件来实现物理返回键拦截的,从而实现点击两返回键退出应用. onWillPop是他的一个回调函数,当用户点击返回按钮时被调用(Android物理返回按钮

  • pygame实现井字棋之第三步逻辑优化

    pygame实现井字棋之第三步逻辑优化

    一.前言 先说一下本期的目标. 首先我们在判断出输赢.平局的时候,只有一个控制台输出,很明显不符合我们游戏的排面(doge 另外,之前的逻辑有一个漏洞,就是玩家一定是先手(就是第一个下棋的人,这个也需要修改). 还有,有一个短暂的弹窗显示到谁了,游戏的可玩性就会有提高. 最后一个就是,如果点击位置有问题,我们需要显示. 二.渲染问题 翻车了,之前的逻辑是将九宫格和背景颜色写死,而且之前都是直接在之前的基础上渲染,但是我们的弹窗需要在结束后及时撤下来,所以需要我们不断的重新渲染界面. 得,改吧.

  • 简单的三步vuex入门

    前言 之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因, event bus 的成本反而比vuex还高, 所以技术选型上选用了 vuex, 但是不知道为什么, 团队里的一些新人一听到vuex,就开始退缩了, 因为vuex 很难? 真的很难吗? 今天我们用简单的3步来证明一下,vuex有多简单. 纯属个人经验,难免有不正确的地方,如有发现,欢迎指正! 这是一个针对新手的入门级教程.入门级教程.入门级教程 第零步 新建一个vue项目,安装vuex,这里不做过多介绍,能点进来的

  • 在PyCharm中三步完成PyPy解释器的配置的方法

    介绍方法之前,我们先说说Python的解释器,由于Python是动态编译的语言,和C/C++.Java或者Kotlin等静态语言不同,它是在运行时一句一句代码地边编译边执行的,而Java是提前将高级语言编译成了JVM字节码,运行时直接通过JVM和机器打交道,所以进行密集计算时运行速度远高于动态编译语言. 但是根据二八定律(帕累托法则),有80%的计算资源只被20%的程序所使用,因此在大部分情况下,原生的CPython解释器已经足够满足日常编程,加上很多科学计算库底层都是C/C++写的,一般不会用

  • 在python中利用pycharm自定义代码块教程(三步搞定)

    当我们在使用pycharm时,输入特殊的关键字会有提示,然后按enter就可以自动补全,如果我们经常需要输出重复的代码时,能否也利用这种方法来自动补全呢? 下面我们就来利用pycharm自定义代码块: 1.打开pycharm中file下的setting,找到Editor下面的Live Templates ,右侧就会出现各种语言的代码块,我们选择Python,点击右侧的"+",选择Live Template 2.Abbreviation就是你自定义代码块的名字,Description是描

  • 三步解决python PermissionError: [WinError 5]拒绝访问的情况

    问题描述: 1.当你卸载python库的时候,如:pip uninstall pandas 2.当你想要更新python库的时候,如:pip install --upgrade pandas 等等- 就会出现PermissionError: [WinError 5] 问题 废话不多说,分三步完全解决该问题: 第一步: 关闭跟python相关的所有程序,如jupyter,pycharm,Anaconda等等,这一步非常重要!!! 好了,第一步完成下面开始常规操作的两步: 第二步: 赋予用户对pyt

  • 三步搞定:Vue.js调用Android原生操作

    第一步: Android对Js的接口,新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support.annotation.RequiresApi; import android.util.Log; import android.webkit.

随机推荐