uniapp条形码实现

条形码在实际应用场景是经常可见的。

这里教大家如何集成uniapp条形码。条形码依赖类库JsBarcode.

下载JsBarcode源码，对CanvasRenderer进行了改进兼容uniapp。

import merge from "../help/merge.js";
import {calculateEncodingAttributes, getTotalWidthOfEncodings, getMaximumHeightOfEncodings} from "./shared.js";class CanvasRenderer{constructor(canvas, encodings, options){this.canvas = canvas;this.encodings = encodings;this.options = options;}render(){// Abort if the browser does not support HTML5 canvas// if (!this.canvas.getContext) {// 	throw new Error('The browser does not support canvas.');// }this.initSize()setTimeout(() => {this.prepareCanvas();for(let i = 0; i < this.encodings.length; i++){var encodingOptions = merge(this.options, this.encodings[i].options);this.drawCanvasBarcode(encodingOptions, this.encodings[i]);this.drawCanvasText(encodingOptions, this.encodings[i]);this.moveCanvasDrawing(this.encodings[i]);}this.canvas.draw();}, 50);// this.restoreCanvas();}initSize(){var ctx = this.canvas;calculateEncodingAttributes(this.encodings, this.options, ctx);var totalWidth = getTotalWidthOfEncodings(this.encodings);var maxHeight = getMaximumHeightOfEncodings(this.encodings);this.options.thiz.canvasWidth = totalWidth + this.options.marginLeft + this.options.marginRight;this.options.thiz.canvasHeight = maxHeight;}prepareCanvas(){// Get the canvas contextvar ctx = this.canvas;// ctx.save();// fixEncodings(this.encodings, this.options, ctx)// Paint the canvasctx.clearRect(0, 0, this.options.thiz.canvasWidth, this.options.thiz.canvasHeight);if(this.options.background){ctx.fillStyle = this.options.background;ctx.fillRect(0, 0, this.options.thiz.canvasWidth, this.options.thiz.canvasHeigh);}ctx.translate(this.options.marginLeft, 0);}drawCanvasBarcode(options, encoding){// Get the canvas contextvar ctx = this.canvas;var binary = encoding.data;// Creates the barcode out of the encoded binaryvar yFrom;if(options.textPosition == "top"){yFrom = options.marginTop + options.fontSize + options.textMargin;}else{yFrom = options.marginTop;}// ctx.fillStyle = options.lineColor;ctx.setFillStyle(options.lineColor)for(var b = 0; b < binary.length; b++){var x = b * options.width + encoding.barcodePadding;if(binary[b] === "1"){ctx.fillRect(x, yFrom, options.width, options.height);}else if(binary[b]){ctx.fillRect(x, yFrom, options.width, options.height * binary[b]);}}}drawCanvasText(options, encoding){// Get the canvas contextvar ctx = this.canvas;var font = options.fontOptions + " " + options.fontSize + "px " + options.font;// Draw the text if displayValue is setif(options.displayValue){var x, y;if(options.textPosition == "top"){y = options.marginTop + options.fontSize - options.textMargin;}else{y = options.height + options.textMargin + options.marginTop + options.fontSize;}// ctx.font = font;if(options.fontSize){ctx.setFontSize(options.fontSize)}if(options.lineColor){ctx.setFillStyle(options.lineColor)}// Draw the text in the correct X depending on the textAlign optionif(options.textAlign == "left" || encoding.barcodePadding > 0){x = 0;ctx.textAlign = 'left';}else if(options.textAlign == "right"){x = encoding.width - 1;ctx.textAlign = 'right';}// In all other cases, center the textelse{x = encoding.width / 2;ctx.textAlign = 'center';}ctx.fillText(encoding.text, x, y);}}moveCanvasDrawing(encoding){var ctx = this.canvas;ctx.translate(encoding.width, 0);}restoreCanvas(){// Get the canvas contextvar ctx = this.canvas;ctx.restore();}
}export default CanvasRenderer;

uniapp核心条码组件库

<template><view class="barcode" ><!-- #ifndef MP-ALIPAY --><canvas :canvas-id="elid" :id="elid"  type="2D" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}" /><!-- #endif --><!-- #ifdef MP-ALIPAY --><canvas :id="elid" :width="canvasWidth" :height="canvasHeight" /><!-- #endif --></view>
</template><script>import JsBarcode from "./jsbarcode/JsBarcode.js"export default {data() {return {canvasWidth: 0,canvasHeight: 0,elid: this.$u.guid()}},props: {format:{type: String,default: 'CODE128'},text: {type: String,default: '123'},width: {type: Number,default: 2},height: {type: Number,default: 60},background: {type: String,default: '#ffffff'},fontSize:{type: Number,default: 20},margin:{type: Number,default: 5},// fontColor: {// 	type: String,// 	default: '#000000'// },lineColor: {type: String,default: '#000000'},displayValue: {type: Boolean,default: true},//bottom 或者 toptextPosition:{type: String,default: 'bottom'}	},// 在实例挂载完成后被立即调用//兼容非动态取值(二维码为固定内容)mounted() { this.renderCode()},watch: {text(newVal, oldVal) { //监测到text值发生改变时重新绘制this.renderCode()}},methods: {// 二维码生成工具renderCode() {let ctx = uni.createCanvasContext(this.elid,this)JsBarcode(ctx, this.text, {format:this.format,thiz:this,width:this.width,height:this.height,background:this.background,lineColor:this.lineColor,margin:this.margin,fontSize:this.fontSize,fontColor:this.fontColor,textPosition:this.textPosition,displayValue: this.displayValue});}}}
</script><style>.barcode {display: flex;align-items: center;justify-content: center;}
</style>

uniapp环境下预览效果

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/69881.html

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

相关文章

【探索Linux】—— 强大的命令行工具 P.3（Linux开发工具 vim）

【探索Linux】—— 强大的命令行工具 P.3（Linux开发工具 vim）

阅读导航 前言vim简介概念特点 vim的相关指令vim命令模式(Normal mode)相关指令插入模式(Insert mode)相关指令末行模式(last line mode)相关指令 简单vim配置&#xff08;附配置链接&#xff09;温馨提示 前言 前面我们讲了C语言的基础知识&#xff0c;也了解了一些数据结构&…
阅读更多...
MongoDB:数据库初步应用

MongoDB:数据库初步应用

一.连接MongoDB 1.MongoDBCompass连接数据库 连接路径:mongodb://用户名:密码localhost:27017/ 2.创建数据库(集合) MongoDB中数据库被称为集合. MongoDBCompass连接后,点击红色框加号创建集合,点击蓝色框加号创建文档(数据表) 文档中的数据结构(相当于表中的列)设计不用管…
阅读更多...
《零基础7天入门Arduino物联网-04》电路基础知识上

《零基础7天入门Arduino物联网-04》电路基础知识上

配套视频课程&#xff1a;《零基础学Arduino物联网&#xff0c;入门到进阶》 配套课件资料获取&#xff1a;微联实验室 配套学习套件购买&#xff1a;淘宝搜索店铺【微联实验室】 直流电与交流电 直流电&#xff08;DC&#xff09; 是指电流的方向始终保持不变的电流。这意味着…
阅读更多...
深入源码分析kubernetes informer机制（二）Reflector

深入源码分析kubernetes informer机制（二）Reflector

[阅读指南] 这是该系列第二篇 基于kubernetes 1.27 stage版本 为了方便阅读&#xff0c;后续所有代码均省略了错误处理及与关注逻辑无关的部分。 文章目录 Reflector是什么整体结构工作流程list拉取数据缓存resync操作watch监听操作 总结 Reflector是什么 reflector在informer…
阅读更多...
nginx部署时http接口正常，ws接口404

nginx部署时http接口正常，ws接口404

可以这么配置 map $http_upgrade $connection_upgrade {default upgrade; close; }upstream wsbackend{server ip1:port1;server ip2:port2;keepalive 1000; }server {listen 20038;location /{ proxy_http_version 1.1;proxy_pass http://wsbackend;proxy_redirect off;proxy…
阅读更多...
Android-网络访问技术Retrofit浅析

Android-网络访问技术Retrofit浅析

Retrofit是一种基于注解的网络请求库&#xff0c;专门用于在Android应用中进行网络访问。它使用简洁的方式定义了网络请求的接口&#xff0c;并自动将请求结果解析为Java对象。Retrofit的核心原理是利用了Java的动态代理技术&#xff0c;将网络请求接口的注解信息转化为具体的网…
阅读更多...
软件压力测试对软件产品起到什么作用?

软件压力测试对软件产品起到什么作用?

一、软件压力测试是什么? 软件压力测试是一种通过模拟正常使用环境中可能出现的大量用户和大数据量的情况&#xff0c;来评估软件系统在压力下的稳定性和性能表现的测试方法。在软件开发过程中&#xff0c;经常会遇到一些性能瓶颈和稳定性问题&#xff0c;而软件压力测试的作…
阅读更多...
星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

星星之火：国产讯飞星火大模型的实际使用体验（与GPT对比）

#AIGC技术内容创作征文&#xff5c;全网寻找AI创作者&#xff0c;快来释放你的创作潜能吧&#xff01;# 文章目录 1 前言2 测试详情2.1 文案写作2.2 知识写作2.3 阅读理解2.4 语意测试&#xff08;重点关注&#xff09;2.5 常识性测试&#xff08;重点关注&#xff09;2.6 代码…
阅读更多...
在 OpenCV 中使用深度学习进行年龄检测-附源码

在 OpenCV 中使用深度学习进行年龄检测-附源码

文末附完整源码和模型文件下载链接 在本教程中，我们将了解使用 OpenCV 创建年龄预测器和性别分类器项目的整个过程。 年龄检测 我们的目标是创建一个程序，使用图像来预测人的性别和年龄。但预测年龄可能并不像你想象的那么简单，为什么呢？您可能会认为年龄预测是一个回归问…
阅读更多...
炫酷UI前端效果的CSS生成工具

炫酷UI前端效果的CSS生成工具

提升设计人员和前端开发人员的工作 推荐炫酷UI前端效果的CSS生成工具1.Neumorphism2.带有渐变的图标3.Interactions4.大型数据库5.动画6.Mask7.动画按钮8. 自定义形状分隔线9.背景图案10. SVG波浪推荐炫酷UI前端效果的CSS生成工具 1.Neumorphism 地址：https://neumorphism.i…
阅读更多...
模拟实现定时器

模拟实现定时器

前言 定时器的功能&#xff0c;就是一个类似于闹钟的到点运行的功能。 目录 前言 一、Timer 类 二、分析 Timer 类 三、完整代码实现 结语 一、Timer 类 Java库提供 Timer 类&#xff0c;实现 schedule 方法&#xff0c;给方法提供任务和时间&#xff0c;到时间就运行任务…
阅读更多...
Java：PO、VO、BO、DO、DAO、DTO、POJO

Java：PO、VO、BO、DO、DAO、DTO、POJO

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Java&#xff1a;PO、VO、BO、DO、DAO、DTO、POJO PO持久化对象&#xff08;Persistent Object&#xff09; PO是持久化对象&#xff0c;用于表示数据库中的实体或表…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023