web app 中物理返回键的监听
web app 中物理返回键的监听
用户9914333
发布于 2022-07-22 14:00:46
发布于 2022-07-22 14:00:46
代码可运行
运行总次数：0
代码可运行
使用Vue + Vant 进行web app 的开发，需要处理 android 自带的物理返回键，对不同页面，点击物理返回键进行不同的处理
那如何监听到物理返回键，并进行相应的处理？
01
app网页返回键 vs 手机物理返回键
网页上的返回键是返回上一个页面的意思，
手机上的返回键是返回上一个操作。
并且手机上的返回键还有很多其它功能，在使用某些软件可以双击返回键退出app
02
Vue 中监听物理返回键
使用h5+ 提供的 plus 对象进行处理，具体代码如下
document.addEventListener('plusready', function () {
var webview = plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function () {
webview.canBack(function (e) {
if (e.canBack) {
webview.back(-1); //返回上一页
} else {
webview.close(); //关闭应用
}
})
});
03
plus is not defined 在使用过程中，会遇到错误"plus is not defined" , 所以，在使用plus时，注意判断plus是否存在。
代码如下：
if (window.plus) {
this.plusReady()
} else {
document.addEventListener('plusready', this.plusReady, false)
}将 backbutton 事件的添加，处理程序，写在 plusReady 方法中，即可
04
单击返回，双击退出app
实现，单击返回键进行退出，双击退出app
分析：通过一个 first 变量来记录次数，且两次点击的时间间隔不能超过1500.
代码如下
document.addEventListener('plusready', function () {
var webview = plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function () {
webview.canBack(function (e) {
if (e.canBack) {
webview.back();
} else {
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
plus.key.addEventListener('backbutton', function () {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime();
alert('再按一次退出应用');//返回提示
setTimeout(function () {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1500) {
plus.runtime.quit();
}
}
}, false);
}
})
});
});本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-12-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
