你的位置:首页 > 网页设计

[网页设计]关于微信H5网页开发中二维码无法识别的解决方法


  我接触微信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>

 就是这么简单啦。