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

朱雀 2021-03-29 10:56 1752阅读 0赞

## 组件推荐

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

**uni-app 条形码生成器：**[barcode 源码和文档说明](https://github.com/q310550690/uni-app-barcode)
**uni-app 二维码生成器：**[qrcode 源码和文档说明](https://github.com/q310550690/uni-app-qrcode)

不过，有点小小的遗憾，这两个组件存在一些不完美的地方。笔者进行了一些优化，并修复了在支付宝小程序中使用无法刷新条形码的问题。大家也可以直接下载笔者优化后的文件（[uniapp条形码和二维码生成器.zip](https://www.lervor.com/usr/uploads/2020/07/2079206658.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>

### 使用自定义组件

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

```
export default {
    onLoad(option){
        this.$nextTick(() => {
            this.$refs['code'].init()
        })
    }
}
```

最终效果图如下：
![](/images/20210329/1617015360321.jpg)