关于微信网页/H5游戏开发中二维码无法识别的解决方法

Posted 2020-06-28 JorsonWong

　　我接触微信H5开发已经有一年多了，做过很多案例也遇到很多的问题。今天我把困扰我半年之久的问题分享出来，也就是关于微信网页/H5游戏开发中二维码无法识别的解决方法。
　　我在百度搜索了许久，关于微信H5网页/游戏开发问题以及解决方案的相关文章少之又少，在相关前端交流群中问别人，一问三不知，平时这些群就会上班吹牛逼，真正交流问题的人少又少，真是揪心啊，最后还是得靠自己解决了。

【这里，我先举个栗子】

上面这个页面，相信从事微信H5开发的人应该很熟悉，就是常见的分享到朋友圈的页面，通常以【引导分享图标】+【广告文案】+【公众号二维码】组成。
但是微信H5开发者通常会遇到一个问题，就是手机长按扫描不了二维码，或者android手机可以而iphone手机不可以，这里比较头疼。经过我反复研究与不断的测试，终于在一次通宵赶项目凌晨三四点把问题解决了，太特么有成就感了！

【来，不废话了直接上图】

这是我的解决方案，由一个img和background-image组成，img的右下脚用absolute定位在background-image的中心，然后img设置opacity:0或者设置visibility:hidden，问题就解决了。别问我为什么，我也不知道，反正能解决，哈哈。或许其他小伙伴有更好的解决方案，欢迎提供。

CSS部分

.qrcodeWrap {
    position: relative; width: 150px; height: 150px
    margin: 0 auto; 
    background: url(qrcode.jpg) no-repeat center center;
    background-size: contain;
}
.qrcodeWrap img {
    position: absolute; left: -75px; top: -75px;
    width: 150px; height: 150px; 
    display: block;
    border: none;
    opacity:0;    /*visibility:hidden*/
}

HTML部分

<div class="qrcodeWrap">
    <img style="" src="qrcode.jpg" alt="扫描二维码"/>
<div>

 就是这么简单啦。