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'
    
    export default {
        components: {
            tkiBarcode,
            tkiQrcode
        },
        data() {
            return {
                code: '',
                barOpations: {
                    height: 150,
                    displayValue: false
                }
            }
        },
        methods: {
            init () {
                this.code = '1234567890' // 生成一维码和二维码
                setTimeout(() => {
                    this.code = '0987654321' // 5 秒后刷新一维码和二维码
                }, 5000)
            }
        }
    }
</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.$nextTick(() => {
            this.$refs['code'].init()
        })
    }
}

最终效果图如下：

本文系转载，原文链接：https://www.lervor.com/archives/113/