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

在android平台上的app，在主页面时经常会遇到“再按一次退出app”的功能，避免只按一下返回键就退出app提升体验优化。

1、这个功能需要我们用到ionic提供的registerBackButtonAction方法（注册硬件后退按钮动作）

  1. registerBackButtonAction(callback, priority, [actionId])
  2. 参数 类型 说明
  3. callback function 当点击返回按钮时触发,如果该监视器具有最高的优先级
  4. priority number 仅最高优先级的会执行
  5. actionId(可空) * 该id指定这个动作 默认: 一个随机且唯一的id

后退按钮的优先执行顺序：

返回到上一个视图 = 100

关闭侧边菜单 = 150

关闭模版modal = 200

关闭上拉菜单action sheet = 300

关闭对话框popup = 400

关闭加载框loading = 500

注意：返回： function一个被触发的函数，将会注销 backButtonAction。

如果我们不想注册返回按钮影响所有页面，就要将返回函数再调用。

例如：如果一个上拉菜单已经显示，后退按钮应该关闭上拉菜单，而不是返回一个页面视图或关闭一个打开的模型。
所以我们要实现“再按一次退出app”的功能，可以将优先级priority设为101

2、代码实现

在js中

angular.module("app").run(["$rootScope", "$ionicPlatform",
 "$location", "$ionicHistory",
 function ($rootScope, $ionicPlatform, $location, $ionicHistory) {
  "use strict";

  // 当用户在主页面， 按返回键时，给予提示，如果在2s内再次出发返回键，就退出app
  function showTipMsg() {
   window.plugins.toast.showShortCenter("在按一次退出app"); // toast是cordova的一个插件cordova-plugin-x-toast，也可以用ionic的弹窗来代替
   $rootScope.exitApp = true;
   const delay = 2000;
   setTimeout(() => {
    $rootScope.exitApp = false;
   }, delay);
  }

  // 判断当前路由，是否是project， mission，mine， message这几个主页面
  function isExitPage() {
   let path = $location.path(),
    state = _.last(path.split("/")),
    ary = ["project", "mission", "mine", "", "message"];
   return _.includes(ary, state);
  }

  // 注册返回事件
  function registerBackButton(event) {
   event.preventDefault();
   $cordovaKeyboard.isVisible() && $cordovaKeyboard.close();
   if (isExitPage()) {
    $rootScope.exitApp && ionic.Platform.exitApp();
    !$rootScope.exitApp && showTipMsg();
   } else {
    $ionicHistory.goBack();
   }
   return false;
  }

  // ionic 环境已经准备完毕
  ionic.Platform.ready(() => {
   try {
    const priority = 101;
    $ionicPlatform.is("Android") && $ionicPlatform.registerBackButtonAction(registerBackButton, priority);
   } catch (e) {
    console.warn("Application is running in browser causes inspection failed.");
   }
  });
 }]);

这样我们就很简单实现了一个"再按一次退出app的功能"

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

您可能感兴趣的文章:

  • ionic2自定义cordova插件开发以及使用（Android）
  • ionic App 解决android端在真机上tab处于顶部的问题
  • ionic2打包android时gradle无法下载的解决方法
  • ionic2如何处理android硬件返回按钮
  • 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
赞 (0)

相关推荐

  • ionic2打包android时gradle无法下载的解决方法

    问题 之前在使用ionic2时使用建立android平台命令或者编译时,总是会在获取gradle时卡住,等很久进度也不变化,导致命令超时失败.于是经过查阅资料和自己实践测试,总结出以下办法. 方法 其实主要原因是用命令下载时用的是指定的下载途径(可能不该这样形容,欢迎大家评论批评指正),国内通过这样下载十分慢,甚至时断时续,从而导致出现上面的问题. 所以我们自己去下载gradle,存放在本地,然后更改配置文件,使其不去网上下载而是从我们指定的本地位置获取. 首先我们打开下面这个js: 你的项目名

  • ionic2如何处理android硬件返回按钮

    问题 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好,所以有几种方法: 1.实现按返回键最小化应用(最小化应用需要装cordova-plugin-appminimize插件,使用window['AppMinimize'].minimize();). 2.要么请求用户确认(添加一个Confirmation Alerts). 3.按一下提示,按两下退出(加一个方法用toast提醒). 这里用第三种展示. 解决 在app.html中,添加#myNav,在app.c

  • ionic App 解决android端在真机上tab处于顶部的问题

    ionic App 解决android端在真机上 tab处于顶部的Bug 在app.js 页面中添加以下代码 .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('bottom'); $i

  • 关注Ionic底部导航按钮tabs在android情况下浮在上面的处理

    关注Ionic底部导航按钮tabs在android情况下浮在上面的处理

    Ionic是一款流行的移动端开发框架,但是刚入门的同学会发现,Ionic在iOS和Android的底部tabs显示不一样.在安卓情况下底部tabs会浮上去. 如下图展示: 网上也有很多此类的解决方案,但是我觉得说一千道一万都不如给个dome实在,下面附上解决方案的dome,大家可以看看! <!DOCTYPE html> <html ng-app="ionic"> <head> <meta charset="UTF-8">

  • ionic2自定义cordova插件开发以及使用（Android）

    ionic2自定义cordova插件开发以及使用（Android）

    如何写一个cordova 用于ionic2项目中呢,在搜索了一番之后,千篇一律,我都怀疑那些文章是不是全部都是复制来复制去的,而且都不是很详细.我自己也捣鼓了一下午,踩了很多坑.所以特此写这下这篇,记录一下. 假设需求是 写一个日志插件,可以将日志写在手机的sdcard中. 1.安装plugman npm install -g plugman 2.creat一个插件框架 plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版

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

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

  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    [注]:popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本. c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件. d.只有在做出浏览器动作时,才会触发该事件,如用

  • 详解React Native监听Android回退按键与程序化退出应用

    详解React Native监听Android回退按键与程序化退出应用 前言 我们知道Android回退按键,会控制页面返回, 并且退出应用并非真正意义退出,仍在后台运行,所以在某些场景下需要监控android回退按键,那么在React Native中应该如何应用呢?我们具体来看看. BackAndroid 此模块用于监听硬件的back键操作. 看下具体代码: BackAndroid.addEventListener('hardwareBackPress', function() { if (!

  • vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作

    最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填写表单A页面跳转到B页面,然后再从B页面返回到A页面,实现A页面的所填的数据保留 一.设置路由缓存: 1.App.vue中加入<keep-alive> 具体代码如下: <template> <div id="app"> <!--<img sr

  • Android返回键功能的实现方法

    本文实例讲述了Android返回键功能的实现方法.分享给大家供大家参考.具体如下: 在开发android应用时,常常通过按返回键(即keyCode == KeyEvent.KEYCODE_BACK)就能关闭程序,其实大多情况下并没有关闭改应用 我们可以这样做,当用户点击自定义的退出按钮或返回键时(需要捕获动作),我们在onDestroy()里强制退出应用,或直接杀死进程,具体操作代码如下: public boolean onKeyDown(int keyCode, KeyEvent event)

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

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

  • Cordova(ionic)项目实现双击返回键退出应用

    Android原生项目实现双击返回键退出应用,是十分简单的,添加如下代码即可实现: //记录按键时间 private long exitTime; @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK){ exit(); } return super.onKeyDown(keyCode, event); } public void exit(){

  • JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventListener("popstate", function(e) { window.location = 'http://www.baidu.com'; }, false); function pushHistory() { var state = { title: "title&quo

  • Android 中的监听和按键处理详情

    Android 中的监听和按键处理详情

    目录 各种监听 按键处理 onKeyDown() onBackPressed() Fragment中监听Back返回键 各种监听 我们来练习下各种监听.我们在 TextView 上添加了触摸监听,在 Button 上添加了长按监听,在 Spinner 下拉框选项发生变化的时候添加了监听,在 ListView 选中选项时增加了监听. xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • Android监听Home键和Back键的区别介绍

    一:Android 中Home键监听和Back键监听的区别: (1).在Android中,当按下Home键的时候,默认情况下Stop前台的Activity,即Activity设置成停止状态[onStop()],而不是销毁状态[onDestory()].如果再次启动该Activity,不是调用onCreate()方法,而是调用onSavedInstanceState方法.则是从onRestart()开始-onStart()-onResume(). (2).当按下back键则不同,back键默认fi

随机推荐