微信小程序返回顶部按钮,微信小程序webview返回键

2022年 10月 20日 发表评论
腾讯云正在大促:点击直达 阿里云超级红包:点击领取
免费/便宜/高性价比服务器汇总入口(已更新):点击这里了解

今天在开发公司内部的小程序项目时,遇到了一个问题,就是控制手机返回按键的问题,本来我以为很快就可以解决的,没想到最后我用了快一天的时间,才给做好,而且还不是我最初想到的方法。

场景

公司开发的小程序由于业务需要,要把后台管理的部分页面也给搬到小程序中,由于功能相同,且后台使用的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的divdocument.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/homePagetarget=myinfo, }) }else{//有时间,证明是返回的页面 wx.switchTab({ url: '/pages/home/home', }); wx.removeStorageSync("now") }} // 在home.js和map.js中添加// home,map和consumer是tarbar页面onshow(){wx.removeStorageSync("now");

小咸鱼

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: