react单页面应用中，安卓返回键失效问题整理

最近在开发移动端app，发现安卓手机的实体返回键失效，找到解决办法后，留存至此，以备后查！

遇到bug：
第一个bug，当我在app中点击退出登陆时，app会返回授权登录页并清除storage本地缓存。此时按返回键应该退出app，但因为是从退出登录页面跳转到当前页面，所以window.history会有记录，此时点击返回按键实际会跳向退出登录的页面，造成未登录却依然可以进入app的bug。
第二个bug，进入app时，授权登录页会根据storage判断是否为登录状态，如果为登录状态就直接放行，让用户进入app进行使用，用网上一般解决办法时，在app首页点击返回键会向授权登录页跳转，但此时用户为登录状态，所以授权登录页的判断机制会让页面重新跳转进入app首页，造成在app首页按退出键无效的假象。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <style>
        html,body {height:100%;}
        body {margin:0;}
        .wrapper {width:100%;height:100%;border:none;}
        button {position: fixed;right:10px;bottom:10px;}
    </style>
</head>
<body>    
    <iframe class="wrapper" src="http://3.m.weiyuekj.com/?source=webapp"></iframe>

    <script>
    // 判断是非IE浏览器
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function () {
        var fc = FastClick.attach(document.body) //生成实例
      }, false)
    }
    document.addEventListener('plusready', function () {
      var webview = plus.webview.currentWebview();
      plus.key.addEventListener('backbutton', function () {
        webview.canBack(function (e) {
          if (e.canBack) {
            if( document.cookie.length !== 0 ){
              webview.back();
            }else{
              plus.runtime.quit(); 
            }
          } else {
            //webview.close(); //hide,quit
            //plus.runtime.quit();
            //首页返回键处理
            //处理逻辑：1秒内，连续两次按返回键，则退出应用；
            var first = null;
            plus.key.addEventListener('backbutton', function () {
              //首次按键，提示‘再按一次退出应用’
              if (!first) {
                first = new Date().getTime();
                setTimeout(function () {
                  first = null;
                }, 1000);
              } else {
                if (new Date().getTime() - first < 1500) {
                  plus.runtime.quit();
                }
              }
            }, false);
          }
        })
      });
    });
    </script>
</body>
</html>

最后编辑于：2019.03.07 17:06:20