阅读量:3
前言：哈喽，大家好，我是前端菜鸟的自我修养！今天给大家分享Vue项目和微信小程序如何生成二维码和条形码，介绍了JsBarcode、wxbarcode等插件，并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕
🌈🌈文章目录
二、微信小程序 - 生成二维码(qrcode)和条形码（barcode）
三、VUE 生成二维码(qrcodejs)和条形码（barcode）
一、简介
1. 二维码
二维码又称二维条码，常见的二维码为QR Code，QR全称Quick Response，是一种编码方式。它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。
2. 条形码
条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符。常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案。条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息，因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用 。
二、微信小程序 - 生成二维码(qrcode)和条形码（barcode）
采用wxbarcode--微信小程序生成条码和二维码模块。
1.安装
$ npm install wxbarcode2. 使用方法
import wxbarcode from 'wxbarcode' wxbarcode.barcode('barcode', '1234567890123456789', 680, 200); wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);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文件下载地址，此步骤是必须的
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 --save1.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 --save2.2 main.js中全局引入
import JsBarcode from 'jsbarcode' Vue.prototype.jsbarcode = JsBarcode2.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 结果展示
参考文档：
好了，本文就到这里吧，点个关注再走嘛~
🚀 个人简介：7年开发经验，现任职某国企前端负责人，分享前端相关技术与工作常见问题~
💟 作 者：前端菜鸟的自我修养❣️
📝 专 栏：前端常见问题汇总，避坑大全
🌈 若有帮助，还请 关注➕点赞➕收藏 ，不行的话我再努努力💪💪💪
更多专栏订阅推荐：
✍️ GIS地图与大数据可视化
