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-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> =&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>

<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://www.lervor.com/archives/113/

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