整合微信小程序条形码和二维码生成插件，适应当前微信版本前言小程序的需求，做的微信小程序需要生成二维码和条形码。gith

前言

小程序的需求，做的微信小程序需要生成二维码和条形码。github上找了一下相关的库，发现基本上star相对多一点的插件，都是好几年前更新的，无法直接拉取使用，于是修改了插件以兼容当前微信版本.

以下是效果:

原始插件

WYuanyang/wxapp-qrcode: 微信小程序--二维码生成器 (github.com)

alsey/wxbarcode: 微信小程序条码、二维码生成模块 (github.com)

非常感谢大佬的贡献！这两个库的最后更新时间一个在4年以前，一个在7年以前，与当前版本存在一定兼容问题

兼容的微信基础库版本

2.32.2 更早没去看，有兼容问题请自行修改下哈

主要存在的兼容性问题

1、获取canvas实例的方法改变

//before
ctx = wx.createCanvasContext(canvas, $this)
//after
 const query = wx.createSelectorQuery();
 query.select('#'+canvas)
   .fields({ node: true, size: true })
   .exec((res) => {   
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    //xxxx
    })

2、canvas 实例的方法有变更

//before
ctx.setFillStyle('#000000');
//after
ctx.fillStyle = '#000000'

3、新增了对不同机型canvas 大小的兼容性

机型上显示相同大小的 Canvas，需要考虑到设备像素比（device pixel ratio）的影响。在高清屏幕上，为了保持图像的清晰度，一个 CSS 像素可能对应多个物理像素，而不同的设备像素比会导致不同的物理像素数量。

所以要对canvas缩放

    const dpr = wx.getSystemInfoSync().pixelRatio
          canvas.width = res[0].width * dpr
          canvas.height = res[0].height * dpr
          ctx.scale(dpr, dpr);

代码

你可以按照上面的兼容性问题下载原插件自己修改，也可以复制以下这个项目的utils文件 MshengYang/wxeasy-generate-twocode (github.com)

使用示例


<canvas style="width: 400rpx;height: 160rpx;" id="barcode" type="2d" />
<text style="margin-bottom: 24rpx;">12321saasgasgsaa</text>
<canvas style="width: 250rpx;height: 250rpx;" id="mycanvas" type="2d" />

import QR from '../../../utils/qrcode.js';
import barCode from '../../../utils/barcode.js';
//xxx
QR.api.draw(content, canvasId, cavW, cavH);
barCode.barcode("barcode", 'asbfjkasgkas', 400, 160);

更多查看原插件

觉得本文有用，点个赞吧