我要评论前言
举个例子：
商品都有自己的序列号 sn。那么当我们将这些商品打包的时候，我们就需要生成一份商品的 sn 清单，将其贴在箱子的表面以查看。但是冗长的序列号占位比较大，那么，我们是否可以将这些商品的序列号生成一个二维码呢？然后，我们可以通过扫码就知道这个箱子里面装的是什么序列号的产品。
扫码枪扫码
这个比较简单，首先，我们拿到扫码枪，将其和电脑连接起来。
然后，将鼠标光标放在输入框或者导航栏内，将扫码枪对准商品的序列号条形码进行扫描，相应的内容就会在页面中展示出来。
本文只考虑输入框的情况
为此，我们在页面中构建一个输入框。
核心 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 代码：
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，并结合了 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 。因为生成的这个二维码我们需要添加站点进去，当用户用手机扫描这个二维码之后，能够跳转到对应的站点。
感兴趣的读者可以自行尝试验证。
thanks for reading.
以上就是angular.js实现扫码枪扫码并生成二维码的详细内容，更多关于angular.js扫码枪扫码生成二维码的资料请关注代码网其它相关文章！
发表评论