一、简介

1. 二维码

二维码又称二维条码，常见的二维码为QR Code，QR全称Quick Response，是一种编码方式。它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

2. 条形码

条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符。常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案。条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息，因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用 。

二、微信小程序 - 生成二维码(qrcode)和条形码（barcode）

采用wxbarcode--微信小程序生成条码和二维码模块。

1.安装

$ npm install wxbarcode

2. 使用方法

3. 条形码

函数名：barcode

函数原型：barcode(id, code, width, height)

参数：

• id: wxml文件中的 Canvas ID
• code: 用于生成条形码的字符串
• width: 生成的条形码宽度，单位 rpx
• height: 生成的条形码高度，单位 rpx

4. 二维码

函数名：qrcode

函数原型：qrcode(id, code, width, height)

参数：

• id: wxml文件中的 Canvas ID
• code: 用于生成二维码的字符串
• width: 生成的二维码宽度，单位 rpx
• height: 生成的二维码高度，单位 rpx

5. 具体实例

utils文件下载地址https://github.com/alsey/wxbarcode/tree/master/demo/utils，此步骤是必须的

pages/index/index.js

//index.js
var wxbarcode = require("../../utils/index.js");
 
Page({
  data: {
    code: "1234567890123456789",
  },
 
  onLoad: function () {
    wxbarcode.barcode("barcode", "1234567890123456789", 680, 200);
    wxbarcode.qrcode("qrcode", "1234567890123456789", {
      codeSize: 420,
      color: "#ff0000",
      bgcolor: "#ffffff",
    });
  },
});

pages/index/index.wxml

<!--index.wxml-->
<view class="container page">
  <view class="panel">
    <view class="header">
    </view>
    <view class="barcode">
      <view class="barnum">{{code}}</view>
      <canvas canvas-id="barcode" />
    </view>
    <view class="qrcode">
      <canvas canvas-id="qrcode" />
    </view>
  </view>
</view>

三、VUE 生成二维码(qrcodejs)和条形码（barcode）

1. VUE 生成二维码(qrcodejs）

QRCode.js 是用于制作 QRCode 的 javascript 库。 QRCode.js 支持跨浏览器与 HTML5 Canvas 和 DOM 中的表格标签。 QRCode.js 没有依赖项。

1.1 安装依赖 

npm i qrcodejs2 --save

1.2 组件内使用

import QRCode from 'qrcodejs2'
 
// 1、简单使用：
const qrcode = new QRCode(qrcodeDiv, 'this is qrcode')
 
// 2、复杂使用
const qrcode = new QRCode(qrcodeDiv, {
    text: 'this is qrcode', // 用于生成二维码的文本
    width: 200, // 高度
    height: 200, // 宽度
    colorDark: '#000000', //前景色
    colorLight: '#ffffff', //后景色
    correctLevel: QRCode.CorrectLevel.H, //容错级别 QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H
}) 

1.3 完整实例

<template>
  <div>
      <div id="qrCode" ref="qrCodeDiv"></div> 
  </div>
</template>
 
<script> 
 
import QRCode from 'qrcodejs2';  // 引入 QRCode
 
export default {
  name: "CdsQRCode2", 
  data() {
    return { 
    };
  },
  mounted() {
    this.getCode();
  }, 
  methods: {
      getCode() { 
          new QRCode(this.$refs.qrCodeDiv, {
            text: 'this is qrcode', // 用于生成二维码的文本
            width: 200,
            height: 200,
            colorDark: '#333', //二维码颜色
            colorLight: '#fff', //二维码背景色
            correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
          })  
    },
 
  }
};
</script>  

2. VUE 条形码（barcode）

JsBarcode 是一个用 JavaScript 编写的条形码生成器。它支持多种条形码格式，可在浏览器和 Node.js 中使用。当它用于 web 时它没有依赖性，但如果你喜欢它，它可以与 jQuery 一起使用。

2.1 安装依赖

npm install jsbarcode --save

2.2 main.js中全局引入

import JsBarcode from 'jsbarcode'
Vue.prototype.jsbarcode = JsBarcode

2.3 定义组件

'@/components/Barcode'

<template>
    <div class="barcode-wrapper">
        <img :style="widthStyleObj" class="barcode" />
    </div>
</template>
  
<script>
import JsBarcode from 'jsbarcode'
export default {
    props: {
        JsBarcodeData: {
            type: Object,
        },
    }, 
    mounted() {
        this.$nextTick(() => {
            JsBarcode('.barcode', String(this.JsBarcodeData.text), {     
                 // format: "CODE39",//选择要使用的条形码类型 --  default: "auto" (CODE128)
                  width:1,//设置条之间的宽度
                  height:40,//高度
                  displayValue:false ,//是否在条形码下方显示文字
            //   text:"456",//覆盖显示的文本
            //   fontOptions:"bold italic",//使文字加粗体或变斜体
            //   font:"fantasy",//设置文本的字体
            //   textAlign:"left",//设置文本的水平对齐方式
            //   textPosition:"top",//设置文本的垂直位置
            //   textMargin:5,//设置条形码和文本之间的间距
                 fontSize:15,//设置文本的大小
                 background: this.JsBarcodeData.background,,//设置条形码的背景
                 lineColor: this.JsBarcodeData.lineColor,//设置条和文本的颜色。
                 margin:0//设置条形码周围的空白边距
            });
        })
    },
}
</script>
<style scoped>
.barcode-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}
 
.barcode {
    max-width: 375px !important
}
</style>

2.4 使用组件

<template>
  <div>
    <barcode :JsBarcodeData="JsBarcodeConfigData"/>
  </div>
</template>
 
<script>
import Barcode from '@/components/Barcode'
export default {
  name: "barcode",
  components: {
    Barcode
  },
  data() {
    return {
      JsBarcodeConfigData : {
            text: '12345678909876543210', // 条形码必须是字符串类型，否则会出现后面几位为数字的情况。
            lineColor: "#333", //条形码颜色
            background: "#fff", //条形码背景色
            width: this.widthStyleObj, 
          }
    }
  },
}
</script>

2.5 结果展示

参考文档：

• https://github.com/alsey/wxbarcode
• https://www.npmjs.com/package/wxbarcode/v/1.0.2
• https://github.com/lindell/JsBarcode

好了，本文就到这里吧，点个关注再走嘛~