【前端】Vue项目和微信小程序生成二维码和条形码

前言：哈喽，大家好，我是前端菜鸟的自我修养！今天给大家分享Vue项目和微信小程序如何生成二维码和条形码，介绍了JsBarcode、wxbarcode等插件，并提供具体代码帮助大家深入理解，彻底掌握！原创不易，如果能帮助到带大家，欢迎 收藏+关注 哦 💕

🌈🌈文章目录

一、简介

1. 二维码

2. 条形码

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

1.安装

2. 使用方法

3. 条形码

4. 二维码

5. 具体实例

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

1. VUE 生成二维码(qrcodejs）

1.1 安装依赖 

1.2 组件内使用

1.3 完整实例

2. VUE 条形码（barcode）

2.1 安装依赖

2.2 main.js中全局引入

2.3 定义组件

2.4 使用组件

2.5 结果展示

参考文档：

一、简介

1. 二维码

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

2. 条形码

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

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

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

1.安装

$ npm install wxbarcode

2. 使用方法

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 --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

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

🚀 个人简介：7年开发经验，现任职某国企前端负责人，分享前端相关技术与工作常见问题~
💟 作    者：前端菜鸟的自我修养❣️
📝 专    栏：前端常见问题汇总，避坑大全
🌈 若有帮助，还请 关注➕点赞➕收藏  ，不行的话我再努努力💪💪💪  

 更多专栏订阅推荐：

👍 前端工程搭建
💕 vue从基础到起飞

📝 javascript深入研究

✍️ GIS地图与大数据可视化