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系列(38):设计模式之职责链模式详解
Mar 04 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
python threading模块操作多线程介绍
2015/04/08 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
房地产融资计划书
2014/01/10 职场文书
自荐书4要点
2014/01/25 职场文书
上课说话检讨书
2015/01/27 职场文书
实习介绍信模板
2015/01/30 职场文书
工程项目合作意向书
2015/05/08 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android