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

本帖最后由 liupeng9030 于 2019-7-24 09:50 编辑

之前发现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 = $('

再按一次退出应用

').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;

}