微信长按识别二维码 — 页面多个二维码如何识别?

itlao6 原创 开发&源码 前端评论757字数 5170阅读17分14秒阅读模式

常规的在公众号html页面中要实现长按识别二维码,直接使用img显示图片就可以了,如下:

<img name="qrCodeImg" src="/images/itlao5.jpg" style="width: 80%;" />

然而,当同一个页面有多个二维码时,会出现怎样的情况呢?文章源自IT老刘-https://itlao6.com/974.html

今天碰到的需求中就在同一个页面有三个二维码,按照上面的方法,写了三个img,长按不同二维码img打开不同的公众号或小程序。然而,实际的效果与想象中的有点差别:在部分手机上,不管长按哪个img,都是识别了第一个img,试了三台手机,除了华为P20正常,VIVO和华为X5都出现该问题,后来测试P20在部分情况下也有该问题。
不知道怎么回事,网上一顿搜索,说是二维码识别功能是先截屏然后在识别截取的图片,然后结合我P20正常的情况,应该是截取了点击位置附近一定像素的屏幕,然后进行识别。如果该截屏区域内有多个二维码,会识别到第一个,这就造成了同一屏内多个二维码识别出错的问题。文章源自IT老刘-https://itlao6.com/974.html

然后想解决思路,方案有三种:

  1. 二维码间隔拉大,保证同一屏内只显示一个完整的二维码;
  2. 先弄个二维码列表(不用img,用background放图片),然后点击二维码打开详情页(或者弹出层) ,长按详情页或弹出层img识别
  3. 既然是截屏识别第一个完整二维码,那在截屏时将点击的img图片显示到顶部,是否可以实现想要的功能。

方案1和方案2毕竟在用户体验上不怎么好,只作为备用方案,我们重点看方案3:整体思路是这样的,在顶部加一个临时img,用于显示当前长按的二维码。然后监听所有img的touch事件,当按下去时,延时300ms显示图片(延迟300ms是为了防止该touch是滑动事件,而不是长按事件),如果移动了则不再显示,然后touch事件结束后也隐藏图片;另外,在长按时,html中是无法触发touchend事件的,因为被手机原生事件截断,所以需要监听touchcancel事件,该事件触发时也隐藏图片。需要注意的是,因为长按后微信需要截屏,所以隐藏事件需要延时500~1000ms。文章源自IT老刘-https://itlao6.com/974.html

实际效果如下:文章源自IT老刘-https://itlao6.com/974.html

微信长按识别二维码 — 页面多个二维码如何识别?
长按识别多个二维码.gif

以下是js和html核心代码:文章源自IT老刘-https://itlao6.com/974.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;
                    oInp2.style.display = 'block';
                    show = true;
                }, 300);
            }

            function dismissTempQrCodeImg() {
                clearTimeout(timeoutId);
                setTimeout(function () {
                    var oInp2 = document.getElementById("tempQrCodeImg");
                    oInp2.src = '';
                    oInp2.style.display = 'none';//ios上光设置src=''无法隐藏图片,需要设置display
                    show = false;
                }, 1000);
            }
            
        }
        window.addEventListener('load', load, false);
    </script>

<!--临时二维码展示img, 注意id为tempQrCodeImg及设置position:fixed;z-index:100;这里设置width: 80%比普通图片大,因为设置太小会造成在ios上第一张图片左右部分识别为不同的二维码-->
<img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" />
<!--实际二维码展示img,注意所有的name都是qrCodeImg-->
<img name="qrCodeImg" src="/Content/images/it-lao5.jpg" style="width: 40%;" />

简书:ThinkinLiu 博客: IT老五文章源自IT老刘-https://itlao6.com/974.html


2019.07.29 15:03 bug修复
后续发现在显示的二维码比较多,滑动后点击中间和底部的二维码会出现识别错误的问题,做下修改,临时二维码加一层div背景(设置颜色与页面背景色一致)文章源自IT老刘-https://itlao6.com/974.html

<div id="tempQrCodeImgDiv" style="width:100%;height:100%; position:fixed; display:none;background:#efeff4;z-index:90">
</div>
<img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" />

js方法中的oInp2.style.display = 语句后,同时加上对背景div的显示与隐藏操作。文章源自IT老刘-https://itlao6.com/974.html

常规的在公众号html页面中要实现长按识别二维码,直接使用img显示图片就可以了,如下:文章源自IT老刘-https://itlao6.com/974.html

<img name="qrCodeImg" src="/images/itlao5.jpg" style="width: 80%;" />

然而,当同一个页面有多个二维码时,会出现怎样的情况呢?文章源自IT老刘-https://itlao6.com/974.html

今天碰到的需求中就在同一个页面有三个二维码,按照上面的方法,写了三个img,长按不同二维码img打开不同的公众号或小程序。然而,实际的效果与想象中的有点差别:在部分手机上,不管长按哪个img,都是识别了第一个img,试了三台手机,除了华为P20正常,VIVO和华为X5都出现该问题,后来测试P20在部分情况下也有该问题。
不知道怎么回事,网上一顿搜索,说是二维码识别功能是先截屏然后在识别截取的图片,然后结合我P20正常的情况,应该是截取了点击位置附近一定像素的屏幕,然后进行识别。如果该截屏区域内有多个二维码,会识别到第一个,这就造成了同一屏内多个二维码识别出错的问题。文章源自IT老刘-https://itlao6.com/974.html

然后想解决思路,方案有三种:

  1. 二维码间隔拉大,保证同一屏内只显示一个完整的二维码;
  2. 先弄个二维码列表(不用img,用background放图片),然后点击二维码打开详情页(或者弹出层) ,长按详情页或弹出层img识别
  3. 既然是截屏识别第一个完整二维码,那在截屏时将点击的img图片显示到顶部,是否可以实现想要的功能。

方案1和方案2毕竟在用户体验上不怎么好,只作为备用方案,我们重点看方案3:整体思路是这样的,在顶部加一个临时img,用于显示当前长按的二维码。然后监听所有img的touch事件,当按下去时,延时300ms显示图片(延迟300ms是为了防止该touch是滑动事件,而不是长按事件),如果移动了则不再显示,然后touch事件结束后也隐藏图片;另外,在长按时,html中是无法触发touchend事件的,因为被手机原生事件截断,所以需要监听touchcancel事件,该事件触发时也隐藏图片。需要注意的是,因为长按后微信需要截屏,所以隐藏事件需要延时500~1000ms。文章源自IT老刘-https://itlao6.com/974.html

实际效果如下:文章源自IT老刘-https://itlao6.com/974.html

微信长按识别二维码 — 页面多个二维码如何识别?
长按识别多个二维码.gif

以下是js和html核心代码:文章源自IT老刘-https://itlao6.com/974.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;
                    oInp2.style.display = 'block';
                    show = true;
                }, 300);
            }

            function dismissTempQrCodeImg() {
                clearTimeout(timeoutId);
                setTimeout(function () {
                    var oInp2 = document.getElementById("tempQrCodeImg");
                    oInp2.src = '';
                    oInp2.style.display = 'none';//ios上光设置src=''无法隐藏图片,需要设置display
                    show = false;
                }, 1000);
            }
            
        }
        window.addEventListener('load', load, false);
    </script>

<!--临时二维码展示img, 注意id为tempQrCodeImg及设置position:fixed;z-index:100;这里设置width: 80%比普通图片大,因为设置太小会造成在ios上第一张图片左右部分识别为不同的二维码-->
<img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" />
<!--实际二维码展示img,注意所有的name都是qrCodeImg-->
<img name="qrCodeImg" src="/Content/images/it-lao5.jpg" style="width: 40%;" />

2019.07.29 15:03 bug修复
后续发现在显示的二维码比较多,滑动后点击中间和底部的二维码会出现识别错误的问题,做下修改,临时二维码加一层div背景(设置颜色与页面背景色一致)文章源自IT老刘-https://itlao6.com/974.html

<div id="tempQrCodeImgDiv" style="width:100%;height:100%; position:fixed; display:none;background:#efeff4;z-index:90">
</div>
<img id="tempQrCodeImg" src="" style="width: 80%; position:fixed; left:10%;z-index:100" />

js方法中的oInp2.style.display = 语句后,同时加上对背景div的显示与隐藏操作。文章源自IT老刘-https://itlao6.com/974.html

 文章源自IT老刘-https://itlao6.com/974.html

文章源自IT老刘-https://itlao6.com/974.html

微信长按识别二维码 — 页面多个二维码如何识别?
IT老五(it-lao5):关注公众号,一起源创,一起学习!

 文章源自IT老刘-https://itlao6.com/974.html 文章源自IT老刘-https://itlao6.com/974.html

继续阅读
weinxin
我的微信公众号
微信扫一扫关注公众号,不定时更新
itlao6
  • 本文由 发表于 2019年 7月 17日 17:50:58
  • 转载请务必保留本文链接:https://itlao6.com/974.html
评论  0  访客  0
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定