app的手機自帶返回鍵 VUE

對於第一次弄這個項目的新手來說，簡直了，網上百度了關於移動端手機物理返回的功能，結果有些好多是坑，就是不是坑也是他寫的代碼描述的功能不全，導致我浪費了時間。不過幸好的是，比之前我的邏輯能力好很多，因為我發現這個不對的時候，就先靜下來理一理思路，后面就可以嘗試自己的思路正不正確，為此我申請了三個賬號，因為hbuilder一個賬號一天設置了7次打包的權限。

第一步：在沒有這個之前，APP在手機上只能通過代碼寫的返回鍵去返回操作，但是一按手機自帶的物理返回鍵，噢噢，那就慘了，直接退出了程序了，不管在哪個頁面，所以這第一步就是制止手機物理返回鍵一按就退出程序（APP）

（1）先建一個back.js文件

//監聽手機物理返回鍵的事件
document.addEventListener('plusready', function() {
    var first = null;
    plus.key.addEventListener('backbutton', function() {
        if(!first) {
            first = new Date().getTime(); //記錄第一次按下回退鍵的時間
            history.back(-1); //回退到上一頁面
            setTimeout(function() {
                //0.5s中后清除，因為1s的間隔相對於太長，這樣連續按兩次就退出去，效果不好
                first = null;
            }, 500);
        } else {
            if(new Date().getTime() - first < 500) {
                //如果兩次按下的時間小於0.5s，同上
                plus.runtime.quit(); //那么就退出app
            }
        }
    });
})

（2）在main.js中引入js文件

//導入back文件  防止手機自帶的返回鍵退出程序
import Back from './js/back.js'

var vm = new Vue({
    el: '#app',
    Back, //實例化Back
    render: c => c(app),
    router
})

第二步：以上的步驟只是保證不讓手機自帶的物理返回鍵退出程序，但是請注意，上述back.js中我們只按一次返回鍵，那么就回退到歷史的上一頁面，問題來了，如果你按這個頁面，又按另一個頁面，當你只按一次返回鍵的時候，就會一直死循環，一直回退回退回退，這樣依然不能達到效果，因為沒有一個APP應用程序是這樣的，所以，還需要進行以下的操作：

（1）在需要的頁面添加以下代碼，什么叫需要的頁面，就是當你連按兩次返回鍵，發現他沒有返回到tabs首頁就直接退出程序，或是只按一次就一直死循環的。比如我一進入的頁面的路徑是'/tabs/home/'，那么當我去訪問'/tabs/my/'的頁面時，回到'/tabs/home/'，那么我按返回鍵的時候，他就會回到上一頁，也就是我剛剛訪問的'/tabs/my/'我的頁面，所以需要給他加以下代碼（我的APP不止這個頁面加了，其他的十幾個頁面都加了，按需加，打包成APP的時候自己測試，發現哪不對了，就在哪個頁面加上，一開始沒有大局觀的童鞋，可能考慮不周全，沒加完，然后漏了這個漏了那個的，那么你就需要幾個賬號去打包了或是進行真機測試，就是通過usb連接手機去把APP放到手機上測試）

mounted() {
            //掛載完成后，判斷瀏覽器是否支持popstate
            var that = this
            if(window.history && window.history.pushState) {
                //監聽手機物理的回退按鈕，並阻止其默認事件
                window.addEventListener('popstate', that.close, false)
            }
        },
        destroyed() {
            //頁面銷毀時，取消監聽。否則其他vue路由頁面也會被監聽
            let that = this
            setTimeout(function() {
                window.removeEventListener('popstate', that.close, false)
            }, 0)
        },
        methods: {
            close() {
                //replace替換原路由，作用是避免回退死循環
                this.$router.replace('/tabs/home')
            }
        },

　　這三個步驟一個都不能少，比如在開始時掛載，掛載完以后離開頁面后銷毀，最重要的一點就是close（）方法不能用其他的方法，比如push（）這類的，必須用replace（），他的作用就是為了避免回退死循環的，你說重不重要！！！！！　　

　　就這幾個步驟了，我開始搜的其他頁面都不怎么可以實現，是綜合了幾個鏈接自己想出來的，看到此篇文章的同學，也可以去看看，但是他們的共同點就是說的不清楚，功能也說不清楚，分開來的話根本實現不了，只可以實現小小的一部分。

（轉載：https://blog.csdn.net/qq_40650146/article/details/85236411?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task）

（轉載：https://bbs.csdn.net/topics/392322972?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task    這個要看評論 他是用插件來寫的）

（轉載：https://www.csdn.net/gather_22/MtTaAg2sOTcwOS1ibG9n.html）