微信小程序页面返回按键控制

时间: 2020-04-11阅读: 1328标签: 小程序

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


场景

公司开发的小程序由于业务需要,要把后台管理的部分页面也给搬到小程序中,由于功能相同,且后台使用的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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

微信小程序用户授权

对于小程序未授权的用户,官方取消wx.getUserInfo方法的直接调用,首次授权必须主动触发自定义按钮,才可调起官方授权组件。思路步骤:wx.getSetting查看是否授权,已授权使用wx.getUserInfo获取用户信息,保存

微信小程序适配 iPhone 11/Pro

由于目前 iPhone 发售的新机型,iPhone X / iPhone 11 系列,都是刘海屏。因此在小程序设计中,我们经常需要考虑到底部的适配。常规的我们是通过获取系统信息模块来获取的。

mpvue开发微信小程序基础知识

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。

微信小程序wx.getUserInfo授权获取用户信息

这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取。

微信小程序报错Do not have xx handler in current page的解决方法总汇

最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。

Remax:使用真正的 React 构建小程序

Remax 是基于真正 React 的小程序构建工具,本文由 Ant Design 团队的 Mack 执笔,让我们跟随作者一起了解 Remax。因为 React 是我们最熟悉的技术。小程序糟糕的 API 设计已经有很多文章吐槽

小程序web-view关闭后,页面音频没有关闭

在web-view的src中,引入了一个HTML5页面,这个页面有个自动播放的音频。在小程序中,点击右上角关闭小程序后,web-view页面中的音频依然会播放。

微信小程序开发早知道

小程序没有跳转公众号、跳转公众号图文素材的能力。除非用户通过扫描二维码进入小程序的情景,可以显示关注公众号组件。公众号菜单、公众号图文素材可以打开小程序,网页无法直接打开小程序。

小程序如何改变onLoad 的执行时机?

也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!