组件推荐
我们在用 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-barcode
ref="barcode"
onval
:val="code"
:load-make="true"
:opations="barOpations"/>
</view>
<view class="component-qr">
<tki-qrcode
ref="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>
<script>
import tkiBarcode from ‘@/components/tki-barcode/tki-barcode’
import tkiQrcode from ‘@/components/tki-qrcode/tki-qrcode’
<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> =></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>
<style lang=“scss” scoped>
.component {
border-radius: 16rpx;
overflow: hidden;
display: flex;
flex-direction: column;
background: #FFFFFF;
flex: 1;
margin: 64rpx;
padding: 64rpx 32rpx;
&-title {
max-height: 112rpx;
font-size: 40rpx;
font-weight: 600;
line-height: 56rpx;
overflow: hidden;
}
&-code {
height: 150rpx;
margin: 32rpx 32rpx 0;
}
&-qr {
height: 250rpx;
margin-top: 36rpx;
}
.coupon-no-view {
margin: 0 18rpx;
height: 76rpx;
border-radius: 8rpx;
border: 2px solid #F5F5F5;
display: flex;
align-items: center;
padding: 0 24rpx;
margin-top: 36rpx;
text {
font-size: 24rpx;
font-weight: 400;
&:first-child {
color: #999999;
}
}
.coupon-no {
flex: 1;
text-align: left;
}
}
}
</style>
使用自定义组件
在需要使用这个组件的地方引入使用,并在 onLoad 或其他需要使用一维码/二维码的方法中直接调用 init,如下:
export default {
onLoad(option){
this.$refs[‘code’].init()
}
}
最终效果图如下:
![](https://i-blog.csdnimg.cn/blog_migrate/e403d5b760dd9f4a96e9a3b669a936f2.jpeg)
版权属于:瞭月
本文链接:https://www.lervor.com/archives/113/
版权声明:本文为瞭月原创文章,转载请附上原文出处链接和本声明。