【barcode.js】小程序生成条形码

「这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战」

前言

一开始做的只是显示一个兑换码的字符串，后面客户嫌自己输入麻烦（要我输，我也觉得麻烦，23333），后来改为条形码的方式，客户使用扫码枪，直接扫入系统核销。

创建barcode_util.js 文件

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

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

function barc(id, code, width, height) {
    barcode.code128(wx.createCanvasContext(id), code, convert_length(width), convert_length(height))
}
 
module.exports = {
    barcode:  barc
}
复制代码

barcode.js文件请查看

wxml文件

创建一个canvas标签，存放条形码

<canvas canvas-id="{{couponItemid}}" style="width:400rpx;height:100rpx;display:block;margin:0 auto"></canvas>
复制代码

组件js文件

引入封装的barcode_util.js文件，初始化这个条形码的参数(canvasid,条形码数字,宽度,高度)

这里的宽度数字不宜太大，我再设置600的时候，发现扫码枪，扫描不上，当时还以为是代码哪里有问题，搞了半天是这里的宽度数字过大，影响的。

var wxbarcode = require('../../utils/barcode_util.js');
wxbarcode.barcode(that.data.couponItemid, item.check_code, 400, 100);
复制代码

遇到的问题

我这里做的是一个循环列表，点击生成条形码的需求，单个页面，单个条形码生成，不存在这个问题。

情况是这样子的，循环列表，点击生成条形码，弹框显示隐藏，生成条形码的盒子一直就是一个，第一次生成没有问题，第二次点击的时候，就显示空白了，因为canvas的id没有改变。

先来说说我的解决办法

我这里用的方法，比较简单，而且不是很好的方法，大家是怎么解决的，还请大神们评论区告知一下，我好优化优化我的代码。23333

我这里定义了一个couponItemid，没点击一次，在原始的数据上，重新加一层C+1,更新这个ID每次不重样，是不是比较武力的解决办法，哈哈。

  popup: function (e) {
    var that = this
    var item = e.currentTarget.dataset.item;
    console.log(item)
     this.setData({
       showModal: true,
       couponItemid:'c'+that.data.couponItemid + 1,
       couponItem:item
     })
     wxbarcode.barcode(that.data.couponItemid, item.check_code, 400, 100);
   },
复制代码

总结

这是第一次使用条形码做扫码枪的识别，之前一直都是用的二维码的方式，希望以后不迷路。很希望得到大神们给予我遇到的哪个问题的优化方案。