Vue-app:物理返回键设置(单击跳转/双击退出)

1.概述

           实现手机物理返回键的跳转逻辑：除特殊页面(例如首页、我的等一级页面)，单击跳转到前一页；一级页面(除首页)单击跳转到首页；首页单击提示“在单击一次，退出app”,单击两次退出app。

2.代码步骤

         1.在main.js中

                  import Mui from 'vue-awesome-mui';

      Vue.use(Mui);
        2.在index.html中

 </span></code></span> </div> <div class="line number2 index1 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript plain">       mui.init({</code></span> </div> <div class="line number3 index2 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">           </code><code class="javascript plain">keyEventBind: {</code></span> </div> <div class="line number4 index3 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">                </code><code class="javascript plain">backbutton: </code><code class="javascript keyword">true</code> <code class="javascript comments">//关闭back按键监听</code></span> </div> <div class="line number5 index4 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">           </code><code class="javascript plain">}</code></span> </div> <div class="line number6 index5 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript plain">       });</code></span> </div> <div class="line number7 index6 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript comments">        // //首页返回键处理</code></span> </div> <div class="line number8 index7 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript comments">        // //处理逻辑：1秒内，连续两次按返回键，则退出应用；</code></span> </div> <div class="line number9 index8 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript keyword">       var</code> <code class="javascript plain">first = </code><code class="javascript keyword">null</code><code class="javascript plain">;</code></span> </div> <div class="line number10 index9 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript plain">       mui.back = </code><code class="javascript keyword">function</code><code class="javascript plain">() {</code></span> </div> <div class="line number11 index10 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">       </code><code class="javascript comments">//首次按键，提示 再按一次退出应用</code></span> </div> <div class="line number12 index11 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">       </code><code class="javascript keyword">if</code> <code class="javascript plain">(!first) {</code></span> </div> <div class="line number13 index12 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">            </code><code class="javascript plain">first = </code><code class="javascript keyword">new</code> <code class="javascript plain">Date().getTime(); </code><code class="javascript comments">//记录第一次按下回退键的时间</code></span> </div> <div class="line number14 index13 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">            </code><code class="javascript plain">mui.toast(</code><code class="javascript string">"再按一次退出应用"</code><code class="javascript plain">); </code><code class="javascript comments">//给出提示</code></span> </div> <div class="line number15 index14 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">            </code><code class="javascript plain">history.go(-1); </code><code class="javascript comments">//回退到上一页面</code></span> </div> <div class="line number16 index15 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">           </code><code class="javascript plain">setTimeout(</code><code class="javascript keyword">function</code><code class="javascript plain">() {</code></span> </div> <div class="line number17 index16 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">              </code><code class="javascript comments">//1s中后清除</code></span> </div> <div class="line number18 index17 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">            </code><code class="javascript plain">first = </code><code class="javascript keyword">null</code><code class="javascript plain">;</code></span> </div> <div class="line number19 index18 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">             </code><code class="javascript plain">}, 1000);</code></span> </div> <div class="line number20 index19 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">           </code><code class="javascript plain">} </code><code class="javascript keyword">else</code> <code class="javascript plain">{</code></span> </div> <div class="line number21 index20 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">             </code><code class="javascript keyword">if</code> <code class="javascript plain">(</code><code class="javascript keyword">new</code> <code class="javascript plain">Date().getTime() - first < 1000) {</code></span> </div> <div class="line number22 index21 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">             </code><code class="javascript comments">//如果两次按下的时间小于1s，</code></span> </div> <div class="line number23 index22 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">             </code><code class="javascript plain">plus.runtime.quit(); </code><code class="javascript comments">//那么就退出app</code></span> </div> <div class="line number24 index23 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">             </code><code class="javascript plain">}</code></span> </div> <div class="line number25 index24 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript spaces">           </code><code class="javascript plain">}</code></span> </div> <div class="line number26 index25 alt1"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript plain">        };</code></span> </div> <div class="line number27 index26 alt2"> <span style="font-family:'楷体';font-size:14px;"><code class="javascript plain">
3.核心

    监听手机物理返回键，更改mui.back()这个方法的执行内容；必要时可以单独进行设置，或者通过路由守卫进行设置。   

转载于:https://www.cnblogs.com/wjl-boke/p/10931298.html