iOS里微信浏览器长按无法识别二维码（ios微信里二次分享不好使）

原创已于 2022-05-25 17:43:39 修改 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2020-05-15 16:29:14 首次发布

vue 专栏收录该内容

13 篇文章

订阅专栏

本文探讨了iOS微信浏览器中二维码识别的常见问题，特别是长按无法识别的情况，并提供了多种解决方案，包括使用a标签、调整二维码尺寸、设置样式属性等。针对SPA应用，提出了利用location.assign()或location.replace()更新URL的策略，以提高识别率。

ios里微信浏览器真是堪比ie6的巨坑

比如：

ios里微信长按无法识别二维码==
ios里微信浏览器内vue，react等单页面项目url不改变==
ios里微信浏览器下面自带的后退前进导航栏==
ios里的input光标问题==
ios里的滑动卡顿，页面缺失。。。。。==

这次就吐槽一下长按无法识别二维码的问题：

经过咨询和网上查找，有如下处理方法：

1）用 a 标签包裹二维码
2) 设置缩放的, 二维码大小的，或者固定160*160
3）设置position: absolute; 或者加个透明背景
4）不用fixed
5）padding:1000px; margin:-1000px

如果你是原生html项目，上方式从上到下试试可能就就解决了
但是如果你是vue，react等单页面应用就死亡了。
你可能发现了只要刷新一下页面二维码就可以识别了，没错！！就是url的坑！

是因为微信内置浏览器对 history 的支持不够全面，对于开启了 history mode 的 SPA 应用，只会保存第一条 url

所以只要对需要二维码的页面 location.assign() 或者 location.replace()

router.afterEach((to, from) => {
    const u = navigator.userAgent.toLowerCase()
    if(u.indexOf("like mac os x") < 0 || u.match(/MicroMessenger/i) != 'micromessenger' || u.match(/WebP/i) == "webp"){ }else{
      if (to.path !== global.location.pathname && (to.name == 'look'||to.name == 'home')) {
          location.assign(to.fullPath)
      }
    }
  })