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之四(优雅的迭代)
Jun 20 Javascript
javascript操作css属性
Dec 30 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 Javascript
微信小程序picker组件两列关联使用方式
Oct 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php使用异或实现的加密解密实例
2013/09/04 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python 的类、继承和多态详解
2017/07/16 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python实现的knn算法示例
2018/06/14 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python实现简单银行管理系统
2019/10/25 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
社区居务公开实施方案
2014/03/27 职场文书
《搭石》教学反思
2014/04/07 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
《少年闰土》教学反思
2016/02/18 职场文书