常規的在公衆號html頁面中要實現長按識別二維碼,直接使用img顯示圖片就可以了,如下:
<img name="qrCodeImg" src="/images/itlao5.jpg" style="width: 80%;" />
然而,當同一個頁面有多個二維碼時,會出現怎樣的情況呢?
今天碰到的需求中就在同一個頁面有三個二維碼,按照上面的方法,寫了三個img,長按不同二維碼img打開不同的公衆號或小程序。然而,實際的效果與想象中的有點差別:在部分手機上,不管長按哪個img,都是識別了第一個img,試了三臺手機,除了華爲P20正常,VIVO和華爲X5都出現該問題,後來測試P20在部分情況下也有該問題。
不知道怎麼回事,網上一頓搜索,說是二維碼識別功能是先截屏然後在識別截取的圖片,然後結合我P20正常的情況,應該是截取了點擊位置附近一定像素的屏幕,然後進行識別。如果該截屏區域內有多個二維碼,會識別到第一個,這就造成了同一屏內多個二維碼識別出錯的問題。
然後想解決思路,方案有三種:
- 二維碼間隔拉大,保證同一屏內只顯示一個完整的二維碼;
- 先弄個二維碼列表(不用img,用background放圖片),然後點擊二維碼打開詳情頁(或者彈出層) ,長按詳情頁或彈出層img識別
- 既然是截屏識別第一個完整二維碼,那在截屏時將點擊的img圖片顯示到頂部,是否可以實現想要的功能。
方案1和方案2畢竟在用戶體驗上不怎麼好,只作爲備用方案,我們重點看方案3:整體思路是這樣的,在頂部加一個臨時img,用於顯示當前長按的二維碼。然後監聽所有img的touch事件,當按下去時,延時300ms顯示圖片(延遲300ms是爲了防止該touch是滑動事件,而不是長按事件),如果移動了則不再顯示,然後touch事件結束後也隱藏圖片;另外,在長按時,html中是無法觸發touchend事件的,因爲被手機原生事件截斷,所以需要監聽touchcancel事件,該事件觸發時也隱藏圖片。需要注意的是,因爲長按後微信需要截屏,所以隱藏事件需要延時500~1000ms。
實際效果如下:
以下是js和html核心代碼:
<script type="text/javascript">
function load() {
var imgs = document.getElementsByName("qrCodeImg");
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("touchstart", touchstart, false);
imgs[i].addEventListener("touchend", touchend, false);
imgs[i].addEventListener("touchmove", touchmove, false);
imgs[i].addEventListener("touchcancel", touchcancel, false);
}
function touchstart(e) {
showTempQrCodeImg();
}
function touchmove(e) {
dismissTempQrCodeImg();
}
function touchend(e) {
dismissTempQrCodeImg();
}
function touchcancel(e) {
dismissTempQrCodeImg();
}
var timeoutId = 0;
function showTempQrCodeImg() {
var currentSrc = this.src;
timeoutId = setTimeout(function () {
var oInp2 = document.getElementById("tempQrCodeImg");
oInp2.src = currentSrc;
show = true;
}, 300);
}
function dismissTempQrCodeImg() {
clearTimeout(timeoutId);
setTimeout(function () {
var oInp2 = document.getElementById("tempQrCodeImg");
oInp2.src = '';
show = false;
}, 1000);
}
}
window.addEventListener('load', load, false);
</script>
<!--臨時二維碼展示img, 注意id爲tempQrCodeImg及設置position:fixed;z-index:100-->
<img id="tempQrCodeImg" src="" style="width: 50%; position:fixed; left:25%;z-index:100" />
<!--實際二維碼展示img,注意所有的name都是qrCodeImg-->
<img name="qrCodeImg" src="/Content/images/it-lao5.jpg" style="width: 80%;" />
簡書:ThinkinLiu 博客: IT老五