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

這篇文章主要講解了“Angular.js如何實(shí)現(xiàn)掃碼槍掃碼并生成二維碼”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular.js如何實(shí)現(xiàn)掃碼槍掃碼并生成二維碼”吧！

掃碼槍掃碼

這個(gè)比較簡(jiǎn)單，首先，我們拿到掃碼槍，將其和電腦連接起來。

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

本文只考慮輸入框的情況

為此，我們?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)聽值的變化
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', // 碼類型
    text: '110112119', // 碼內(nèi)容
    scale: 3, // 縮放比例
    height: 20, // 高
    width: 20, // 寬
    scaleX: 3, // x軸比例
    scaleY: 3, // y軸比例
    includetext: true, // 展示可讀的文本
    textxalign: 'center' // 文本位置
  });
}

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

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

感謝各位的閱讀，以上就是“Angular.js如何實(shí)現(xiàn)掃碼槍掃碼并生成二維碼”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Angular.js如何實(shí)現(xiàn)掃碼槍掃碼并生成二維碼這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！