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 相关文章推荐
jquery之empty()与remove()区别说明
Sep 10 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP学习记录之数组函数
2018/06/01 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python编程之多态用法实例详解
2015/05/19 Python
python正则表达式re之compile函数解析
2017/10/25 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
青奥会口号
2014/06/12 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle