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()
}
}

最终效果图如下:
《uni-app 条形码(一维码)/二维码生成实现》

版权属于:瞭月

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

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

    原文作者:鉴泉~Richarlie
    原文地址: https://blog.csdn.net/s_156/article/details/113239224
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞