当前位置: 首页 > news >正文

【前端】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';  // 引入 QRCodeexport 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地图与大数据可视化

http://www.lryc.cn/news/384102.html

相关文章:

  • 同时使用接口文档swagger和knife4j
  • Compose - 权限申请
  • 第十九条:要么为继承而设计并提供文档说明,要么就禁止继承
  • Node.js全栈指南:浏览器显示一个网页
  • Linux远程桌面(Ubuntu/Deepin)——安装和使用 VNC 及通过 noVNC 实现浏览器实现远程桌面访问教程
  • 2024年最新通信安全员考试题库
  • SpringMVC系列八: 手动实现SpringMVC底层机制-下
  • 【昇思初学入门】第八天打卡-模型保存与加载
  • 喜报!极限科技新获得一项国家发明专利授权:“搜索数据库的正排索引处理方法、装置、介质和设备”
  • 深入探讨:UART与USART在单片机中串口的实际应用与实现技巧
  • Windows上PyTorch3D安装踩坑记录
  • 操作符详解(上) (C语言)
  • 使用 audit2allow 工具添加SELinux权限的方法
  • 一文弄懂FPGA
  • Rust 中使用 :: 这种语法的几种情况
  • Ruby langchainrb gem and custom configuration for the model setup
  • 高校新生如何选择最优手机流量卡?
  • QT QML 生成二维码
  • IDEA中Maven--下载安装自己适配的版本---理解
  • 【osgEarth】Ubuntu 22.04 源码编译osgEarth 3.5
  • ASP.NET Core 6.0 使用 资源过滤器和行为过滤器
  • 电脑屏幕花屏怎么办?5个方法解决问题!
  • git 初基本使用-----------笔记
  • Redis-数据类型-Bit的基本操作-getbit-setbit-Bitmap
  • 统信UOS上鼠标右键菜单中添加自定义内容
  • 学习入门 chatgpt原理 一
  • 生命在于学习——Python人工智能原理(4.7)
  • 经典游戏案例:仿植物大战僵尸
  • [Day 18] 區塊鏈與人工智能的聯動應用:理論、技術與實踐
  • 【Mac】DMG Canvas for mac(DMG镜像制作工具)软件介绍