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


Posted in Javascript onAugust 19, 2017

在安卓下,如果不处理系统返回键的事件,那么每次点击返回键,将页面将返回到上一个路由,这种逻辑不符合app的路由逻辑。正确的应该是:当页面到了各个导航页的首页时,此时再按返回键应该提示是否退出app,用户点击确认后退出app。

在run()方法中添加下面的方法

$ionicPlatform.registerBackButtonAction(function (e){
    //阻止默认的行为
    e.preventDefault();
    // 退出提示框
    function showConfirm() {
     var servicePopup = $ionicPopup.show({
      title: '提示',
      subTitle: '你确定要退出应用吗?',
      scope: $rootScope,
      buttons: [
       {
        text: '取消',
        type: 'button-clear button-assertive',
        onTap: function () {
         return 'cancel';
        }
       },
       {
        text: '确认',
        type: 'button-clear button-assertive border-left',
        onTap: function (e) {
         return 'active';
        }
       },
      ]
     });
     servicePopup.then(function (res) {
      if (res == 'active') {
       // 退出app
       ionic.Platform.exitApp();
      }
     });
    }
     // 判断当前路由是否为各个导航栏的首页,是的话则显示提示框
    if ($location.path() == '/index' || $location.path() == '/product' || $location.path() == '/account' || $location.path() == '/more') {
     showConfirm();
    } else if ($ionicHistory.backView()) {
     $ionicHistory.goBack();
    } else {
     showConfirm();
    }
    return false;
   }, 101); //101优先级常用于覆盖‘返回上一个页面'的默认行为

$ionicPlatform.registerBackButtonAction()

该方法是用来注册系统返回键事件。每次点击只会执行最高优先级的那个行为。比如当页面存在一个modal框的时候,此时点击系统返回键则是关闭modal框,而不是返回上个视图。

ionic官方已经定义了常用的行为的优先级:

  • 返回上个视图=100;
  • 关闭侧栏菜单=150;
  • 关闭Modal=200;
  • 关闭 action sheet=300;
  • 关闭popup=400;
  • 关闭loading=500;

用法如下:

registerBackButtonAction(callback, priority, [actionId])

所以当你要重写ionic官方定义上面那些行为,你只需要设置优先级大于那些行为的优先级即可。比如你要覆盖的是返回上个视图的行为,那么你只需要传入的proirity的值大于100(同时要小于150)即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(十五)
Jan 28 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 #Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 #Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 #Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 #Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 #Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
You might like
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
优秀体育委员自荐书
2014/01/31 职场文书
小学生开学感言
2014/02/28 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
暑期培训班策划方案
2014/08/26 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
2015年超市工作总结范文
2015/05/26 职场文书