分享一个Wex5点击Android物理后退键的自定义事件

liupeng9030

之前发现Wex5自带的点击Android物理后退键有点问题，当app进入后台一段时间后，再切换回前台，有一定的机率点击android物理后退键会出现执行“history.back();”而不是“justep.Shell.closePage();”。为了解决这样的问题，放弃了Wex5内置的CommonUtils.attachDoubleClickExitApp方法，使用自定义的方法。亲测问题完美解决。

1.注释掉最外层的index.js中的CommonUtils.attachDoubleClickExitApp方法，但一定要保留shellImpl.useDefaultExitHandler = false;这句话，并将shellImpl对象暴露到全局。
        //引入自定义的common.js，在common.js中将写入自定义Android物理后退事件
        window["common"] = require("./resources/js/common");
        //引入自定义的common.css，加入全局的公共样式
        require("css!./resources/css/common").load();
        var Model = function() {
                this.callParent();
               
                //创建shellImpl对象，组建单页面模型
                var shellImpl = new ShellImpl(this, {
                    "contentsXid" : "pages",
                    "pageMappings" : this.getPageMappings()//该方法我就不在这写出来了，肯定都会
                });
               
                //将shellImpl拓展至全局
                window["shellImpl"] = shellImpl;
               
                //屏蔽系统默认的android物理后退键退出方式
                shellImpl.useDefaultExitHandler = false;
               
//                //注册自定义的android物理后退键退出方式，当为login页面及index页面的时候，点击两次返回退出
//                CommonUtils.attachDoubleClickExitApp(function() {
//                        var _curXid = shellImpl.pagesComp.contents[shellImpl.pagesComp.getActiveIndex()]["xid"];
//                        
//                        if (_curXid == "main" || _curXid == "index-main") {
//                                return true;
//                        }
//                        return false;
//                }/*, function() {
//                        //app最小化
//                        window.plugins.appMinimize && window.plugins.appMinimize.minimize();
//                }*/);
        };



2.在自定义的common.js中，写入自定义的Android物理后退键事件，并注册事件
       /*-------------------------- 注册点击android物理后退键事件 --------------------------*/
        var _backButtonClickTimes = 0;
        var _fun_clickAndroidBackbutton = function() {
                //屏蔽系统默认的android物理后退键退出方式
                window["shellImpl"].useDefaultExitHandler = false;
                var _curXid = window["shellImpl"].pagesComp.contents[shellImpl.pagesComp.getActiveIndex()]["xid"];
               
                //判断是否由子页面屏蔽了默认的后退按钮点击事件。加入这个判断的目的是为了能够在页面中屏蔽android物理后退键，只需要设置window["ForbidDefaultBackbuttonClick"]=true;即可。如果想要恢复，只需要window["ForbidDefaultBackbuttonClick"]=false；即可。如果不考虑在页面中屏蔽android物理后退键的点击，则可以将下面这个判断删除               
                if (window["ForbidDefaultBackbuttonClick"]) {
                        return;
                }
               
                //在特定页面时（main为登录页、index-main为登录后的主页面）
                if (_curXid == "main" || _curXid == "index-main") {
                        //直接最小化app（如果需要点击Android物理后退键最小化应用，则需要引入cordova-plugin-appminimize插件，在GitHub上搜，然后放入native/plugins目录，注意文件夹名称为cordova-plugin-appminimize）
                        //window.plugins.appMinimize && window.plugins.appMinimize.minimize();
                        //return;
                        
                        //按两次退出
                        if (_backButtonClickTimes === 0) {
                                _backButtonClickTimes++;
                                var msg = $('<div class="app-exit-prompt">再按一次退出应用</div>').appendTo('body');
                                msg.fadeIn(400).delay(2000).fadeOut(400, function() {
                                        _backButtonClickTimes = 0;
                                        msg.remove();
                                });
                        }
                        else if (_backButtonClickTimes == 1) {
                                navigator.app.exitApp(); //退出App
                        }
                }
                //普通页面
                else {
                        if ($('html').hasClass("x-focus-in")) {
                                $('html').removeClass("x-focus-in");
                        }
                        else {
                                justep.Shell.closePage();
                        }
                }
        };
        var _fun_regisgerAndroidBackbuttonClick = function() {
                //先移除，再添加
                document.removeEventListener('backbutton', _fun_clickAndroidBackbutton, false);
                document.addEventListener('backbutton', _fun_clickAndroidBackbutton, false);
        };
        //注册安卓物理后退键点击事件
        _fun_regisgerAndroidBackbuttonClick();
        //页面关闭时取消注册安卓物理后退键点击事件
        $(window).on('beforeunload', function() {
                document.removeEventListener('backbutton', _fun_clickAndroidBackbutton, false);
        });



3.在自定义的common.js中，加入app恢复至前台时的事件，用于重新注册Android物理后退键点击事件
        //app恢复至前台
        document.addEventListener('resume', function(event) {
                //重新注册安卓物理后退键点击事件
                _fun_regisgerAndroidBackbuttonClick();
        });



4.在common.css中，加入app-exit-prompt样式
/*--------------------------- app退出时的提示 ---------------------------*/
.app-exit-prompt {
        display: none;
        z-index:99999;
        position: fixed;
        bottom: 25px;
        left: 50%;
        width: 160px;
        margin-left: -80px;
        text-align: center;
        background-color: #333;
        color: #fff;
        font-size: 14px;
        font-family: Arial;
        border-radius: 3px;
        padding: 7px 15px;
}