Angular.js实现扫码枪扫码并生成二维码的方法

前言

举个实际场景：每件商品都拥有唯一的序列号（SN）。当多件商品被装入同一个箱子时，通常需要打印一份SN清单并贴于箱体，以便后续核对。然而，冗长的数字串不仅占用大量空间，也不利于快速查询。那么，为何不将这些序列号整合成一个二维码呢？只需扫描一下，即可清晰查看箱内所有序列号，省时省力，极大提升序列号管理与核验效率。

扫码枪扫码

这一环节的技术门槛并不高。只需将扫码枪与电脑连接，鼠标光标置于输入框内，对准条码“嘀”一声，内容便自动显示出来。请注意，此处我们仅讨论输入框的应用场景。

首先在页面上构建一个输入框：

接下来是核心的 TypeScript 逻辑实现：

public value:string = ''; //输入框的值，扫码枪扫进去的值
public hintValue: string = ''; // 提示信息
// 监听值的变化
public changeVal():void {
  this.interval$.unsubscribe(); // rxjs 的 interval 方法
  this.valTimer && clearTimeout(this.valTimer);
  this.valTimer = setTimeout(() => {
    this.hintValue = '添加中...'
    this.scanQRCode();
    clearTimeout(this.valTimer);
  }, 500)
}

这里运用了 Angular 生态中的 ant design angular 和 rxjs。扫码枪输入的实质是快速连续地输出一段字符流，我们通过500毫秒内无新输入视为一次扫描结束，从而触发后续的二维码生成与添加逻辑。

生成二维码

二维码生成环节采用了 bwipjs 库，使用方式非常直接。下面是一个基础的调用示例：

// ja vascript
window.onload = function() {
  let qrcodeDom = document.getElementById('qrcode');
  let canvas = bwipjs.toCanvas(qrcodeDom, {
    bcid: 'datamatrix', // 码类型
    text: '110112119', // 码内容
    scale: 3, // 缩放比例
    height: 20, // 高
    width: 20, // 宽
    scaleX: 3, // x轴比例
    scaleY: 3, // y轴比例
    includetext: true, // 展示可读的文本
    textxalign: 'center' // 文本位置
  });
}

更多参数细节可参考 bwipjs 官方文档，此处不再赘述。在实际业务中，我们使用的 bcid 类型为 qrcode，因为需要生成的二维码内嵌一个站点链接，用户通过手机扫描后能够直接跳转到对应的信息页面。感兴趣的读者可以自行尝试不同参数配置。通过这种方式，序列号管理与二维码扫码核验的体验将得到显著提升。