web app 中物理返回键的监听

使用Vue + Vant 进行web app 的开发，需要处理 android 自带的物理返回键，对不同页面，点击物理返回键进行不同的处理
 

那如何监听到物理返回键，并进行相应的处理？

 
 

app网页返回键 vs 手机物理返回键

 

网页上的返回键是返回上一个页面的意思，
手机上的返回键是返回上一个操作。
 

并且手机上的返回键还有很多其它功能，在使用某些软件可以双击返回键退出app

 
 

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(); //关闭应用 
                }
            })
        });

 
 

plus is not defined

 

在使用过程中，会遇到错误"plus is not defined" , 所以，在使用plus时，注意判断plus是否存在。

代码如下：

if (window.plus) {
        this.plusReady()
} else {
        document.addEventListener('plusready', this.plusReady, false)
}

将 backbutton 事件的添加，处理程序，写在 plusReady 方法中，即可
 
 

单击返回，双击退出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);
            }
        })
    });
});

作者：doubleyong

公众号：bug收集

博客：bugshouji.com (专门解决与收集bug的网站)

 

欢迎添加下面的 “公众号” ，可以第一时间获到文章推送 @_@