【前端】Vue项目和微信小程序生成二维码和条形码
创始人
2025-01-16 03:07:28
0

前言:哈喽,大家好,我是前端菜鸟的自我修养!今天给大家分享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

                          {{code}}                                 

三、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 完整实例

    

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'

     

2.4 使用组件

  

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地图与大数据可视化

相关内容

热门资讯

专业讨论!德扑之星真破解套路(... 专业讨论!德扑之星真破解套路(辅助挂)软件透明挂(有挂了解)-哔哩哔哩;人气非常高,ai更新快且高清...
每日必看!智星德州菠萝外挂检测... 每日必看!智星德州菠萝外挂检测(辅助挂)软件透明挂(有挂教学)-哔哩哔哩1、玩家可以在智星德州菠萝外...
透视透明挂!轰趴十三水有后台(... 轰趴十三水有后台赢率提升策略‌;透视透明挂!轰趴十三水有后台(辅助挂)软件透明挂(有挂详情)-哔哩哔...
发现玩家!德扑ai助手软件(辅... 发现玩家!德扑ai助手软件(辅助挂)透视辅助(有挂教学)-哔哩哔哩;玩家在德扑ai助手软件中需先进行...
一分钟了解!x-poker辅助... 一分钟了解!x-poker辅助软件(辅助挂)辅助透视(有挂攻略)-哔哩哔哩1、每一步都需要思考,不同...
一分钟揭秘!德州最新辅助器(辅... 一分钟揭秘!德州最新辅助器(辅助挂)透视辅助(有挂攻略)-哔哩哔哩;德州最新辅助器最新版本免费下载安...
玩家攻略推荐!德州辅助(辅助挂... 玩家攻略推荐!德州辅助(辅助挂)辅助透视(有挂了解)-哔哩哔哩是由北京得德州辅助黑科技有限公司精心研...
揭秘真相!pokernow德州... 《揭秘真相!pokernow德州(辅助挂)辅助透视(有挂介绍)-哔哩哔哩》 pokernow德州软件...
五分钟了解!德州之星辅助器(辅... 五分钟了解!德州之星辅助器(辅助挂)辅助透视(有挂透明)-哔哩哔哩1、很好的工具软件,可以解锁游戏的...
推荐一款!pokermaste... 1、推荐一款!pokermaster有外挂(辅助挂)透视辅助(有挂教学)-哔哩哔哩;详细教程。2、p...