//vue钩子函数created方法中添加监听等待设备API库加载好
created(){
  var that = this;
  document.addEventListener("deviceready", that.onDeviceReady, false);
}
methods:{
//设备API可以使用了,然后在vue的methods中添加如下方法
  onDeviceReady() {
    var that = this;
document.addEventListener("backbutton", that.eventBackButton, false);
  },
  //监听返回键按钮事件
  eventBackButton(){
    var that = this;
that.$toast('再按一次退出');//这里使用的是vantUI框架的弹窗提示,此处可根据自身项目进行更改
document.removeEventListener("backbutton", that.eventBackButton, false); //注销返回键
document.addEventListener("backbutton", that.exitApp, false);//绑定退出事件
var intervalID = setInterval(() => {
  document.clearInterval(intervalID);
  document.removeEventListener("backbutton", that.exitApp, false);
  document.addEventListener("backbutton", that.eventBackButton, false);
},2000);
  },
  // 关闭app
  exitApp() {
  var that = this;
  navigator.app.exitApp();
  }
}
//页面离开时销毁监听事件
destroyed() {
  var that = this;
  document.removeEventListener("backbutton", that.exitApp, false);
  document.removeEventListener("backbutton", that.eventBackButton, false);
},

vue+cordova实现退出app效果的更多相关文章

  1. vue+cordova 构建hybrid app

    配了一个 vue + cordova + ionicCli 的 项目 支持 ionic 的脚手架命令 支持 cordova 的 插件 安装使用 支持 webpack 的自动构建 vue 安装了 vue ...

  2. Vue+cordova开发App

    Vue+cordova开发App https://www.imooc.com/article/70062

  3. vue打包成app后,点击手机上的物理返回按钮后直接退出app

    在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法: 使用mui进行手机的物理键的监听 1.首先安装 ...

  4. iOS 之 退出app(项目)的几种方法

    路漫漫其修远兮,吾将上下而求索.也算是对程序员的一种真实写照了吧. 今天想研究一下iOS中退出项目的方法,说是今天,其实也关注并去了解很久了.只是始终找不到自己认为很好的方法.今天就先把自己了解的列举 ...

  5. 【前端】Vue和Vux开发WebApp日志一、整合vue+cordova和webpack+gulp

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux.html 项目github地址:https://github.com/shamoyuu/vue-vu ...

  6. Android:后台给button绑定onClick事件、当返回项目到手机页面时提示是否退出APP

    上一篇文章我们学习了android通过findViewById的方式查找控件,本章将了解button控件,及btton如何绑定控件. 通过android的ui设计工具设计一个登录页面: <Rel ...

  7. vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题

    vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外 ...

  8. ionic 项目内部更新用到的插件,退出app插件

    一 cordova-plugin-app-version插件  用来获取APP版本 ionic plugin add cordova-plugin-app-version -----cordova-p ...

  9. vue+cordova项目

    教你用Cordova打包Vue项目   现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app.据我现在的了解打包Vue项目目前流行的就是使 ...

随机推荐

  1. 5行js代码搞定导航吸顶效果

    一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...

  2. volatile关键字的理解

    volatile是java语言提供的一种稍弱的同步机制,它的作用是能够保证被volatile修饰的变量,每个线程在获取它的值时都能获取到最新的值. 要理解这个原理首先要知道java内存模型:每个线程都 ...

  3. iTerm2 都不会用,还敢自称老司机?(上)

    对于需要长期与终端打交道的工程师来说,拥有一款称手的终端管理器是很有必要的,对于 Windows 用户来说,最好的选择是 Xshell,这个大家都没有异议.但对于 MacOS 用户来说,仍然毋庸置疑, ...

  4. webpack压缩图片之项目资源优化

    webpack打包时,会根据webpack.config.js 中url-loader中设置的limit大小来对图片进行处理,小于limit的图片转化成base64格式,其余的不做操作.对于比较大的图 ...

  5. javascript闭包的用处

    谈及javascript的闭包,可能想到的就是内存泄露,慎用闭包,但是实际上闭包还有更多好的作用: 1,可以将for循环的变量封闭在闭包环境中,下面这种情况,无论点击1-5div,最终打印的都是5,因 ...

  6. SpringBoot图文教程17—上手就会 RestTemplate 使用指南「Get Post」「设置请求头」

    有天上飞的概念,就要有落地的实现 概念十遍不如代码一遍,朋友,希望你把文中所有的代码案例都敲一遍 先赞后看,养成习惯 SpringBoot 图文教程系列文章目录 SpringBoot图文教程1-Spr ...

  7. EPX-Studio脚本调用

    procedure TF408017792.Button1Click(Sender: TObject); var NEPX: IExcelPanelXDisp; begin NEPX := this. ...

  8. 解开Service Mesh的神秘面纱

    一.什么是Service Mesh? 下面是 Willian Morgan 对 Service Mesh 的解释: A Service Mesh is a dedicated infrastructu ...

  9. angular6 增加webpack配置 亲测可用

    核心 Angular Cli 6 禁用了webpack的自定义配置,官方似乎并未提供自定义配置webpack的方法. 在此之前,可以使用ng eject把默认的webpack提取到代码中,进行自定义. ...

  10. 大数据软件安装之ZooKeeper监控

    一.ZooKeeper安装 官方文档: https://zookeeper.apache.org/doc/r3.5.5/zookeeperStarted.html 1.解压分发 [test@hadoo ...