用HTML5做APP时，有个讨厌的问题就是返回到哪里都窜，这真心让很多人大跌眼镜。本来只是想退出去，谁知道一按返回键，又给退到登录那了，简直让人哭笑不得。今儿个，我就跟大伙儿说说这事儿，希望对大家有所帮助，让你们的APP别再耍花样！

1. 返回键乱跳转的原因

好，让我解释下为啥会出现返回键瞎蹦跶这个问题！其实，就是，咱们在搞HTML5打包成APP的时候，没把返回事件给弄妥当——比方说，咱们可能懒省事刷location.href切换页面，而不是用webview加载新窗口。这么来的话，返回键，它就懵了，不晓得该回哪个界面去咯。

比如说，我们打开软件，进了主页(main.html=>HBuilder[webview])之后，选择要去的地方又跳到了登陆页面。登陆成功，转到功能页面，但这时一按下返回键，又回到登陆页面了，其实这并不是我们想看到的效果，更愿意在登陆之后，如果按了返回键，可以直接从APP消失。

            
            
货物查询
        

2. MUI框架的返回事件处理

搞定这事儿，我们就得用MUI框架里的重写回退函数功能。只有这样，才能达到我们预想的那个效果。说白了就是，你得在要监听的那几个页面上，把mui.back给复写一下儿。

不过，有点问题！现在我们是先跳转网页再创建窗口，这种方式混用的话，会出乎意料地产生奇妙效果。为啥？因为只有在最初的那个页面才能用mui.back来监听跳转！换句话说，要是在别的页面或者窗口进行监听，那就没用，全都被最早的那份文件里的mui.back截胡了。

//以下是mui.js中的源码，可以看到，在点击返回的时候，内部做了以下的操作
//$.hook={}是专门用于记录浏览的历史的。
$.back = function() {
        if (typeof $.options.beforeback === 'function') {
            if ($.options.beforeback() === false) {
                return;
            }
        }
        $.doAction('backs');
    };
$.doAction = function(type, callback) {//返回上一个记录
        if ($.isFunction(callback)) { //指定了callback
            $.each($.hooks[type], callback);
        } else { //未指定callback，直接执行
            $.each($.hooks[type], function(index, hook) {
                return !hook.handle();
            });
        }
    };
$.addAction = function(type, hook) {//添加历史记录
        var hooks = $.hooks[type];
        if (!hooks) {
            hooks = [];
        }
        hook.index = hook.index || 1000;
        hooks.push(hook);
        hooks.sort(function(a, b) {
            return a.index - b.index;
        });
        $.hooks[type] = hooks;
        return $.hooks[type];
    };

3. 解决方法：统一使用窗体打开页面

找到问题，咱们就能治病了！解决办法很容易，把所有的网页跳转都当作窗体打开！这么做的话，每个窗口都能监控到mui.back特殊的function，返回键乱跳的现象就消失咯。

简单说就是，咱们在要跳转到的界面里用createWindow方法多开几个新窗口，然后每个窗口都有它专属的回调函数，就不会弄混！

4. 实际操作示例

好，说的这么多理论我们来举个简单的例子。比如现在有个APP，主页就是main.html，登录就用login.html，主要功能就在function.html上了。那么问题来了，怎么让人登录以后点返回就能退出？

首先，咱们用createWindow方法打个招呼，把login.html展示出来！

javascript
mui.plusReady(function() {
直接跳到那个名叫“login.html”的页面，叫它“login”就行了。
});

咱们先搞定login.html。这儿要用到createWindow把function.html搞出来~

咱们先点击创建窗口。把“function.html”和“function”填进去。

终于，在function.html里，我们复制了mui.back函数，搞定了一按后退就关闭整个应用程序的动作。

mui.back = function() {

plus.runtime.quit();

};

这样一来，我们就可以实现点击返回键直接退出APP的功能了。

mui.back=function(){
//写你监听返回键后需要做的操作

5. 注意事项

在使用这种方法的时候，有几个注意事项需要提醒大家：

记住，所有要开新的窗口的页面，都要用 createWindow 这个方法，千万别乱点别的地方，用什么 location.href或者其他什么的。

如果要拷贝mui.back这个方法的话，记得要把它放到mui.plusReady里面去，这样才能等到网页全都加载完再开始处理返回事件。

要在多页重复调用mui.back方法的话，记得每页的回退事件处理得单独写，别让它们互相影响！

6. 总结

看了这么多，各位应该都懂！简单来讲，咱们只用HTML5把网页包装成应用，再搞定返回事件避免按键乱跳就行了。处理方法很简单，就是全权运用窗口打开页面，然后在要实行监听的页面上重写下mui.back这个方法就好！

这篇小文可以帮忙解决大家被APP频繁乱跳转的烦恼！遇到什么疑问或者好点子都可以在评论区留下，尽力帮助！别忘了分享并给我点个赞，让更多的朋友看到这篇好文章，一起学习进步。