微信长按识别二维码 -- 页面多个二维码如何识别？

常规的在公众号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;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=''无法隐藏图片，需要设置displayshow = 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老五

微信长按识别二维码 -- 页面多个二维码如何识别？相关推荐

(补充)微信长按识别二维码 -- 页面多个二维码如何识别？（二）
基于上一篇微信长按识别二维码 -- 页面多个二维码如何识别? )在部分设备上,如果图片非常多,还是会出现识别错误的bug(主要是二维码显示一半或居于底部时),修改了识别流程,改为点击图片弹窗,然后长按 ...
iphone微信长按二维码识别不了
在安卓版的微信长按二维码可以识别(前提是你的微信版本到支持此功能),但是到了苹果版的微信就识别不了,经个人测试发现是缩放的问题: 1.设置了初始缩放设置为1,最大缩放值要>=1,不支持缩放.-- ...
jquery实现微信长按识别二维码
jquery实现微信长按识别二维码 (完整代码如下) <!DOCTYPE html> <html> <head><meta charset="utf ...
实现手机扫描二维码页面登录，类似web微信-第一篇，业务分析
关于XMPP组件的文章,先休息两天,好歹已经完整的写了一份. 这两天,先实现一套关于web微信扫描二维码页面登录的试验,因为这种模式在我们的很多业务场景里大有前途. 首先介绍一下web微信登录的过程 ...
微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面
实现微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面而进入商城下载该项目详情地址:gitee.com/DuJiaHui123- 1.创建完之后替换文件里面的ios ...
C#判断用户是否使用微信浏览器，并据此来显示真实内容或二维码
平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...
UNI-APP，推广二维码页面实现
实现效果如图: 实现代码: <template><view><cu-custom bgColor="bg-blue" ...
实例：用C#.NET手把手教你做微信公众号开发（11）--生成带参数二维码
上一篇讲了普通关注的各种情景,接下来准备详细讲解带参数的二维码的应用实例.在下一篇详解之前,这里先介绍一下如何下载二维码.生成二维码表,为后续的应用做好准备. 为了满足用户渠道推广分析和用户帐号绑定等 ...
java获取微信小程序码和小程序二维码
一.小程序码和小程序二维码简介首先,奉上微信官方文档:获取小程序码 - https://developers.weixin.qq.com/miniprogram/dev/framework/open ...

微信长按识别二维码 -- 页面多个二维码如何识别？

微信长按识别二维码 -- 页面多个二维码如何识别？相关推荐

最新文章

热门文章