在微信小程序中使用条形码生成器

此功能是基于插件实现的，具体插件可以自行在插件市场下载使用，下载地址：条形码生成器 - DCloud 插件市场

最终实现效果：

微信APP能够扫码识别的条形码类型有code128\code39\ean13\ean8\upc\itf14，这里使用的是code128

1.将 tki-barcode 添加到对应的components包目录

2.在template中添加

<tk i-barcode :loadMake="false" :opations="opations" :onval="true" format="code128" :val="val" ref="barcode" @result="barresult"></tki-barcode>

3.在script中添加

import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
export default {components: {tkiBarcode},data(){return{opations: {width: 4,height: 120,fontSize: 24,fontColor: "#000000",displayValue: true,textAlign: "center",textPosition: "bottom",textMargin: 5,background: "#FFFFFF",margin: 5},val: "",bar: ['barcode']}}
}

4.style样式调整

.tki-barcode {padding: 10rpx 5rpx;}.tki-barcode>>>image {width: 100% !important;height: 84rpx;}.tki-barcode>>>.tki-barcode-canvas {width: 100% !important;height: 84rpx;}

5.onload 中调用生成条形码方法

setTimeout(() => {for (let index = 0; index < this.bar.length; index++) {setTimeout(() => {this.$refs[this.bar[index]]._makeCode()}, 1000 * index);}
}, 1000);

在微信小程序中使用条形码生成器相关推荐

Canvas 动画引擎解析与微信小程序中的应用
点击观看大咖分享抗击疫情,腾讯云在行动.在开发微信小程序的过程中,我们经常需要展现一些图形和图表.目前市面上有好几款常用的图形库,在这些图形库的底层都有渲染引擎在支撑. ZRender 是其中一款非 ...
在微信小程序中，如果自动通过fastadmin来获取用户所在的省市地区？
要在微信小程序中自动获取用户所在的省市地区,可以通过fastadmin提供的API来实现.具体步骤如下: 在fastadmin中,需要建立相应的API接口,用于获取用户所在的省市地区信息.可以通过fa ...
font-awesome字体图标库在微信小程序中的使用
1.下载font-awesome 官网地址:https://fontawesome.dashgame.com 下载解压后得到文件如下: 2.利用tansfonter CSS @ font-face生成 ...
微信小程序setinterval_微信小程序中setInterval的使用方法
微信小程序中setinterval的使用方法看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序中this指向作用域问题this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据 this.setData({index1: e.detail.value}) 比如在函数里面修改数据 bindFaChange1: funct ...
在微信小程序中绘制图表（part2）
本期大纲 1.确定纵坐标的范围并绘制 2.根据真实数据绘制折线相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part3) 关注我的 github 项目查看完整代码. 确 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
在微信小程序中使用字体图标
方法一:转化为base64 第一步:在阿里巴巴矢量图标库下载需要的图标 QQ截图20180316191514.png 点击下载代码,将下载后的download.zip解压第二步:进入https:// ...

在微信小程序中使用条形码生成器

在微信小程序中使用条形码生成器相关推荐

最新文章

热门文章