vue微信H5长按无法弹出识别二维码

Posted 2022-04-23 低调之人

一、场景

使用vue写了一个H5项目，然后在ios微信公众号里可以长按识别二维码，以便用户关注，但是发现在微信公众号无法弹出识别。

vue的路由是默认的：hash。

二、查找原因

网上搜索了很多方案，修改样式、尺寸大小、甚至加上logo，都是无法成功。

如果单独的写一个静态页面，放一张图片，然后在微信公众号里是可以识别。

但是只要在vue搭建的项目里，就是无法访问，就单独放一个图片也不行。

三、解决方案

只能就把两张页面进行对比，把vue的页面复制到html的另一个页面，然后再一点点删除怀疑的地方，脚本文件等，终于找到可疑的文件：css文件。

那就看看是哪个属性导致的，最终看到了一个全局变量img属性：-webkit-touch-callout : none;

-webkit-touch-callout 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

把这个属性去掉即可实现长按识别二维码。

可能前端考虑的因素比较多，所以就写了一个公共的样式。