vue项目用hbuilder打包成APP后，返回键退出程序的解决办法

最新推荐文章于 2024-04-15 17:19:36 发布

原创最新推荐文章于 2024-04-15 17:19:36 发布 · 574 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍在使用HBuilder将Vue项目打包成APP后，如何处理返回键以实现更佳的用户体验。通过监听返回键事件，判断当前页面是否可以返回，若无法返回则提供二次确认退出的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目用hbuilder打包成APP后，返回键退出程序的解决办法
在这里插入图片描述

<script type="text/javascript">

      document.addEventListener('plusready', function() {

        var webview = plus.webview.currentWebview();

        plus.key.addEventListener('backbutton', function() {

          webview.canBack(function(e) {

            if (e.canBack) {

              webview.back();

            } else {

              //webview.close(); //hide,quit

              //plus.runtime.quit();

              //首页返回键处理

              //处理逻辑：1秒内，连续两次按返回键，则退出应用；

              var first = null;

              plus.key.addEventListener('backbutton', function() {

                //首次按键，提示‘再按一次退出应用’

                if (!first) {

                  first = new Date().getTime();

                  console.log('再按一次退出应用');

                  setTimeout(function() {

                    first = null;

                  }, 1000);

                } else {

                  if (new Date().getTime() - first < 1500) {

                    plus.runtime.quit();

                  }

                }

              }, false);

            }

          })

        });

      });

    </script>

未经过测试，仅自己学习使用