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
Feb 25 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
详解javascript函数的参数
Nov 10 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
JS匿名函数实例分析
Nov 26 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
使用ionic切换页面卡顿的解决方法
Dec 16 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
JS中常用的消息框总结
Feb 24 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 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 Undefined index和Undefined variable的解决方法
2008/03/27 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
vue实现评论列表功能
2019/10/25 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
python操作CouchDB的方法
2014/10/08 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python 元组和列表的区别
2020/12/30 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
大学生学习自我评价
2014/01/13 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
委托书怎样写
2014/08/30 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python