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

小咪咪 2023-07-18 02:30 17阅读 0赞

mui进行手机物理键的监听

首先安装 vue-awesome-mui

npm i vue-awesome-mui

在main.js注册

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

![在这里插入图片描述][20200323145804859.png]  
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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70]

[20200323145804859.png]: /images/20230528/2c92807f0e2f463b8e7a8f013d74975e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hYSF9jc2Ru_size_16_color_FFFFFF_t_70]: /images/20230528/92dca8f2f2ab4e2fb7f853ca4388ca51.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android连续点击两次返回键退出App

Android连续点击两次返回键退出App private long firstTime = 0; @Override

缺乏、安全感/ 2023年10月18日 07:21/ 0 赞/ 64 阅读

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

mui进行手机物理键的监听首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 import Mui f

小咪咪/ 2023年07月18日 02:30/ 0 赞/ 18 阅读

相关 Vue 中 app 监听安卓物理返回

// 监听安卓返回键在main.js中 //监听安卓返回键 (function() \{ function plusReady() \{

àì夳堔傛蜴生んèń/ 2023年02月26日 10:21/ 0 赞/ 5 阅读

相关解决安卓系统返回键直接退出app

<script> mui.init({ keyEventBind: { backbutton: true //关闭bac

约定不等于承诺〃/ 2023年02月18日 14:07/ 0 赞/ 35 阅读

相关物理返回键事件处理

物理返回键 1）app内：在app1上，H5和app约定好在window对象上定义一个全局的方法，比如window.back方法，H5会在路由定义位置，定义该方法。当触

曾经终败给现在/ 2022年12月21日 04:54/ 0 赞/ 208 阅读

相关 Android按返回键不退出

@Override public boolean onKeyDown(int keyCode, KeyEvent event) \{ if (keyCode == Ke

Bertha 。/ 2022年08月08日 09:19/ 0 赞/ 236 阅读

相关 F7+vue 物理返回键监听使用

[F7+vue 物理返回键监听使用][F7_vue] 以前使用的是纯F7,这个项目加了Vue进去，但碰到了一个问题，就是这样监听不到安卓物理键的返回，它是点击返回，直接推出程

蔚落/ 2022年06月05日 11:57/ 0 赞/ 298 阅读

相关 Flutter实战之坑——按返回键回到手机桌面不退出app

> 原理：在main里监听最外层返回键，然后通讯原生，执行 `moveTaskToBack(false)` 回到手机桌面不退出app 安卓文件里 `MainActivity

曾经终败给现在/ 2022年01月19日 01:23/ 0 赞/ 971 阅读

相关 vue 移动端物理返回键

柚子写过一个Vue的移动端项目，当时遇到一个问题，就是按手机上的自带的物理返回按钮时，会直接退出应用程序，后来百度了一些关于手机物理返回键的文章，也终于是解决了，

雨点打透心脏的1/2处/ 2022年01月15日 00:39/ 0 赞/ 466 阅读

相关 Taro-reLaunch，按下物理返回键退出小程序

不管在Taro还是小程序里使用 reLaunch API 都会关闭所有页面，打开到应用内的某个页面，这样的话，在安卓上按下物理返回键，就会有退出小程序的BUG出现。公众号：

刺骨的言语ヽ痛彻心扉/ 2021年08月30日 20:53/ 0 赞/ 709 阅读