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匿名函数的一种应用 代码封装
Jun 27 Javascript
jQuery filter函数使用方法
May 19 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
mysql5写入和读出乱码解决
2006/11/25 PHP
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php 静态变量的初始化
2009/11/15 PHP
php获取域名的google收录示例
2014/03/24 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
JS常用算法实现代码
2016/11/14 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Python中的各种装饰器详解
2015/04/11 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
为什么要用EJB
2014/04/17 面试题
表演方阵解说词
2014/02/08 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
青岛海底世界导游词
2015/02/11 职场文书
鸡毛信观后感
2015/06/11 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书