mui+vue监听安卓手机返回键

最新推荐文章于 2023-07-24 10:47:47 发布

原创

最新推荐文章于 2023-07-24 10:47:47 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#mui #vue #返回键

本文介绍了如何在mui和vue结合的项目中监听安卓手机的返回键。通过在index.html中初始化mui，可以默认监听back键。如果希望在特定页面需要两次返回键退出应用，可以在这些页面进行额外的设置，确保返回行为符合预期。

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

1.引入mui之后，在index.html中初始化mui，可以不设置keyEventBind，默认监听back，menu键

  <!-- 引入mui -->
  <script src="./static/mui/js/mui.min.js"></script>

  <script type="text/javascript" charset="utf-8">
    mui.init({
      //监听Android手机的back、menu按键
      keyEventBind: {
        backbutton: true,  //Boolean(默认true)关闭back按键监听
        menubutton: true   //Boolean(默认true)关闭menu按键监听
      },    
    });  
   
  </script>

若只在首页两次按键退出应用，其他页面一次按键返回上一页，做出以上设置即可。

若需要在其他页面两次按键退出应用，继续以下设置

2.需要两次返回键退出应用的vue页面做出如下设置

    mounted() {
        // mui.init();
        var clickNum = 0;
        mui.back = function(event) {
          clickNum++;
          if(clickNum > 1) {
            plus.runtime.quit();
          } else {
            mui.toast("再按一次退出应用");
          }
          setTimeout(function() {
            clickNum = 0
          }, 2000);