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

 更新时间:2023年03月08日 14:28:17   作者:Jimmy  
这篇文章主要为大家介绍了Angular.js实现扫码枪扫码并生成二维码示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

举个例子:

商品都有自己的序列号 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扫码枪扫码生成二维码的资料请关注脚本之家其它相关文章!

相关文章

  • AngularJS中的路由使用及实现代码

    AngularJS中的路由使用及实现代码

    本篇文章主要介绍了AngularJS中的路由使用及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Angularjs中的$apply及优化使用详解

    Angularjs中的$apply及优化使用详解

    angular js的双向数据绑定,在开发中起到的作用灰常大,所以下面这篇文章主要给大家介绍了关于Angularjs中$apply及优化使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧
    2018-07-07
  • 浅谈Angular路由守卫

    浅谈Angular路由守卫

    这篇文章主要介绍了浅谈Angular路由守卫,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 详解angularJs指令的3种绑定策略

    详解angularJs指令的3种绑定策略

    本篇文章主要介绍了angularJs指令的3种绑定策略,详细的介绍了@=&的用法和实例,有兴趣的可以了解一下。
    2017-04-04
  • Angular中的$watch、$watchGroup、$watchCollection

    Angular中的$watch、$watchGroup、$watchCollection

    这篇文章主要介绍了Angular中的$watch、$watchGroup、$watchCollection ,需要的朋友可以参考下
    2017-06-06
  • 关于AngularJS中几种Providers的区别总结

    关于AngularJS中几种Providers的区别总结

    这篇文章主要给大家介绍了关于AngularJS中几种Providers的区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-05-05
  • 简单说说angular.json文件的使用

    简单说说angular.json文件的使用

    这篇文章主要介绍了简单说说angular.json文件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • AngularJS实现的base64编码与解码功能示例

    AngularJS实现的base64编码与解码功能示例

    这篇文章主要介绍了AngularJS实现的base64编码与解码功能,结合实例形式分析了AngularJS字符串base64编码与解码操作相关实现技巧,需要的朋友可以参考下
    2018-05-05
  • angular共享依赖的解决方案分享

    angular共享依赖的解决方案分享

    这篇文章主要给大家介绍了关于angular共享依赖解决方案的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • ios设备中angularjs无法改变页面title的解决方法

    ios设备中angularjs无法改变页面title的解决方法

    今天小编就为大家分享一篇ios设备中angularjs无法改变页面title的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论