【分享】在 5+App 中监听“返回”按钮

5+App 中，以下情况均触发 backbutton 事件。

• Android 物理返回键
• 原生 titleNView 左上角的 backbutton

下面是一个监听 backbutton 的最简示例：

var plusReady = function (callback) {  
    if (window.plus) {  
        callback();  
    } else {  
        document.addEventListener('plusready', callback);  
    }  
};  

plusReady(function () {  
    var firstBack = 0;  
    var handleBack = function () {  
        var currentWebview = plus.webview.currentWebview();  
        var topWebview = plus.webview.getTopWebview();  
        var now = Date.now || function () {  
            return new Date().getTime();  
        };  

        currentWebview.canBack(function (evt) {  
            /**  
             * 有可后退的历史记录，则后退。  
             * 否则，关闭当前窗口。  
             * 如果当前窗口是入口页，那么执行退出的逻辑。  
             */  
            if (currentWebview.id === plus.runtime.appid) {  
                if (!firstBack) {  
                    firstBack = now();  
                    plus.nativeUI.toast('再按一次退出应用');  

                    setTimeout(function () {  
                        firstBack = 0;  
                    }, 2000);  
                } else if (now() - firstBack < 2000) {  
                    plus.runtime.quit();  
                }  
            } else {  
                if (evt.canBack) {  
                    history.back();  
                } else {  
                    currentWebview.close('auto');  
                }  
            }  
        });  
    };  

    plus.key.addEventListener('backbutton', handleBack);  
});

该示例适用于 C/S 结构的 5+App，并且每个窗口都加载这段 JS。

如果是 Vue.js 等构建的 SPA 页面，那么需要根据当前的路径信息，判定是后退还是退出，例如：

// 模式不同，需要取的值也不一样，这里仅做示例，非真实场景。  
var path = location.path;  
var hash = location.hash;  

if (path === '/') {  
    // 入口页了，执行退出。  
    plus.runtime.quit();  
} else {  
    // 根据实际需求选择相应的方法  
    router.go(-1);  
    history.back();  
}

参考文档

• HTML中如何安全调用5+API
• Android返回键back事件处理兼容性问题
• plus.key
• plus.webview
• plus.webview.WebviewObject