qrcode.js使用json字符串无法生成二维码

一、需求背景

在 VUE 开发的微信公众号项目中，有一个动态生成二维码的需求：根据后端传来的参数，动态生成二维码，用户长按动态生成的二维码，然后识别做相应 *** 作。

二、BUG问题

二维码的生成采用的是第三方库 qrcodejs2，功能实现后，测试发现，在苹果 IOS 系统中长按可以正常识别，而在安卓手机长按则无法识别。

三、原因分析

第三方库 qrcodejs2 生成二维码时，它会在我们指定 div 盒子内动态生成两个元素，分别是 canvas 和 img，如下图所示：



浏览器代码截图

上图是在浏览器测试时的截图，可以看到 canvas 处于隐藏（display: none;）状态，img 处于显示（display: block;）状态。这种状态是没问题的，因为只有长按 img 才会d出识别按钮，既然安卓手机长按无法d出识别按钮，说明安卓手机展示的不是 img 元素，而是 canvas 元素。

四、解决方案

既然只有 img 元素才可以被识别，那么我们只要保证不让其展示 canvas 画布，始终展示 img 就可以了。具体代码如下：

<!-- 隐藏原来存放二维码的 div -->

<div id="qrcode" style="display: none;"></div>

<!-- 添加一个新的div，用来展示 canvas 转换的 base64 -->

<div style="text-align: center;">

<img :src="qrcodeimg" alt="" width="200" height="200" v-show="qrcodeimg">

</div>

我们在指定的 div#qrcode 下面，再创建了一个div，并把原来装二维码的 div#qrcode 进行隐藏，然后生成二维码之后，我们获取 div#qrcode 里的 canvas 元素，并将拿到的 canvas 转为 base64 ，然后展示在下面新创建的 div 中。这样处理之后，不管什么情况，始终展示的都是 img 了…

// 生成二维码

new QRCode("qrcode", {

width: 200,

height: 200,

text: thispayCode

});

// 生成二维码之后，获取canvas元素

let qrcodeEle = documentgetElementById("qrcode")

let cvs = qrcodeElequerySelector('canvas')

thisqrcodeimg = cvstoDataURL('image/png')

工具：电脑

注册成功微信公众号，进入后台就可以下载二维码。具体步骤如下：

1点击右上角头像，找到“公众号设置”点击进入。

2此时已经进入后台，在“账号详情”下找到“二维码”，在二维码”右侧找到“下载更多尺寸”，就会生成各尺寸的二维码。

扩展资料：

二维条码/二维码（2-dimensionalbarcode）用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；

在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：

它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

生成微信公众平台上线小程序二维码步骤：

1、在“设置”中查看小程序的正式二维码，该二维码只用于访问小程序的线上正式版本。

2、通过接口获得带参数二维码。最多可生成带参数二维码10000个，请谨慎调用。

参考资料：

以上就是关于qrcode.js使用json字符串无法生成二维码全部的内容，包括:qrcode.js使用json字符串无法生成二维码、现在注册微信公众平台扫二维码怎么办、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！