在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法:

使用mui进行手机的物理键的监听

1、首先安装 vue-awesome-mui

cnpm install vue-awesome-mui

2、在main.js中注册并使用

import Mui from 'vue-awesome-mui';
Vue.use(Mui);

3、在index.html中写如下的js代码

<script type="text/javascript">
mui.init({
keyEventBind: {
backbutton: true, //关闭back按键监听
}
})
//首页返回键处理
// 处理逻辑: 1s内,连续两次按返回键,则退出应用;
var first = null;
mui.back = function(){
// 首次按键, 提示 再按一次退出应用
if(!first){
first = new Date().getTime();//记录第一次按下回退键的时间
mui.toast("再按一次退出应用");
history.go(-1); // 回退到上一页
setTimeout(function(){
//1s 后清除
first = null;
}, 1000); }else{
if(new Date().getTime() - first < 1000){
//如果两次按下的时间小于1s
plus.runtime.quit(); //那么就退出app
}
}
}
</script>

vue打包成app后,点击手机上的物理返回按钮后直接退出app的更多相关文章

  1. Android用户点击返回按钮两次退出整个APP

    最近的APP项目有一个需求就是连续点击两次返回按钮,退出整个APP,而不是返回到上一个页面,这个连续是有时间限制的,在我的项目里,我设置成2秒钟,如果两秒之内点击了两次,就代表用户想要退出整个APP, ...

  2. vue打包成app后,背景图片不显示

    问题: 在使用npm run build 打包后, 如果在页面中使用img标签引入,打包后的路径是由index.html开始访问的,真正访问的是Static/img/图片名, 是正确的, 但是写在cs ...

  3. vue 打包成 apk 文件(修改路径)

    第一个坑:文件引用路径 现在项目我们什么都没动,是初始化之后直接打包的状态,打开dist/index.htmnl文件整个网页都是一片空白的. 爬坑: 打开 config文件夹/index.js文件 a ...

  4. Spring Boot:项目打包成war并发布到Tomcat上运行

    一.修改pom文件 1. 因为SpringBoot中嵌入的有Tomcat,因此要移除嵌入式的Tomcat插件 <dependency> <groupId>org.springf ...

  5. 在android中,如何去掉webview读取网页后点击网页上的按钮出现的方框

    参考:http://blog.sina.com.cn/s/blog_64056edc0100xt3l.html <style type="text/css"> .bor ...

  6. Hadoop打包成jar包在集群上运行时出现的各种问题以及解决方案

    之前将eclipse下编好的mapreduce代码放到集群上面跑,发现速度很慢,namenode节点的cpu和内存使用率很低,datanode节点基本上处于没有运行的状态,然后通过查看hadoop-e ...

  7. Android 手机上获取物理唯一标识码

    唯一标识码这东西在网络应用中非常有用,例如检测是否重复注册之类的. import android.provider.Settings.Secure;private String android_id ...

  8. Android 手机上获取物理唯一标识码[转]

    所有添加有谷歌账户的设备可以返回一个 ANDROID_ID 所有的CDMA设备对于 ANDROID_ID 和 TelephonyManager.getDeviceId() 返回相同的值(只要在设置时添 ...

  9. 第十三篇、Swift_Nav自定义返回按钮后或者隐藏导航栏,Pop返回手势失效的解决方法 Pop全局返回添加的方法

    边缘的pop返回手势: override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = UIColor.purple ...

随机推荐

  1. RN命令的使用

    RN中文网站 https://reactnative.cn/docs/getting-started/ 创建项目 1.最新版本项目react-native init MyApp 使用可行版本  rea ...

  2. mysql 中两个日期相减获得 天 小时 分钟 或者 小时:分钟的格式

    /**有一个需求,要求获得两个日期想减的天数,小时数,分钟数.通过查找资料,于是乎我写出了如下代码,来获得两个字段.*/ IFNULL(CONCAT( ,'-',''), ),),'天')), ),) ...

  3. 吴裕雄--天生自然TensorFlow2教程:张量限幅

    import tensorflow as tf a = tf.range(10) a # a中小于2的元素值为2 tf.maximum(a, 2) # a中大于8的元素值为8 tf.minimum(a ...

  4. pytorch 数据操作

    数据操作 在深度学习中,我们通常会频繁地对数据进行操作.作为动手学深度学习的基础,本节将介绍如何对内存中的数据进行操作. 在PyTorch中,torch.Tensor是存储和变换数据的主要工具.如果你 ...

  5. Java语言概述-JavaSE

    代码虐我千百遍,我视代码如初恋 初级学习思想: 先了解Java 下载中英文文档对照学习 多看,多学 多敲,狂练 多标注注释 总结—创造 https://baike.baidu.com/(Java百度百 ...

  6. Mysql 3306 被 linux 防火墙拦截

    项目测试时需要本地连接linux服务器的mysql, 发现navicat无法连接 原因一:mysql没有添加外部ip的访问权限. 原因二:mysql 的 3306 端口 处于被防火墙的拦截状态. 解决 ...

  7. 程序中出现list assignment index out of range的解决方法

    class stack: def __init__(self): self.num = 0 self.elem=[] def isEmoty(self): if self.num == 0: prin ...

  8. vue简单逻辑判断

    条件判断能否显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. 【MySQL 组复制】1.组复制技术简介

    组复制有两种模式 单主模式(single-primary/single-master)下自动选举出一个主节点,从而只允许在同一时刻只有该主节点可以更新数据. 对于MySQL的高级使用人员,可以通过复制 ...

  10. 开始新建AEM站点-周末教程

    Getting Started Developing AEM Sites - WKND Tutorial 开始新建AEM站点-周末教程 The goal for this multi-part tut ...