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的網站)

 

歡迎新增下面的 “公眾號” ，可以第一時間獲到文章推送 @_@