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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
js实现百度淘宝搜索功能
Feb 17 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 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实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
js控制div弹出层实现方法
2015/05/11 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python实现图像几何变换
2015/07/06 Python
python实现员工管理系统
2018/01/11 Python
python在每个字符后添加空格的实例
2018/05/07 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
2014年父亲节活动方案
2014/03/06 职场文书
酒店管理求职信范文
2014/04/06 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
横店影视城导游词
2015/02/06 职场文书
机器人总动员观后感
2015/06/09 职场文书