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

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

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)
      }
    }
  })

这里我用的是vue 思路都是一样的

做完这些之后成功率会达到90%或100%
如果你很不幸是那90%成功率的
那就在二维码下加这句话

无法识别二维码点我刷新

别问我为啥url不对会对二维码识别有影响

如果你碰到了这个二维码不识别问题 那你很可能会碰到连带问题 ios微信里二次分享不好使（分享进入项目后需跳页），一样的思路

标签：iOS,浏览器,微信,ios,微信里,二维码,识别,页面
来源： https://blog.csdn.net/weixin_42618523/article/details/106144171