文章详情
更多工具
uniapp自动生成二维码，原来不用插件也能实现？
1、Canvas原生方案的核心原理与跨平台实现
开发uniapp项目时，二维码功能几乎是标配需求。分享页面、会员码展示、支付凭证，这些场景都离不开二维码。传统做法是去插件市场找现成组件，但插件往往存在版本兼容、体积臃肿、功能冗余等问题。如果需求相对基础，完全可以用原生Canvas配合轻量算法库来实现，代码量不超过50行，还能获得更好的可控性。
uniapp的Canvas API本质上是一个绘图工具，可以绘制矩形、圆形、文字等基础图形。二维码的本质是黑白方块组成的矩阵，每个方块对应一个像素点。只要有算法把数据转换成矩阵坐标，Canvas就能把这些坐标逐个绘制出来。这个过程不需要复杂的图像处理能力，纯粹是数学计算加图形绘制。davidshimjs开源的qrcode库已经帮我们完成了算法部分，我们只需要调用它的接口，把结果交给Canvas渲染即可。
原生方案最大的优势是跨平台稳定性。同一套代码可以在H5、微信小程序、支付宝小程序、App端运行，不会出现某个平台突然报错的情况。但要注意一个细节：小程序的Canvas有新旧两套API。旧版用`uni.createCanvasContext`，新版用`Canvas.getContext('2d')`。如果不做平台判断，可能在某些小程序环境下遇到"context为空"的报错。建议在代码里加一层条件判断，根据运行环境选择对应API。
2、从准备到导出的完整操作流程
先在项目的`utils`目录下新建`qrcode.js`文件，从GitHub下载davidshimjs的qrcode库代码（体积约10KB），复制到这个文件里。然后在需要生成二维码的页面引入。在页面的template部分添加Canvas组件，设置一个合适的尺寸，比如300x300像素。记得给Canvas设置canvas-id属性，后续绘图时要用到这个标识。
在页面的methods里添加生成方法。首先创建QRCode实例，传入要生成的数据（比如网址、文本）。然后获取Canvas上下文，调用实例的draw方法开始绘制。这里有个容易踩坑的地方：Canvas的像素密度要和设备屏幕匹配。如果直接用默认值，在高清屏上可能显示模糊。建议用`uni.getSystemInfoSync()`获取设备像素比，然后按比例放大Canvas尺寸。
绘制完成后，用`uni.canvasToTempFilePath`把Canvas内容转成图片。这个接口会返回一个临时文件路径，可以直接用于保存相册或分享。如果需要长按保存功能，给图片绑定长按事件，调用`uni.saveImageToPhotosAlbum`接口。记得先申请相册权限，否则在某些平台会保存失败。
3、方案选择边界与性能优化策略
如果项目只需要生成静态二维码，内容固定不变，原生方案是最优选择。比如App的下载页、固定的活动链接、产品序列号展示，这些场景用Canvas生成既轻量又稳定。对于需要批量生成二维码的场景，比如电商平台的商品码、会议系统的签到码，原生方案也能胜任。可以写一个循环，复用同一个Canvas实例，性能开销很小。
如果二维码内容需要频繁修改，但又不想重新生成图片，这时候原生方案就不太合适了。因为Canvas生成的是静态图片，内容固定后无法更改。这种场景更适合用活码方案。比如八木屋二维码生成器提供的活码功能，可以保持二维码图案不变，但后台随时修改跳转的网址或展示的内容。还有一种情况是对二维码样式有特殊要求，比如要加渐变色背景、嵌入复杂Logo、调整码眼形状。这些视觉定制功能用Canvas实现会很繁琐，不如直接用专业的在线生成工具。
生成高分辨率二维码时，绘制过程可能耗时较长。如果在主线程同步执行，会导致页面卡顿。建议把绘制逻辑放到`setTimeout`里异步执行，或者显示一个loading提示。另外，二维码的容错率会影响生成速度。容错率越高，需要绘制的冗余数据越多。如果对扫码环境要求不高，可以适当降低容错率，换取更快的生成速度。如果遇到"Canvas context not found"报错，先检查canvas-id是否正确，再确认是否在页面渲染完成后才调用绘制方法。可以把绘制代码放到`onReady`生命周期里。
对于开发者来说，如果项目需要深度定制、离线生成、或者对代码有完全控制权的要求，原生Canvas方案是理想选择。掌握这套方法后，还能扩展出很多高级功能，比如批量生成、水印添加、动态参数注入。但如果你是运营人员或中小企业主，需要快速生成二维码用于营销推广，并且希望后期能灵活调整内容、查看扫码数据，那么在线工具会更高效。技术团队优先考虑原生开发，获得更好的性能和可控性；业务团队可以选择在线工具，快速上线并持续优化。
