使用Vue开发APP 手机虚拟返回键点击退出应用解决办法

最近的项目是使用Vue全家桶+HBuilder打包开发一个移动端APP。

在测试的时候发现，当安卓手机使用虚拟按钮的时候，点击虚拟按钮的返回键，APP会直接退出。

这是因为安卓手机自带back虚拟按键，如果不修改其默认事件，点一下app就退出了，

所以需要修改这个按键默认事件事件的代码。

在index.html中加入一个script，加上如下代码：

    <script>
      document.addEventListener('plusready', function () {
          var first = null;
          var webview = plus.webview.currentWebview();
          plus.key.addEventListener('backbutton', function () {
              webview.canBack(function (e) {
                  if (e.canBack) {
                    webview.back(); //这里不建议修改自己跳转的路径  
                  } else {
                    //首次按键，提示‘再按一次退出应用’  
                    if (!first) {
                      first = new Date().getTime(); //获取第一次点击的时间戳  
                      plus.nativeUI.toast("再按一次退出应用", {
                        duration: 'short'
                      }); //通过H5+ API 调用Android 上的toast 提示框  
                      setTimeout(function () {
                        first = null;
                      }, 1000);
                    } else {
                        // 获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次, 
                      if (new Date().getTime() - first < 1000) {  
                        plus.runtime.quit(); //退出应用  
              }
            }
          }
        })
      });
    });
    </script>