【前端】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.mzph.cn/pingmian/35326.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

5G与自动驾驶

5G与自动驾驶

上篇&#xff08;5G与4G的区别-CSDN博客&#xff09;讲了4G与5G的区别&#xff0c;大家可以看到5G具备高带宽、低时延的特性&#xff0c;可以广泛应用于各种物联网场景。 今天和大家简单聊聊5G与自动驾驶。 自动驾驶依靠人工智能、视觉计算、雷达、监控装置和全球定位系统协同…
阅读更多...
Android Gradle开发与应用：Gradle基础

Android Gradle开发与应用：Gradle基础

Android Gradle开发与应用&#xff1a;Gradle基础 Gradle是一款开源的自动化构建工具&#xff0c;已成为Android官方首推的自动化构建工具线。以下是关于Gradle在Android开发中的基础知识和应用&#xff0c;将按照几个关键点进行分点表示和归纳。 1. Gradle的基本概念 Proje…
阅读更多...
关于mybatis中Mapper对应xml要写参数名的

关于mybatis中Mapper对应xml要写参数名的

1. 问题: 当我们在Mapper和xml之中传递参数时,必须要用Param注解来标识参数名, 否则参数就对应不上, 但每个参数都写Param就很烦人, 情况如下: mapper: User findById(Param("id") Long id); xml: <select id"findById" resultType"com.hz.doma…
阅读更多...
为什么要学Java？

为什么要学Java？

想要自己教会自己java&#xff0c;从小白成长到架构师。实现硬实力就业&#xff01; 因为Java是全球排名第一的编程语言&#xff0c;Java工程师也是市场需求最大的软件工程师&#xff0c;选择Java&#xff0c;就是选择了高薪。 为什么Java应用最广泛&#xff1f; 从互联网到…
阅读更多...
软件测试：实验一 黑盒测试技术

软件测试：实验一 黑盒测试技术

一、实验目的 掌握黑盒测试的基本概念和原理&#xff0c;基本方法和技术。学会运用边界值、等价类划分方法对应用程序进行测试。学会使用测试用例对应用程序进行实际测试&#xff0c;并记录测试结果。 二、实验要求 分析被测应用程序&#xff0c;选定合适的黑盒测试方法。根…
阅读更多...
基于FreeRTOS+STM32CubeMX+LCD1602+MCP4141（SPI接口）的数字电位器Proteus仿真

基于FreeRTOS+STM32CubeMX+LCD1602+MCP4141（SPI接口）的数字电位器Proteus仿真

一、仿真原理图： 二、运行效果： 三、软件部分： 1）、SPI读写： 2）、初始化部分： void SystemClock_Config(void) { RCC_OscInitTypeDef RCC_OscInitStruct = {0}; RCC_ClkInitTypeDef RCC_ClkInitStruct = {0}; /** Initializes the CPU, AHB and APB busses clocks …
阅读更多...
基于python爬虫对豆瓣影评分析系统的设计与实现

基于python爬虫对豆瓣影评分析系统的设计与实现

基于python爬虫对豆瓣影评分析系统的设计与实现 Design and Implementation of a Python-based Web Crawler for Analyzing Douban Movie Reviews 完整下载链接:基于python爬虫对豆瓣影评分析系统的设计与实现 文章目录 基于python爬虫对豆瓣影评分析系统的设计与实现摘要第一…
阅读更多...
SQL连接与筛选：解析left join on和where的区别及典型案例分析

SQL连接与筛选：解析left join on和where的区别及典型案例分析

文章目录 前言数据库在运行时的执行顺序一、left join on和where条件的定义和作用left join on条件where条件 二、left join on和where条件的区别原理不同left join原理&#xff1a;where原理&#xff1a; 应用场景不同执行顺序不同&#xff08;作用阶段不同&#xff09;结果集…
阅读更多...
Netty学习（二）——黏包半包、协议设计解析、聊天室

Netty学习（二）——黏包半包、协议设计解析、聊天室

一、粘包与半包 1.1 粘包和半包复现 1、粘包复现&#xff1a; Server代码&#xff1a; public class ProblemServer {public static void main(String[] args) throws InterruptedException {new ServerBootstrap()//若是指定接收缓冲区大小&#xff1a;就会出现黏包、半包…
阅读更多...
测试零一万物大模型

测试零一万物大模型

听闻李开复先生创业的零一大模型很牛逼&#xff0c;一大早测试了一下。 代码 &#xff08;python) from openai import OpenAI API_BASE "https://api.lingyiwanwu.com/v1" API_KEY "61310vvvvvvc975" client OpenAI(api_keyAPI_KEY,base_urlAPI_BASE…
阅读更多...
搜维尔科技：CyberGlove Systems 是数据手套技术的全球领导者，提供市场上最先进的以手为中心的 3D 动作捕捉解决方案

搜维尔科技：CyberGlove Systems 是数据手套技术的全球领导者，提供市场上最先进的以手为中心的 3D 动作捕捉解决方案

CyberGlove Systems 是数据手套技术的全球领导者&#xff0c;提供市场上最先进的以手为中心的 3D 动作捕捉解决方案 搜维尔科技&#xff1a;快速了解 SenseGlove 的 Nova VR 触觉力反馈手套
阅读更多...
Python3 学习笔记——基本知识入门 | 菜鸟教程

Python3 学习笔记——基本知识入门 | 菜鸟教程

Python3 学习笔记——基本知识入门 | 菜鸟教程 目录 Python3 学习笔记——基本知识入门 | 菜鸟教程基础知识标识符python保留字注释行与缩进多行语句数字(Number)类型字符串(String)空行等待用户输入同一行显示多条语句多个语句构成代码组print 输出import 与 from...import命令…
阅读更多...
DDR3控制器（一）DDR3 IP调用

DDR3控制器（一）DDR3 IP调用

目录 一、DDR3 IP核简介 二、DDR3 IP核调用 在千兆以太网通信中用到了DDR3控制器&#xff0c;但是并没有对其做相关介绍。这次准备重新整理一下DDR3控制相关知识&#xff0c;复习巩固一下。 一、DDR3 IP核简介 MIG IP核&#xff08;Memory Interface Generator&#xff09;是…
阅读更多...
String buffer和String builder区别

String buffer和String builder区别

在Java中&#xff0c;StringBuffer和StringBuilder都是用于创建可变的字符序列的类&#xff0c;但它们之间有一些重要的区别&#xff0c;主要体现在线程安全性和性能方面。 StringBuffer 线程安全&#xff1a;StringBuffer中的方法是同步的&#xff08;synchronized&#xff0…
阅读更多...
【人工智能】python之人工智能应用篇--数字人生成技术

【人工智能】python之人工智能应用篇--数字人生成技术

数字人生成技术概述 数字人生成技术是基于人工智能技术和计算机图形学技术创建的虚拟人物形象的技术。该技术能够模拟人类的外貌、声音、动作和交流能力&#xff0c;为多个领域带来创新的应用可能性。数字人的本质是将所有信息&#xff08;数字和文字&#xff09;通过数字处理…
阅读更多...
LeetCode 100346. 使二进制数组全部等于 1 的最少操作次数 II

LeetCode 100346. 使二进制数组全部等于 1 的最少操作次数 II

更多题解尽在 https://sugar.matrixlab.dev/algorithm 每日更新。 组队打卡&#xff0c;更多解法等你一起来参与哦&#xff01; LeetCode 100346. 使二进制数组全部等于 1 的最少操作次数 II&#xff0c;难度中等。 遍历 解题思路&#xff1a;参考 100344. 使二进制数组全部等…
阅读更多...
Loss和Reward分析和改善DQN的训练

Loss和Reward分析和改善DQN的训练

Loss 分布分析 初期阶段的高 loss&#xff1a; 在训练开始时&#xff0c;loss 值非常高。这是正常现象&#xff0c;因为神经网络刚开始随机初始化&#xff0c;策略还没有学到有用的信息。随着训练进行&#xff0c;loss 快速下降&#xff0c;表明模型开始从经验中学习&#xff0…
阅读更多...
气膜游泳馆建造成本要多少—轻空间

气膜游泳馆建造成本要多少—轻空间

随着人们对健康生活的追求和游泳运动的普及&#xff0c;游泳馆的需求不断增加。传统游泳馆的建设周期长、成本高&#xff0c;而气膜游泳馆以其独特的优势成为一种新的选择。轻空间将详细分析气膜游泳馆的建造成本及其优势。 气膜游泳馆的基本结构 气膜游泳馆主要由以下几个部分…
阅读更多...
静电场的基本方程

静电场的基本方程

目录 场积分方程 通量&#xff08;高斯定理&#xff09; 环量 场微分方程 散度 旋度 小结 补充知识 立体角 场积分方程 通量&#xff08;高斯定理&#xff09; 环量 场微分方程 散度 旋度 小结 补充知识 立体角
阅读更多...
Open3D 删除点云中重复的点

Open3D 删除点云中重复的点

目录 一、算法原理1、重叠点2、主要函数二、代码实现三、结果展示本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。 一、算法原理 1、重叠点 原始点云克隆一份   构造重叠区域   合并点云获得重叠点 2、主要…
阅读更多...
最新文章

Copyright @ 2022~2023