關於微信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>

 就是這么簡單啦。