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

1,533 阅读2分钟

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

前言

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

image.png

创建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);
   },

总结

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