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

是刘小刘啊

已于 2022-10-26 14:08:42 修改

阅读量3k

点赞数

分类专栏：记录遇到的问题文章标签： vue.js 微信前端

于 2022-10-25 10:33:42 首次发布

本文链接：https://blog.csdn.net/weixin_43897062/article/details/127506757

版权

记录遇到的问题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

源码不是我开发的，但是目前由我维护的一个公众号项目；
当时看到发布的任务描述以及优先级的时候，说实话有点懵，第一反应是有什么功能有啥问题，因为我用的华为手机，不会出现下面的回退前进导航栏，在微信开发者工具里面也不会出现这个，然后让同事再现了一下；说是客户提出来的为什么ios下方的回退，退不到公众号对话页或者是退出公众号回到微信页，微信内置浏览器自己会监听他会产生历史记录就会出现导航栏；
解决办法
这个有讲加在第一页的回退，我还没试https://blog.csdn.net/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页且没有其他需求的应该可以用这个，多个页面的话点击回退会到上上一页

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