//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. 差分放大电路的CMRR与输入电阻分析

    分析了经典差分放大电路的共模抑制比CMRR与输入电阻RIN 1.经典差分放大电路 基于运放的经典差分放大电路在各模电教材中均能找到,利用分离电阻和运算放大器实现,如图1所示为一种差分放大电路: 图1 ...

  2. Pycharm IDE安装及注册激活笔记(1)

    一.Windows 下的安装及激活. 1.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=window ...

  3. PHP sprintf() 函数详解

    PHP中,sprintf()的作用是把字符串进行多种类型的格式化一般用法如下: sprintf ( string $format [, mixed $... ] ) : string 返回一个按要求格 ...

  4. JavaScript的数组系列

    数组 今天逆战班的学习主题关于Javascript的数组,主要有数组的概念.创建.分类.方法.遍历.经典算法...... 一.数组是什么呢?怎么写数组呢?数组有多少种呢? 数组的概念 对象是属性的无序 ...

  5. java套打快递单

    package org.sq.common.utils; import org.apache.commons.codec.binary.Base64;import org.apache.http.en ...

  6. git删除远程仓库中的文件夹

    具体操作如下: git rm -r --cached .history    #删除目录 git commit -m”删除.history文件夹” git push -r表示递归所有子目录,如果你要删 ...

  7. Community Cloud零基础学习(四)Builder创建自定义的布局

    前几篇讲了Community Cloud权限配置等信息,但是没有太讲过 Community如何进行配置layout,本篇主要描述使用Builder去进行符合需求的Community Layout的构建 ...

  8. 添加bash命令

    cd ~/.bash vim mya 键入 #!/bin/bash hostname -i :x 保存退出 source ~/.bash_profile 生效

  9. EF6.0 下sql语句自动生成的参数类型decimal(18,2)修改

    很多时候我们需要对插入到数据库的数据的精度做一个控制,例如sql server下保留6位小数使用numeric(10,6) .而到c#里对应的数据类型就是decimal ,但是使用EF6.0的crea ...

  10. Java中的IO与NIO

    前文开了高并发学习的头,文末说了将会选择NIO.RPC相关资料做进一步学习,所以本文开始学习NIO知识. IO知识回顾 在学习NIO前,有必要先回顾一下IO的一些知识. IO中的流 Java程序通过流 ...