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

Posted on by

前言

舉個例子：

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

推薦閱讀：