前言
举个实际场景：每件商品都拥有唯一的序列号（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，因为需要生成的二维码内嵌一个站点链接，用户通过手机扫描后能够直接跳转到对应的信息页面。感兴趣的读者可以自行尝试不同参数配置。通过这种方式，序列号管理与二维码扫码核验的体验将得到显著提升。
