Wex5 v3.8.6257偶现Android物理后退键有问题

liupeng9030

由于项目原因，我们使用的单页面模型，我们会把wex5的“UI2/system/components/justep/common/utils.js”文件进行修改，由原来的“history.back();”改为：“justep.Shell.closePage();”。从3.6开始就一直这样，用到3.7，再用到3.8.6220版本，一直都没有问题。

自从去年12月份，升级到Wex5 v3.8.6257版本后，一直偶尔出现一个问题：app进入后台一段时间后，再切换回前台，有一定的机率点击android物理后退键会出现执行“history.back();”而不是“justep.Shell.closePage();”，非常奇怪！这时候把app彻底关掉重新打开，就没问题了。

但这样的问题也不是每次都会出现，但每天我都会遇到，所以也没有办确定是哪边有问题。但我可以肯定的是升级到Wex5 v3.8.6257才有的问题，之前没有的。希望官方能够检查一下，今早解决这样的问题

liupeng9030

我貌似把这个问题解决掉了，解决方法是重构注册自定义android物理后退键退出方式。自己写代码，并且在resume事件中（app恢复到前台）时，重新注册自定义android物理后退键退出方式。不用CommonUtils.attachDoubleClickExitApp方法。到目前为止测试了很多次，都没问题。

gaiyi

liupeng9030 发表于 2019-6-11 16:28
我貌似把这个问题解决掉了，解决方法是重构注册自定义android物理后退键退出方式。自己写代码，并且在resum ...

你好，我也遇到这个问题了，很久了，一直都没找到有效的解决办法。可以说的详细一点吗？改哪里？如何改？多谢多谢

liupeng9030

gaiyi 发表于 2019-7-17 20:05
你好，我也遇到这个问题了，很久了，一直都没找到有效的解决办法。可以说的详细一点吗？改哪里？如何改？ ...

抱歉，好久没登录这边了，才看到消息。

问题是这样解决的：
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;
}

gaiyi

liupeng9030 发表于 2019-7-23 09:42
抱歉，好久没登录这边了，才看到消息。

问题是这样解决的：

我试了一下你的代码，有些地方不知道改的对不对，最后导致安卓物理返回键不能用了。
有个疑问需要你再次解答：
1：“注释掉最外层的index.js中的CommonUtils.attachDoubleClickExitApp方法”，这个是指哪个index？
我们的项目是有一个index的，但这是项目的根目录，即app打开加载的页面，根目录里是没有这个方法的，index有引用
var ShellImpl = require('$UI/system/lib/portal/shellImpl');
shellImpl.js中引用了var CommonUtils = require("$UI/system/components/justep/common/utils"),
而attachDoubleClickExitApp这个方法是在CommonUtils($UI/system/components/justep/common/utils)中的。
this.useDefaultExitHandler = true;这句代码也是在shellImpl.js中的。


shellImpl.js中有这个方法，是不是注释这个方法体内的代码？
ShellImpl.prototype.initDoubleClickExitApp = function(){
                var self = this;
                CommonUtils.attachDoubleClickExitApp(function(){
                        if(self.pagesComp.getActiveIndex() === 0){
                                return true;
                        }
                        return false;
                });
        };
2：还有自定义的common.js，头部是否要这样写？把代码包起来，并且引用shellImpl.js。。。

define(function(require) {
        var shellImpl = require('$UI/system/lib/portal/shellImpl');
});


我看你给的代码中没有引用shellImpl.js，然后系统在这句代码给了错误提示：shellImpl is undefind
var _curXid = window["shellImpl"].pagesComp.contents[shellImpl.pagesComp.getActiveIndex()]["xid"];

liupeng9030

gaiyi 发表于 2019-7-24 14:32
我试了一下你的代码，有些地方不知道改的对不对，最后导致安卓物理返回键不能用了。
有个疑问需要你再次解 ...

先回答第二个问题，common.js需要加入define(function(require){});所有代码都在其中。  不需要引用var shellImpl = require('$UI/system/lib/portal/shellImpl');。不需要。

liupeng9030

gaiyi 发表于 2019-7-24 14:32
我试了一下你的代码，有些地方不知道改的对不对，最后导致安卓物理返回键不能用了。
有个疑问需要你再次解 ...

回答第一个问题，你们最外层的index.w应该是下面这些代码吧？
define(function(require) {
        var $ = require("jquery");
        var justep = require("$UI/system/lib/justep");
        var ShellImpl = require('$UI/system/lib/portal/shellImpl');

        var Model = function() {
                this.callParent();
                var shellImpl = new ShellImpl(this, {
                        "contentsXid" : "pages",
                        "pageMappings" : {
                                "main" : {
                                        url : require.toUrl('./main.w')
                                }
                        }
                })

        };

        Model.prototype.modelLoad = function(event){
                justep.Shell.showPage("main");
        };

        return Model;
});

gaiyi

liupeng9030 发表于 2019-7-24 14:56
回答第一个问题，你们最外层的index.w应该是下面这些代码吧？
define(function(require) {
        var $ = requ ...

ok，经过一下午的打包测试。可以了，多谢！但是这段代码我没有注释，经测试似乎改不该改都不影响，可能是因为在common中重写了这些方法，还有index中重写了useDefaultExitHandler的值，以致系统优先采用了自定义的方法。CommonUtils.attachDoubleClickExitApp，还有this.useDefaultExitHandler = false。
                // 将shellImpl拓展至全局
                window["shellImpl"] = shellImpl;

                // 屏蔽系统默认的android物理后退键退出方式
                shellImpl.useDefaultExitHandler = false;

只是还不确定这个问题是否已修复，只能慢慢验证了。

liupeng9030

gaiyi 发表于 2019-7-24 17:45
ok，经过一下午的打包测试。可以了，多谢！但是这段代码我没有注释，经测试似乎改不该改都不影响，可能是 ...

CommonUtils.attachDoubleClickExitApp需要注释的，虽然目前在common.js中重写了backbutton事件，并且每次重写之前都会对事件先解绑再添加，表面上看起来没什么问题，但是在CommonUtils.attachDoubleClickExitApp中注册的backbutton事件，我是没法解绑的，因为这边获取不到原有的function，会导致点Android物理后退键的时候，两边都执行。所以为了确保没问题，你还是把index.w中的CommonUtils.attachDoubleClickExitApp注释掉吧

gaiyi

liupeng9030 发表于 2019-7-25 16:52
CommonUtils.attachDoubleClickExitApp需要注释的，虽然目前在common.js中重写了backbutton事件，并且每 ...

好的，感谢！