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

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

  • registerBackButtonAction(callback, priority, [actionId])
  • 参数 类型 说明
  • callback function 当点击返回按钮时触发,如果该监视器具有最高的优先级
  • priority number 仅最高优先级的会执行
  • 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的功能"

ionic监听android返回键(实现“再按一次退出”功能)的更多相关文章

  1. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  2. vue+hbuilder监听安卓返回键问题

    1.监听安卓返回键问题 效果:在一级页面按一下返回键提示退出应用,按两下退出应用;在其它页面中,按一下返回上个历史页面 1 2 import mui from './assets/js/mui.min ...

  3. javascript监听手机返回键

    javascript监听手机返回键 <pre> if (window.history && window.history.pushState) { $(window).on ...

  4. Android系统onKeyDown监控/拦截/监听/屏蔽返回键、菜单键和Home键

    在Android系统中用来显示界面的组件(Component)为Activity,也就是说只有重写Activity的onKeyDown方法来监控/拦截/屏蔽系统的返回键(back).菜单键(Menu) ...

  5. cordova app 监听物理返回键

    物理返回键指的是手机系统自带的返回按钮,通过cordova监听返回按钮操作,可以禁止某些页面的返回操作,以及实现点击两次返回按钮退出应用. var pageUrl = window.location. ...

  6. 知识点---js监听手机返回键,回到指定界面

    方法一. $(function(){ pushHistory(); window.addEventListener(“popstate”, function(e) { window.location ...

  7. 监听浏览器返回键、后退、上一页事件(popstate)操作返回键

    在WebApp或浏览器中,会有点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面.确认离开页面或执行一些其它操作的需求.可以使用 popstate 事件进行监听返回.后退.上一页操作. 一 ...

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

    [注]:  popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对his ...

  9. [转]Cordova Android 返回键拦截(backbutton)和退出(再点击一次跳出)

    本文转自:https://blog.csdn.net/aierJun/article/details/53944061 在Android原生webview里重写onBackPressed()就可以.@ ...

随机推荐

  1. 移植linux4.14内核到四核Exynos4412开发板

    最近法师收到了很多留言,其中有一部分问法师什么时候更新,还有一大部分问法师我是买迅为的IMX6UL精英版好呢还是买4412精英版好呢,因为我们这俩个都不贵.法师的建议的是入手4412!为什么呢? 第一 ...

  2. 一个简单的jQuery回调函数例子

    jQuery回调函数简单使用 比如说,我们想要点击某个按钮后触发事件, 先把一些指定内容给隐藏掉, 然后跳出相关信息的对话框. 如果使用普通的方法, 不用回调函数的话, 会有怎么样的效果呢? 效果是先 ...

  3. 网站爬取-案例三:今日头条抓取(ajax抓取JS数据)

    今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方法不太一样,对它的抓取需要抓取后台传来的JSON数据,先来看一下今日头条的源码结构:我们 ...

  4. HotSpot Java对象创建,内存布局以及访问方式

    内存中对象的创建.对象的结构以及访问方式. 一.对象的创建 在语言层面上,对象的创建只不过是一个new关键字而已,那么在虚拟机中又是一个怎样的过程呢? (一)判断类是否加载.虚拟机遇到一条new指令的 ...

  5. 3dmax2017卸载/安装失败/如何彻底卸载清除干净3dmax2017注册表和文件的方法

    3dmax2017提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2017失败提示3dmax2017安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  6. MOOC(7)- case依赖、读取json配置文件进行多个接口请求-测试类中调用封装的mock(10)

    封装mock后,在单元测试中调用 # -*- coding: utf-8 -*- # @Time : 2020/2/11 8:35 # @File : test_class_10.py.py # @A ...

  7. DIP|PCN|CoevDB|PID|Y2H|RosettaDock Serve|元基因组学|微生物多样性

    生命组学: 比较真核生物有关呼吸链的gene是比较核外编码基因,因为与呼吸有关的功能在线粒体上,线粒体位于核外.想要查看两种基因是否具有相互作用,可以对不同物种的编码ATP6 和ATP8的直系同源基因 ...

  8. 《时间线》:WWT 数字宇宙,虚拟星空

    李北辰/文 王尔德说:我们生活在阴沟里,却仍有人仰望星空.如今,这句感叹依旧代表某种程度的正确,但这位19世纪的英国绅士有所不知:在一百多年后的东方"帝都",当困于阴沟中的年轻人们 ...

  9. 经典题型-打印小星星(python)

    # * # * * # * * * # * * * * # * * * * * x = 0 while x < 5: x += 1 # 每次循环需要给y赋值0.清空y中存储的值 y = 0 wh ...

  10. idea运行时默认显示的index.jsp修改方法

    在web.xml中加入以下代码,然后重启服务器就可以了. <welcome-file-list> <welcome-file>这儿写你要显示的页面名称</welcome- ...