微信小程序頁面返回按鍵控制

今天在開發公司內部的小程序項目時，遇到了一個問題，就是控制手機返回按鍵的問題，原本我覺得很快就能夠解決的，沒想到最後我用了快一天的時間，纔給作好，並且還不是我最初想到的方法。javascript

場景

公司開發的小程序因爲業務須要，要把後臺管理的部分頁面也給搬到小程序中，因爲功能相同，且後臺使用的elementui，作一下手機適配就能夠拿來用，因此，直接用web-view來實現就能夠了，然而，這個頁面是「個人」頁面，即須要作爲三個tabBar之一的頁面。java

個人作法是：在consumer（微信小程序的一個page）中的onshow方法中直接轉到一個空白頁面（跳轉頁面），在空白頁面裏使用webview來跳轉頁面（由於consumer有底部導航，而須要跳轉到的頁面也有底部導航，若是直接在consumer中直接跳轉，目標頁面下就會有兩個導航，且其餘頁面也須要轉到這個頁面，因此這個頁面的底部導航還不能去掉），好了，頁面跳轉很成功，然而，噁心的事兒來了，當我點擊瀏覽器上的返回或手機上的物理返回按鍵時，就出問題了，頁面會返回到consumer這個頁面，而後在onshow方法內又跳回到h5頁面，如此循環，周而復始。web

有問題就要解決，這個明顯就是返回時出現了問題，我就只得監聽返回按鍵，而後跳轉到我想要的頁面小程序

methods:{
	//  返回到微信小程序的首頁
	goBack(){
            wx.miniProgram.switchTab({
                url:"/pages/home/home"
            })
        },
    //  監聽popstate事件，將空白頁面壓入到history棧中
        popstate(){
            let self = this;
            function pushHistory(){
                let state = {title:"",url:"#"}
                window.history.pushState(state,state.title,state.url)
            }
            pushHistory();
            window.addEventListener("popstate",e=>{self.goBack},false);
        }
}
mounted(){
        this.popstate();
},
beforeDestroy(){
        let self = this;
	//  移除監聽，防止其餘頁面受影響
        window.removeEventListener("popstate",e=>{self.goBack},false)
    },

而後開開心心的去測試了，一測試，發現出了個問題，這個問題很奇葩：我點擊返回時，不起效，我覺得是我寫的有問題，就加上了window.onload，不行，又加了this.$nextTick不行，加上timout仍是不行，後來，我點了一下頁面（就是點了一下，不是拖動），而後返回了一下，能夠了，居然能夠了，而後再刷新一下頁面，再返回，又不行了，再點擊一下，就又能夠了，WOF，什麼鬼，我覺得找到緣由了，就在mounted中經過查找dom的方法，給一個標籤添加了點擊微信小程序

//  在頁面中添加 了一個id爲autoClick的div
document.getElementById("autoClick").click();

而後再去試試，仍是不行，真是見鬼了，爲何，爲何點一下就能夠了，不點一下就不行，是我寫錯了仍是elementui對事件監聽作了特殊處理。瀏覽器

新想法新思路

雖然不知道爲了什麼，可是，我不用了，好吧，想其餘方法吧，已知我在consumer頁面的onshow方法中作了頁面跳轉，若是我進入到consumer頁面時，先判斷一個時間，若是有時間證實多是我從h5返回到這個頁面的，那我就跳轉到home頁面，而後把這個時間給刪掉。若是沒有這個時間，證實我是第一次進入到這個頁面，那我就能夠放行，而後把時間給存一下。爲了防止從h5頁面直接經過底部導航跳轉到其餘頁面而沒有刪除時間，因此，須要在底部導航跳轉的其餘頁面內都加上移除這個時間的方法，OK，完美解決，不過不知道有沒有bug還須要測試，有知道這個問題出現的原理的大佬請幫我解惑一下，我正是百思不得其解微信

//  這個是consumer.js中的方法
onshow(){
	let _time = wx.getStorageSync("now");
    if(!_time){//沒有時間，證實是須要進入到myinfo頁面
      wx.setStorageSync("now", new Date().getTime());
      wx.navigateTo({
        url: '/pages/management/homePage/homePage?target=myinfo,
      })
    }else{//有時間，證實是返回的頁面
      wx.switchTab({
        url: '/pages/home/home',
      });
      wx.removeStorageSync("now")
    }
}

//  在home.js和map.js中添加
//  home，map和consumer是tarbar頁面
onshow(){
	wx.removeStorageSync("now");
}

好了，問題解決了，歡迎大佬把這個問題的原理在評論區給我解答，謝謝了！dom