关于支付宝小程序使用wxbarcode需要生成条形码的源码修改

参考版本基础库2.7.0及以上新版Canvas

首先参考了这篇文章：https://blog.csdn.net/wh13267207590/article/details/102552024

也是利用wxbarcode库，然后对其修改源码，步骤如下：

1. 首先修改/node_modules/wxbarcode/demo/utils/index.js，将其改为新版小程序的获取canvas方法

var barcode = require('./barcode');
var qrcode = require('./qrcode');

function convert_length(length) { 
  return Math.round(my.getSystemInfoSync().windowWidth * length / 750);
}

function barc(ctx, code, width, height) {  
  barcode.code128(ctx.getContext('2d'), code, convert_length(width), convert_length(height))
}

function qrc(ctx, code, width, height) { 
  qrcode.api.draw(code, {
    ctx: ctx,
    width: convert_length(width),
    height: convert_length(height)
  })
}

module.exports = {
  barcode: barc,
  qrcode: qrc
}

这里我们直接在页面中获取到ctx，防止DOM未渲染的情况出现，当然也有别的处理方式，随需求就好

---

2.到这里我发现并无法渲染出条形码，一番断点发现setFillStyle这个方法为undefined，阻止了代码执行，于是再修改：

//node_modules/wxbarcode/demo/utils/barcode.js  大概在277行
//use native color
Graphics.prototype._fillRect = function(x, y, width, height, color) {
    this.ctx.fillStyle = color;
    this.ctx.fillRect(x, y, width, height)
}

---

因为需求只使用了条形码，未测试二维码。

然后在页面中使用：

axml，注意canvas一定要设置type，新版规定，宽高也要设置，否则无法显示

<canvas width="300" height="300" id="barcode" type="2d"></canvas>

js，最好给个延迟，等待DOM渲染，否则无法获取

let query = my.createSelectorQuery();
query.select("#barcode").node().exec((res) => { 
    const canvas = res[0].node; 
    barcode(
        canvas,
        "123123123",
        400, 400
    )
});

另外，在使用时突然发现真机上会出现支付宝闪退的问题，修复如下：

//node_modules/wxbarcode/demo/utils/barcode.js 63行将 ctx.drawImage();注掉即可正常显示
exports.code128 = function (ctx, text, width, height) {

    width = parseInt(width);

    height = parseInt(height);

    var codes = stringToCode128(text);  
    var g = new Graphics(ctx, width, height); 
    var barWeight = g.area.width / ((codes.length - 3) * 11 + 35);

    var x = g.area.left;
    var y = g.area.top; 
    for (var i = 0; i < codes.length; i++) {
        var c = codes[i];
        //two bars at a time: 1 black and 1 white
        for (var bar = 0; bar < 8; bar += 2) {
            var barW = PATTERNS[c][bar] * barWeight; 
            // var barH = height - y - this.border;
            var barH = height - y;
            var spcW = PATTERNS[c][bar + 1] * barWeight;

            //no need to draw if 0 width
            if (barW > 0) { 
                g.fillFgRect(x, y, barW, barH);
            }

            x += barW + spcW;
        }
    }

    // ctx.drawImage();
}

---

最后终于渲染出了条形码