vue+h5微信公众号ios系统底部导航栏处理

源码不是我开发的,但是目前由我维护的一个公众号项目;
当时看到发布的任务描述以及优先级的时候,说实话有点懵,第一反应是有什么功能有啥问题,因为我用的华为手机,不会出现下面的回退前进导航栏,在微信开发者工具里面也不会出现这个,然后让同事再现了一下;说是客户提出来的为什么ios下方的回退,退不到公众号对话页或者是退出公众号回到微信页,微信内置浏览器自己会监听他会产生历史记录就会出现导航栏;
解决办法
这个有讲加在第一页的回退,我还没试https://blog.youkuaiyun.com/Mr_Ch1023/article/details/108448217
1.在页面到达关注的二维码页面,点击回退按钮直接关闭页面,从公众号进去的填写信息的就会跳到公众号对话页,扫码填写信息的就会回到微信页;(二维码页面是最后一页,本来想加在第一页的回退上,然后发现刷新页面就404了,具体原因不详,第一页进入的时候有获取用户的openid)

 mounted() {
    this.back()
  },
  methods: {
    //监听微信自带的返回按钮
    //写入空白的历史记录
    pushHistory() {
      //写入空白历史路径
      let state = {
        title: 'title',
        url: '#'
      }
      window.history.pushState(state, state.title, state.url)
    },
    back() {
      this.pushHistory()  // 用了这个方法后页面刷新会页面404,我就把这一行注掉了,就不会404可以正常刷新
      window.addEventListener(
        'popstate',
        function (e) {
        // 微信浏览器内置WeixinJSBridge函数可以直接使用
          WeixinJSBridge.invoke('closeWindow', {}, function (e) {})
        },
        false
      )
    }
  },

2.我有想过把导航栏隐藏起来,但是并部太行(实现了的小伙伴可以留言,感谢!!!!)
本想写一个div把导航栏盖住,太天真了,而且工作量更大了

WeixinJSBridge的隐藏函数
WeixinJSBridge.call(‘hideToolbar’); //隐藏右下面工具栏(起初以为这个函数可以隐藏然而并不行)
WeixinJSBridge.call(‘showToolbar’); //显示右下面工具栏
WeixinJSBridge.call(‘hideOptionMenu’); //隐藏右上角三个点按钮。
WeixinJSBridge.call(‘showOptionMenu’); //显示右上角三个点按钮。
this.$router.replace('/path')  // 只有2页且没有其他需求的应该可以用这个,多个页面的话点击回退会到上上一页

因为项目是投入使用的,所以需要改动很多的实现方法就没考虑!!!!!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值