hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题
APP打包工具:hbuilder
需要js包:mui.js ,引入方法https://www.cnblogs.com/v616/p/11290281.html
实现原理:在vue根组件App.vue监听安卓机,按后退键时候vue的路由path
代码App.vue
代码片段:
data() {
return {
tabbarShow:true,
arrTab:['/home','/cat','/history','/me']
};
},
mounted(){
// 安卓后退键
this.$mui.plusReady( () =>{
var backcount = 0;
this.$mui.back = ()=> {
let path = this.$route.path;
console.log("path:"+path); if (this.arrTab.includes(path)) {
// 主导航页
if (this.$mui.os.ios) return;
if (backcount > 0) {
if (window.plus) plus.runtime.quit();
return;
};
this.$toast('再点击一次退出应用!');
backcount++;
setTimeout( () =>{
backcount = 0;
}, 2000);
} else {
// 子页面
console.log('子页面后退键');
this.$router.go(-1);
}
};
})
},
hbuilder+vue单页应用打包成APP后退按钮返回上一页的问题的更多相关文章
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- JS后退, JS返回上一页, JS返回下一页
Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.fo ...
- form表单中button按钮返回上一页解决办法
解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...
- 高并发分布式系统中生成全局唯一(订单号)Id js返回上一页并刷新、返回上一页、自动刷新页面 父页面操作嵌套iframe子页面的HTML标签元素 .net判断System.Data.DataRow中是否包含某列 .Net使用system.Security.Cryptography.RNGCryptoServiceProvider类与System.Random类生成随机数
高并发分布式系统中生成全局唯一(订单号)Id 1.GUID数据因毫无规律可言造成索引效率低下,影响了系统的性能,那么通过组合的方式,保留GUID的10个字节,用另6个字节表示GUID生成的时间(D ...
- 用javascript实现禁止页面后退返回上一页的代码
用javascript实现禁止页面后退返回上一页的代码: 有时候我们需要用户在点击了如下一步的按钮时,页面跳转到了下一个页面,这时想不允许用户返回后退到上一页,可以采用下面的方法: 在需要跳转的页 ...
- react 返回上一页
import * as React from 'react' import { Layout } from 'antd'; import creatHistory from 'history/crea ...
- html实现返回上一页的几种方法(javaScript:history.go(-1);)
html实现返回上一页的几种方法(javaScript:history.go(-1);) 一.总结: 1.javaScript:history.go(-1); 二.方法 1.通过超链接返回到上一页 & ...
- Js 实现返回上一页
Js 实现返回上一页 <a href="javascript:history.go(-1)">返回上一页</a> <a href="java ...
- vue打包成app后,点击手机上的物理返回按钮后直接退出app
在浏览器上浏览vue项目时,后退按钮是可以正常返回上一页的,但是打包成app后,点击手机上的屋里返回按钮,就直接退出app回到桌面了, 以下是解决办法: 使用mui进行手机的物理键的监听 1.首先安装 ...
随机推荐
- Python笔记(二十七)_魔法方法_容器
定制容器 容器类型的协议: 定制不可变容器,只需要定义__len__()和__getitem__()方法 定制可变容器,需要定义__len__().__getitem__().__setitem__( ...
- 2017埙箫简谱清单分享(附音频Demo)
前言 习箫五载,略有所获,皆在坚持. 本博文记录旨在记录练习过程中所录制的Demo以供自省.自娱.自乐,同时记录.分享简谱与箫友(目前为简谱,日后学会线谱后会添加相应谱子分类). 简谱 &&a ...
- Docker command line 学习笔记
deprecated ! 以后直接对这个更新 http://wangzhezhe.github.io/blog/2015/08/10/docker-operations/ 之前整理了好久,每次用到一点 ...
- 使用gitlab的webhook进行前端自动部署
gitlab有个功能叫webhook,比较适合前端代码的自动部署.其中的逻辑在 http://172.30.83.152:30080/help/user/project/integrations/w ...
- 在无界面centos7上部署MYSQL5.7数据库
1. 利用xshell连接好服务后,输入 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 下载软件安装 ...
- Java包的使用
好处 1.类似于文件系统的文件夹,可以实现分类管理类文件,方便查找2.解决了同一个项目中同名类的冲突问题 包的创建 命名规范: 建议小写字母,并且采用域名倒置的写法 域名倒置:com.baidu ww ...
- Consul集群Server模式
Consul集群Server模式 架构示意图 Consul在生产环境下运行模式分为两种:Server模式和Client模式(dev模式属于开发模式不在这里讨论),我们先用Server模式搭建一个Con ...
- 利用ssh-copy-id实现SSH无密码登录
第一步: 在远程服务器产生公钥与私钥对: $ ssh-keygen -t rsa 按照提示输入完后,会在~/.ssh目录下生成id_rsa和id_rsa.pub这两个文件 第二步:用ssh-copy- ...
- wxpython菜单栏、子菜单栏、弹出菜单栏、状态栏小程序学习源代码分享
#coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...
- RocksDB存储引擎测试
一:安装搭建(两个节点都要安装) yum install http://www.percona.com/downloads/percona-release/redhat/0.1-4/percona-r ...