沐鳴登錄測速_微信小程序頁面返回按鍵控制

今天在開發公司內部的小程序項目時,遇到了一個問題,就是控制手機返回按鍵的問題,本來我以為很快就可以解決的,沒想到最後我用了快一天的時間,才給做好,而且還不是我最初想到的方法。

場景

公司開發的小程序由於業務需要,要把後台管理的部分頁面也給搬到小程序中,由於功能相同,且後台使用的elementui,做一下手機適配就可以拿來用,所以,直接用web-view來實現就可以了,然而,這個頁面是“我的”頁面,即需要做為三個tabBar之一的頁面。

我的做法是:在consumer(微信小程序的一個page)中的onshow方法中直接轉到一個空白頁面(跳轉頁面),在空白頁面里使用webview來跳轉頁面(因為consumer有底部導航,而需要跳轉到的頁面也有底部導航,如果直接在consumer中直接跳轉,目標頁面下就會有兩個導航,且其他頁面也需要轉到這個頁面,所以這個頁面的底部導航還不能去掉),好了,頁面跳轉很成功,然而 ,噁心的事兒來了,當我點擊瀏覽器上的返回或手機上的物理返回按鍵時,就出問題了,頁面會返回到consumer這個頁面,然後在onshow方法內又跳回到h5頁面,如此循環,周而復始。

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

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");
}

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8947