vue开发app 手机物理返回键返回/退出

使用MUI监听手机物理键

最新推荐文章于 2025-09-05 09:30:21 发布

原创最新推荐文章于 2025-09-05 09:30:21 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍如何利用vue-awesome-mui插件在移动端应用中监听手机物理返回键。通过在main.js中注册MUI并配置init方法，可以实现对backbutton事件的监听。文章详细解释了如何设置双击退出应用的逻辑。

mui进行手机物理键的监听

首先安装 vue-awesome-mui

npm i vue-awesome-mui

在main.js注册

import Mui from 'vue-awesome-mui';
Vue.use(Mui);

在这里插入图片描述
index.html

<script>
      mui.init({
                swipeBack: false, //关闭右滑关闭功能(默认就是false)
                keyEventBind: {
                    backbutton: true //开启back按键监听( 默认就是true)
                }
      });
        // //首页返回键处理
        // //处理逻辑：1秒内，连续两次按返回键，则退出应用；
        var first = null;
       mui.back = function() {
       //首次按键，提示 再按一次退出应用
       if (!first) {
            first = new Date().getTime(); //记录第一次按下回退键的时间
            mui.toast("再按一次退出应用"); //给出提示
            history.go(-1); //回退到上一页面
           setTimeout(function() {
              //1s中后清除
            first = null;
             }, 1000);
           } else {
             if (new Date().getTime() - first < 1000) {
             //如果两次按下的时间小于1s，
             plus.runtime.quit(); //那么就退出app
             }
           }
        };
    </script>

在这里插入图片描述