Angular.js实现扫码枪扫码并生成二维码
更新时间：2023年3月10日 16:34 点击：24 作者：Jimmy
前言
举个例子：
商品都有自己的序列号 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扫码枪扫码生成二维码的资料请关注猪先飞其它相关文章！
原文出处：https://juejin.cn/post/7207848485856886842
相关文章
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- AngularJS 通过路由支持多视图应用， 可以根据路由动态加载所需的视图， 在 AngularJS 的文档中有详细的介绍， 网上也有不少教程， 就不用介绍了！随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性...2015-10-21
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术，对性能优化感兴趣的同学，可以参考下...2021-05-11
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 过滤器，本质上就是一个函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴，一起来看看吧。...2017-01-26
- 1.什么是异步编程？ 异步编程是指由于异步I/O等因素，无法同步获得执行结果时， 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例： for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式，可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash（哈希），hmac（密钥哈希），cipher...2014-06-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记，内容很详细，感兴趣的小伙伴们可以参考一下...2016-05-20
- 今天小编就为大家分享一篇关于C#后台调用前台JS函数方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧...2020-06-25
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要为大家详细介绍了JS实现纸牌发牌动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-01-19
- 本篇文章主要介绍了node.js爬虫爬取拉勾网职位信息的方法。具有很好的参考价值。下面跟着小编一起来看下吧 用node.js写了一个简单的小爬虫，用来爬取拉勾网上的招...2017-07-06
- 这篇文章主要介绍了Nest.js 授权验证的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 本篇文章主要介绍了Nodejs中使用captchapng模块实现图片验证码，非常具有实用价值，需要的朋友可以参考下 ...2017-05-22
- 大家有没有遇到过在开启本地服务时，有这么一种情况：当前端口已经被另一个项目使用了，导致服务开启失败。那么接下来，我们通过简简单单的示例代码来检测端口是否已经被占用。有需要的朋友们可以参考借鉴。...2016-10-02
- 本文给大家分享基于js实现仿百度文库评分功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧...2017-01-16
- 这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-05
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15