扫码枪扫码并生成二维码

前言

商品都有自己的序列号 Serial Number ，下面简称 SN。那么，当我们将这些商品打包发货的时候，就需要生成一份商品的 SN 清单，将该清单贴在箱子的表面方便发货人或者收货人查看。但是，冗长的 SN 占位比较大，太过抢眼。那么，我们是否可以将这些商品的 SN 生成一个二维码呢？然后，将二维码贴到箱子上即可。当我们需要查看的时候，再进行扫码显示，就知道这个箱子里面装的都有哪些 SN 的产品。

扫码枪扫码

这一操作比较简单，首先，我们拿到扫码枪，将其和电脑连接起来。

这里使用的扫码枪是插入 USB 进行连接；还有些是通过蓝牙连接。无论哪种，根据连接提示进行操作即可

然后，将鼠标光标放在输入框或者导航栏内，用扫码枪对准商品的序列号条形码进行扫描，条形码上相应的内容就会在页面中展示出来。

本文只考虑输入框的情况

为此，我们在页面中构建一个输入框。

核心 html 代码：

<!-- demo.component.html -->
<nz-input-group [nzSuffix]="suffixIconSearch">
  <input type="text" nz-input placeholder="请将鼠标聚焦到该点再使用扫码枪扫码" [(ngModel)]="value" (input)="changeVal()"/>
</nz-input-group>
<ng-template #suffixIconSearch>
  <span nz-icon nzType="scan"></span>
</ng-template>

核心 typescript 代码：

// demo.component.ts
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)
}

案例项目中，我们使用了 ant design angular UI 框架，并结合了 rxjs

生成二维码

实现该功能，我们使用了包 bwipjs。这里有个简单的用法案例：

<!-- html -->
<canvas id="qrcode"></canvas>

// javascript
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 。因为生成的这个二维码我们需要添加站点进去，当用户用手机扫描这个二维码之后，能够跳转到对应的站点。如下：

// https://www.bejson.com/encrypt/gzip/
public encode(): void {
  let encodeStr = window.location.origin 
    + 'forSn?q=' 
    + encodeURIComponent(window.btoa(pako.gzip(this.list.join('\n'), {to: "string"}))); // 对特殊字符进行转换 encodeURIComponent
  this.encodeArr = [encodeStr+'\n', ...this.encodeArr];
}

代码中的变量 list 存放的就是扫码枪扫描商品的 SN 信息。

Thanks for reading.