一、事件背景

公司重构小程序，于是采用uqrcode来生成二维码，技术栈是vue3**+vite+scss,但是有部分荣耀手机生成的二维码是无法扫描的，生成的二维码如下图**：

如上图中红框中的定位角点已经错乱了，二维码能够识别扫描识别出来主要就是依靠定位角点， 当时刚出问题我们是一脸懵的，因为我们在手机上看着正常，然后一直找到了这位用户才发现了问题 然后开始寻找问题，找了微信和引用的组件库，最终发现在组件库文档上面看到刚好是11月左右修复了这个bug，然后我大概是10月份引用发布的，没办法，运气就是这么好

于是我又重新按照vue3最新的方法引入了uQRCode插件

<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>

但是在我测试过程中发现这个生成二维码不太稳定，于是只能弃坑了，但是也有可能是我没有用对，所以我果断寻找新的插件

二、新方法uniapp-qrcode

uniapp-qrcode，uniapp小程序生成条码和二维码模块。

1.安装

$ npm install uniapp-qrcode

2.使用方法

import wxcode from 'uniapp-qrcode'

wxcode.barcode('barcode', '1234567890123456789', 680, 200);
wxcode.qrcode('qrcode', '1234567890123456789', 420, 420);

条形码

函数名：barcode

函数原型：barcode(id, code, width, height)

参数：

• id: wxml文件中的 Canvas ID
• code: 用于生成条形码的字符串
• width: 生成的条形码宽度，单位 rpx
• height: 生成的条形码高度，单位 rpx

二维码

函数名：qrcode

函数原型：qrcode(id, code, width, height)

参数：

• id: wxml文件中的 Canvas ID
• code: 用于生成二维码的字符串
• width: 生成的二维码宽度，单位 rpx
• height: 生成的二维码高度，单位 rpx

该二维码库下载和使用是十分方便的，下面是我开发的代码和实际效果

三、代码

view部分

<canvas class="code-item" canvas-id="qrcode" style="height: 500rpx;width: 500rpx;" />

js

text是参数，你们自己定义

import wxcode from 'uniapp-qrcode'

qrFun(text) {
    wxcode.qrcode('qrcode', text, 500, 500);			
},

效果图

结语

希望大佬们一起交流开发经验，一起学习，一起进步，解决bug