快捷導(dǎo)航

Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼

更新時(shí)間：2023年03月08日 14:28:17 作者：Jimmy

這篇文章主要為大家介紹了Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

舉個(gè)例子：

商品都有自己的序列號(hào) SN。那么當(dāng)我們將這些商品打包的時(shí)候，我們就需要生成一份商品的 SN 清單，將其貼在箱子的表面以查看。但是冗長(zhǎng)的序列號(hào)占位比較大，那么，我們是否可以將這些商品的序列號(hào)生成一個(gè)二維碼呢？然后，我們可以通過(guò)掃碼就知道這個(gè)箱子里面裝的是什么序列號(hào)的產(chǎn)品。

掃碼槍掃碼

這個(gè)比較簡(jiǎn)單，首先，我們拿到掃碼槍?zhuān)瑢⑵浜碗娔X連接起來(lái)。

然后，將鼠標(biāo)光標(biāo)放在輸入框或者導(dǎo)航欄內(nèi)，將掃碼槍對(duì)準(zhǔn)商品的序列號(hào)條形碼進(jìn)行掃描，相應(yīng)的內(nèi)容就會(huì)在頁(yè)面中展示出來(lái)。

本文只考慮輸入框的情況

為此，我們?cè)陧?yè)面中構(gòu)建一個(gè)輸入框。

核心 html 代碼：

<nz-input-group [nzSuffix]="suffixIconSearch">
  <input type="text" nz-input placeholder="請(qǐng)將鼠標(biāo)聚焦到該點(diǎn)再使用掃碼槍掃碼" [(ngModel)]="value" (input)="changeVal()"/>
</nz-input-group>
<ng-template #suffixIconSearch>
  <span nz-icon nzType="scan"></span>
</ng-template>

核心 typescript 代碼：

public value:string = ''; //輸入框的值，掃碼槍掃進(jìn)去的值
public hintValue: string = ''; // 提示信息
// 監(jiān)聽(tīng)值的變化
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，并結(jié)合了 rxjs

生成二維碼

實(shí)現(xiàn)該功能，我們使用了包 bwipjs。這里有個(gè)簡(jiǎn)單的用法案例：

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

// javascript
window.onload = function() {
  let qrcodeDom = document.getElementById('qrcode');
  let canvas = bwipjs.toCanvas(qrcodeDom, {
    bcid: 'datamatrix', // 碼類(lèi)型
    text: '110112119', // 碼內(nèi)容
    scale: 3, // 縮放比例
    height: 20, // 高
    width: 20, // 寬
    scaleX: 3, // x軸比例
    scaleY: 3, // y軸比例
    includetext: true, // 展示可讀的文本
    textxalign: 'center' // 文本位置
  });
}

相關(guān)的參數(shù)說(shuō)明，我們可以直接查看 bwipjs。這里不進(jìn)行贅述。

實(shí)際上，我們使用的 bcid 類(lèi)型是 qrcode 。因?yàn)樯傻倪@個(gè)二維碼我們需要添加站點(diǎn)進(jìn)去，當(dāng)用戶(hù)用手機(jī)掃描這個(gè)二維碼之后，能夠跳轉(zhuǎn)到對(duì)應(yīng)的站點(diǎn)。

感興趣的讀者可以自行嘗試驗(yàn)證。

Thanks for reading.

以上就是Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的詳細(xì)內(nèi)容，更多關(guān)于Angular.js掃碼槍掃碼生成二維碼的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: