uni-app 条形码(一维码)/二维码生成实现

组件推荐

我们在用 uni-app 开发前端时，有时会用到条形码或者二维码，甚至一个页面同时用到条形码和二维码。笔者推荐使用以下两个组件：

uni-app 条形码生成器：barcode 源码和文档说明
uni-app 二维码生成器：qrcode 源码和文档说明

不过，有点小小的遗憾，这两个组件存在一些不完美的地方。笔者进行了一些优化，并修复了在支付宝小程序中使用无法刷新条形码的问题。大家也可以直接下载笔者优化后的文件（uniapp条形码和二维码生成器.zip），解压后（条形码：tki-barcode、二维码：tki-qrcode）放在 components 文件夹下。

使用方式

自定义组件

自定义一个组件，代码如下：

<template><view class="component text-center"><view class="component-title">条形码和二维码混用</view><view class="component-code"><tki-barcoderef="barcode"onval:val="code":load-make="true":opations="barOpations"/></view><view class="component-qr"><tki-qrcoderef="qrcode"onval:val="code":size="250":load-make="true":show-loading="false"/></view><view class="coupon-no-view"><text>编号：</text><text class="coupon-no">{{ code }}</text></view></view>
</template>

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {<span class="hljs-attr">components</span>: {tkiBarcode,tkiQrcode},data() {<span class="hljs-keyword">return</span> {<span class="hljs-attr">code</span>: <span class="hljs-string">''</span>,<span class="hljs-attr">barOpations</span>: {<span class="hljs-attr">height</span>: <span class="hljs-number">150</span>,<span class="hljs-attr">displayValue</span>: <span class="hljs-literal">false</span>}}},<span class="hljs-attr">methods</span>: {init () {<span class="hljs-keyword">this</span>.code = <span class="hljs-string">'1234567890'</span> <span class="hljs-comment">// 生成一维码和二维码</span>setTimeout(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {<span class="hljs-keyword">this</span>.code = <span class="hljs-string">'0987654321'</span> <span class="hljs-comment">// 5 秒后刷新一维码和二维码</span>}, <span class="hljs-number">5000</span>)}}
}

</script>

使用自定义组件

在需要使用这个组件的地方引入使用，并在 onLoad 或其他需要使用一维码/二维码的方法中直接调用 init，如下：

export default {
onLoad(option){
this.$refs[‘code’].init()
}
}

最终效果图如下：

版权属于：瞭月

本文链接：https://www.lervor.com/archives/113/

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。

uni-app 条形码(一维码)/二维码生成实现相关推荐

Andro Studio 基于Zing一维码二维码扫描代码
现在一维码二维码在我们的日常生活中使用如此的广泛,所以拥有扫码功能的APP变得非常普遍,一个安卓APP需要扫码功能就要用到zxing了,zxing是谷歌开源的让开发者更方便使用摄像头的库,而我们常用的 ...
h5 实现扫码二维码及条形码（js多种实现方式）
方式一. 只识别二维码实现方式一 jsQR 个人预览页面网址只扫码二维码 GitHub jsQR inde.html <!DOCTYPE html> <html><he ...
让你的APP轻松加上扫描二维码功能
在这个二维码横行的年代,如果一个APP连扫描二维码的功能都没有是会被耻笑的.今天小老虎教小白们如何为自己的APP添加扫描二维码功能和生成二维码,并做到外部扫描跳转网页,内部扫描跳转具体Activity ...
halcon视觉一维、二维码的区别-@龙熙视觉培训李杰
一维码(条形码) 一维条码即指条码条和空的排列规则,常用的一维码的码制包括:EAN码.39码.交叉25码.UPC码.128码.93码,ISBN码,及Codabar(库德巴码)等. 条码是由一组规则排列 ...
OPT小讲堂 ∣ SciSmart图像识别之条形码识别、二维码识别
在第十三课中,我们讲了图像识别中的OCR:字符识别. 本课将继续介绍图像识别中的条形码识别.二维码识别.我们将分别介绍二者的基本概念.操作流程.参数解析及应用案例. 条形码识别条形码识别的概念条形 ...
Jenkins配置自动打包app发布蒲公英显示二维码
Jenkins配置自动打包app发布蒲公英显示二维码搞了一周,终于弄好了,下面就是见证奇迹的时刻. 1.下载Jenkins,去官网点这里选择Windows版本: 2.下载完是个zip解压安装一路 ...
ios app 解决微信扫二维码不能跳转问题
ios app 解决微信扫二维码不能跳转问题参考文章: (1)ios app 解决微信扫二维码不能跳转问题 (2)https://www.cnblogs.com/wuxian/p/4618374.h ...
STM32F407获取OV7670摄像头图像及上位机解码（一维码二维码）
STM32F407获取OV7670摄像头图像及上位机解码(一维码&二维码) 1. 目的针对静止拍摄图像场景,实现STM32F407对30万像素OV7670摄像头进行图像捕获,并通过串口将数据 ...
IOS抖音短视频APP开发关于扫描二维码，并根据文本生成二维码
IOS抖音短视频APP开发关于扫描二维码,(根据光线强弱显示隐藏闪光灯)并根据文本生成二维码. WeakSelf; //IOS抖音短视频APP开发构建扫描样式视图 _scanView = [[WSLS ...
前端条码打印方案(表格+中文+一维码+二维码)
前言条码打印不同于普通打印机,条码大小各不相同,需要针对不同标签贴纸开发不同的样式 1. 条码打印的两种方案: 后端ZPL指令打印前端调用浏览器打印 2. 优缺点分析: 优点缺点后端ZPL指令 ...