Vue3+Vant3——监听物理返回退出功能

Southern Wind

已于 2022-11-15 09:37:47 修改

阅读量2.6k

点赞数 1

分类专栏： TS Vue3 文章标签：前端 javascript 开发语言

于 2022-11-14 13:40:06 首次发布

本文链接：https://blog.csdn.net/nanchen_J/article/details/127844658

版权

Vue3 同时被 2 个专栏收录

43 篇文章 8 订阅

订阅专栏

21 篇文章 2 订阅

订阅专栏

按钮回退

vue3+vant做h5转App时，会遇到用手机上的返回键会直接回退到手机桌面，只能用过按钮来实现back回退，网上也有很多实现方法，但mui对vue3来说可能不太支持，所以这里使用原生js的方法实现。

这里可以这样定义

在index.html中引入vant链接。

接着写js部分，通过 plusready 事件来对物理返回键进行配置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NanChen_web</title>
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css" />
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>
</body>
<style>
</style>
<script>
  var time = '' // 用来存上一次按键时间；
  setTimeout(() => {
    // 监听返回按钮
    document.addEventListener('plusready', function () {
      plus.key.addEventListener('backbutton', function (evt) {
        var webview = plus.webview.currentWebview();
        var url = location.hash.split('/')[1];
        if (url === 'index') { // 处于首页时,实现退出app操作
          // vant.Toast('提示');
          if (new Date() - time < 2000) { // 小于2s,退出程序
            webview.close();
          } else { // 重置时间，
            time = new Date();
            vant.Toast('再次点击退出', 2000);
          }
          return;
        } else {
          vant.Toast('不满足条件');
          history.go(-1); // 不满足退出操作，，返回上一页
        }
      }, false);
    })
  }, 10)
</script>
</html>

完成后通过npm run build打包在手机上进行查看

下面是效果展示：

Southern Wind

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3+Vant3——监听物理返回退出功能

vue3+vant做h5转App时，会遇到用手机上的返回键会直接回退到手机桌面，只能用过按钮来实现back回退，网上也有很多实现方法，但mui对vue3来说可能不太支持，所以这里使用原生js的方法实现。完成后通过npm run build打包在手机上进行查看。在index.html中引入vant链接。事件来对物理返回键进行配置。接着写js部分，通过。
复制链接

扫一扫