二维码又称二维条码，常见的二维码为QR Code，QR全称Quick Response，是一种编码方式。它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。
条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符。常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案。条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息，因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用 。
在前端程序中如何生成二维码(qrcode)和条形码（barcode）呢？，那就请往下看，本文介绍了如何使用VUE和小程序前端生成二维码和条形码。
微信小程序 - 生成二维码(qrcode)和条形码（barcode）
采用wxbarcode--微信小程序生成条码和二维码模块。
安装
$ npm install wxbarcode
使用方法
import wxbarcode from 'wxbarcode'
wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);
条形码
函数名：barcode
函数原型：barcode(id, code, width, height)
参数：
- id: wxml文件中的 Canvas ID
- code: 用于生成条形码的字符串
- width: 生成的条形码宽度，单位 rpx
- height: 生成的条形码高度，单位 rpx
二维码
函数名：qrcode
函数原型：qrcode(id, code, width, height)
参数：
- id: wxml文件中的 Canvas ID
- code: 用于生成二维码的字符串
- width: 生成的二维码宽度，单位 rpx
- height: 生成的二维码高度，单位 rpx
具体实例
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）
VUE 生成二维码(qrcodejs）
QRCode.js 是用于制作 QRCode 的 javascript 库。 QRCode.js 支持跨浏览器与 HTML5 Canvas 和 DOM 中的表格标签。 QRCode.js 没有依赖项。
安装依赖
npm i qrcodejs2 --save
组件内使用
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
})
完整实例
<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>
VUE 条形码（barcode）
JsBarcode 是一个用 JavaScript 编写的条形码生成器。它支持多种条形码格式，可在浏览器和 Node.js 中使用。当它用于 web 时它没有依赖性，但如果你喜欢它，它可以与 jQuery 一起使用。
安装依赖
npm install jsbarcode --save
main.js中全局引入
import JsBarcode from 'jsbarcode'
Vue.prototype.jsbarcode = JsBarcode
定义组件
'@/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>
使用组件
<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>
结果
条形码
参考文档：
