欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

Vue与微信小程序:快速制作条形码与二维码的实战指南

最编程 2024-07-24 21:46:12
...

二维码又称二维条码,常见的二维码为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>

结果

参考文档:

  • https://www.cnblogs.com/zwh0910/p/16692073.html
  • https://github.com/alsey/wxbarcode
  • https://www.npmjs.com/package/wxbarcode/v/1.0.2
  • https://github.com/lindell/JsBarcode