微信小程序页面返回按键控制
今天在开发公司内部的小程序项目时，遇到了一个问题，就是控制手机返回按键的问题，本来我以为很快就可以解决的，没想到最后我用了快一天的时间，才给做好，而且还不是我最初想到的方法。
场景
公司开发的小程序由于业务需要，要把后台管理的部分页面也给搬到小程序中，由于功能相同，且后台使用的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");
}
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
