星空网 > 软件开发 > 网页设计

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

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

【这里,我先举个栗子】

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

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

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

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

这是我的解决方案,由一个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='/images/loading.gif' data-original="qrcode.jpg" /><div>

 就是这么简单啦。




原标题:关于微信H5网页开发中二维码无法识别的解决方法

关键词:H5

H5
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

新冠疫苗:https://www.goluckyvip.com/tag/4442.html
预算管理:https://www.goluckyvip.com/tag/4445.html
4KMIL:https://www.goluckyvip.com/tag/4446.html
一站到岸:https://www.goluckyvip.com/tag/4447.html
跨境研究:https://www.goluckyvip.com/tag/4448.html
实操教程分享:https://www.goluckyvip.com/tag/445.html
旅游景点的打油诗 旅游景点的打油诗怎么写:https://www.vstour.cn/a/366180.html
2024深圳龙岗区文化馆免费音乐培训课程安排+报名方式:https://www.vstour.cn/a/366181.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流