Cordova(ionic)项目实现双击返回键退出应用


Posted in Javascript onSeptember 17, 2019

Android原生项目实现双击返回键退出应用,是十分简单的,添加如下代码即可实现:

//记录按键时间
  private long exitTime;
  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    if(keyCode == KeyEvent.KEYCODE_BACK){
      exit();
    }
    return super.onKeyDown(keyCode, event);
  }
  public void exit(){
    if ((System.currentTimeMillis()-exitTime)>2000){
      // 点击间隔大于两秒,做出提示
      Toast.makeText(getApplicationContext(), "再按一次退出应用", Toast.LENGTH_SHORT).show();
      exitTime = System.currentTimeMillis();
    }else{
      finish();
      System.exit(0);
    }
  }

然而,在Cordova项目中,在继承CordovaActivity的MainActivity中添加上面的代码并不起作用,原因是返回键已经被Cordava的WebView处理掉了。

解决办法:在app.js的config中添加如下代码:

// 等待加载PhoneGap
document.addEventListener("deviceready", onDeviceReady, false); 
// PhoneGap加载完毕
function onDeviceReady() {
//按钮事件
document.addEventListener("backbutton", eventBackButton, false); //返回键
document.addEventListener("menubutton", eventMenuButton, false); //菜单键
document.addEventListener("searchbutton", eventSearchButton, false); //搜索键
}
 
//返回键
function eventBackButton(){
//confirm("再点击一次退出!");
window.plugins.ToastPlugin.show_short('再点击一次退出!');
document.removeEventListener("backbutton", eventBackButton, false); //注销返回键
  //3秒后重新注册
  var intervalID = window.setInterval(
    function() {
      window.clearInterval(intervalID);
      document.addEventListener("backbutton", eventBackButton, false); //返回键
    },
    3000
  );
}
//菜单键
function eventMenuButton(){
  window.plugins.ToastPlugin.show_short('点击了 菜单 按钮!');
}
//搜索键
function eventSearchButton(){
  window.plugins.ToastPlugin.show_short('点击了 搜索 按钮!');
}

上面的脚本用到了Cordova的Toast插件,插件地址:

cordova plugin add

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
JavaScript中的new的使用方法与注意事项
May 16 Javascript
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
UI Events 用户界面事件
Jun 27 Javascript
创建一个类Person的简单实例
May 17 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 #Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 #Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 #Javascript
小程序的上传文件接口的注意要点解析
Sep 17 #Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 #Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 #Javascript
ionic2.0双击返回键退出应用
Sep 17 #Javascript
You might like
Admin generator, filters and I18n
2011/10/06 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP调用其他文件中的类
2018/04/02 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
Vue实现简单计算器
2021/01/20 Vue.js
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python实现计算资源图标crc值的方法
2014/10/05 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
2015元旦标语横幅
2014/12/09 职场文书