Angular.js實現掃碼槍掃碼並生成二維條碼

2023-03-09 06:04:38

前言

舉個例子：

商品都有自己的序列號 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掃碼槍掃碼生成二維條碼的資料請關注it145.com其它相關文章！

Angular.js實現掃碼槍掃碼並生成二維條碼

目錄

前言

掃碼槍掃碼

生成二維條碼

熱門文章