Trust
Trust
  • 发布:2018-07-27 18:23
  • 更新:2023-01-19 20:25
  • 阅读:9615

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

分类:HTML5+

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();  
}

参考文档

6 关注 分享
k***@126.com l***@163.com 绝版咖啡 7***@qq.com [已删除] 1***@qq.com

要回复文章请先登录注册

Star777

Star777

打开外链怎么办呢
2023-01-19 20:25
K***@163.com

K***@163.com

你好,想问一下,这串代码写在h5的哪里?
2021-11-23 11:39
d***@sina.com

d***@sina.com

https://ext.dcloud.net.cn/plugin?id=2352 可以实现屏蔽系统返回键 ,并自定义行为
2020-07-21 11:41
1***@qq.com

1***@qq.com

思路不错,赞
2018-11-02 16:36
[已删除]

[已删除]

这个比较适合做内置浏览器
2018-10-14 12:03
7***@qq.com

7***@qq.com

干货,非常好用
2018-10-14 11:41