快捷導(dǎo)航

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

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

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

前言

舉個例子：

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

掃碼槍掃碼

這個比較簡單，首先，我們拿到掃碼槍，將其和電腦連接起來。

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

本文只考慮輸入框的情況

為此，我們在頁面中構(gòu)建一個輸入框。

核心 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 = ''; // 提示信息
// 監(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

生成二維碼

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

<!-- 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。這里不進行贅述。

實際上，我們使用的 bcid 類型是 qrcode 。因為生成的這個二維碼我們需要添加站點進去，當(dāng)用戶用手機掃描這個二維碼之后，能夠跳轉(zhuǎn)到對應(yīng)的站點。

感興趣的讀者可以自行嘗試驗證。

Thanks for reading.

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

您可能感興趣的文章: