最近在做项目时，使用wxbarcode开发条形码生成。在真机测试时，发现生成的条形码层级很高，有交互时会遮挡页面的其它元素。查询文档得知，是旧版的canvas接口不支持同层渲染导致的。所以我们这里修改一下wxbarcode的相关源码，使之适配新版的canvas 2d模式。

首先，找到源码的index.js。

找到这里：

function barc(id, code, width, height) {

    barcode.code128(wx.createCanvasContext(id), code, convert_length(width), convert_length(height))

}

修改如下：

function barc(ctx, code, width, height) {

    barcode.code128(ctx, code, convert_length(width), convert_length(height))

}

这里将旧版的获取 CanvasContext的接口改成新版的。

然后找到barcode.js，里边的

Graphics.prototype._fillRect = function(x, y, width, height, color) {

    this.ctx.setFillStyle(color)

    this.ctx.fillRect(x, y, width, height)

}

修改如下：

Graphics.prototype._fillRect = function(x, y, width, height, color) {

    this.ctx.fillStyle  = color;

    this.ctx.fillRect(x, y, width, height)

}

然后找到大概第65行，新版的没有draw()方法，注释掉即可

还有一个bug需要修改，将chr2改为chr1。具体原因可网上搜索一下，这里不做展开

 if (shifter != -1) {

            result.push(shifter);

            result.push(codeValue(chr1));

        }

至此，源码修改结束，构建npm。

下边，修改项目里的相关代码。

首先是wxml：

<canvas id='barcode' type="2d"></canvas>  

然后是wsxx：

#barcode{

    display: block;

    width: 600rpx;

    height: 140rpx;

    margin: 0 auto;

    position: relative;

    z-index: 1;

 }

接着改js:

creatCode() {

        let query = wx.createSelectorQuery();

        query.select("#barcode").fields({

            node: true,

            size: true

        }).exec((res) => {

            const canvas = res[0].node;

            const ctx = canvas.getContext('2d');

            const dpr = wx.getSystemInfoSync().pixelRatio

            canvas.width = res[0].width * dpr

            canvas.height = res[0].height * dpr

            ctx.scale(dpr, dpr)

            wxbarcode.barcode(

                ctx,

                "1234567890",

                600, 140

            )

        });

    },

至此，所有的修改都已完成。

再说个题外话，如果条形码的内容较为简单，微信的scanCode接口，扫码条形码时一般不出错。一旦条码的内容过长，那么scanCode接口扫码就会出现偏差，这是因为咱们的条形码是CODE_128格式的，扫出来的可能是其它格式的。所以会出现跟预想不一样的结果。这里可以做下判断，如果扫出来的不是CODE_128格式的，提醒用户重新扫码。

不过，最终从用户体验角度出发，还是建议大家使用识别率更高的二维码。