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

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

组件推荐

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

uni-app 条形码生成器：barcode 源码和文档说明
uni-app 二维码生成器：qrcode 源码和文档说明

不过，有点小小的遗憾，这两个组件存在一些不完美的地方。笔者进行了一些优化，并修复了在支付宝小程序中使用无法刷新条形码的问题。大家也可以直接下载笔者优化后的文件（uniapp条形码和二维码生成器.zip），解压后（条形码：tki-barcode、二维码：tki-qrcode）放在 components 文件夹下。

使用方式

自定义组件

自定义一个组件，代码如下：

  1. <template>
  2.     <view class="component text-center">
  3.         <view class="component-title">条形码和二维码混用</view>
  4.         <view class="component-code">
  5.             <tki-barcode
  6.                 ref="barcode"
  7.                 onval
  8.                 :val="code"
  9.                 :load-make="true"
  10.                 :opations="barOpations"/>
  11.         </view>
  12.         <view class="component-qr">
  13.             <tki-qrcode
  14.                 ref="qrcode"
  15.                 onval
  16.                 :val="code"
  17.                 :size="250"
  18.                 :load-make="true"
  19.                 :show-loading="false"/>
  20.         </view>
  21.         <view class="coupon-no-view">
  22.             <text>编号：</text>
  23.             <text class="coupon-no">{{ code }}</text>
  24.         </view>
  25.     </view>
  26. </template>
  28. <script>
  29.     import tkiBarcode from '@/components/tki-barcode/tki-barcode'
  30.     import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'
  32.     export default {
  33.         components: {
  34.             tkiBarcode,
  35.             tkiQrcode
  36.         },
  37.         data() {
  38.             return {
  39.                 code: '',
  40.                 barOpations: {
  41.                     height: 150,
  42.                     displayValue: false
  43.                 }
  44.             }
  45.         },
  46.         methods: {
  47.             init () {
  48.                 this.code = '1234567890' // 生成一维码和二维码
  49.                 setTimeout(() => {
  50.                     this.code = '0987654321' // 5 秒后刷新一维码和二维码
  51.                 }, 5000)
  52.             }
  53.         }
  54.     }
  55. </script>
  57. <style lang="scss" scoped>
  58.     .component {
  59.         border-radius: 16rpx;
  60.         overflow: hidden;
  61.         display: flex;
  62.         flex-direction: column;
  63.         background: #FFFFFF;
  64.         flex: 1;
  65.         margin: 64rpx;
  66.         padding: 64rpx 32rpx;
  67.         &-title {
  68.             max-height: 112rpx;
  69.             font-size: 40rpx;
  70.             font-weight: 600;
  71.             line-height: 56rpx;
  72.             overflow: hidden;
  73.         }
  74.         &-code {
  75.             height: 150rpx;
  76.             margin: 32rpx 32rpx 0;
  77.         }
  78.         &-qr {
  79.             height: 250rpx;
  80.             margin-top: 36rpx;
  81.         }
  82.         .coupon-no-view {
  83.             margin: 0 18rpx;
  84.             height: 76rpx;
  85.             border-radius: 8rpx;
  86.             border: 2px solid #F5F5F5;
  87.             display: flex;
  88.             align-items: center;
  89.             padding: 0 24rpx;
  90.             margin-top: 36rpx;
  91.             text {
  92.                 font-size: 24rpx;
  93.                 font-weight: 400;
  94.                 &:first-child {
  95.                     color: #999999;
  96.                 }
  97.             }
  98.             .coupon-no {
  99.                 flex: 1;
  100.                 text-align: left;
  101.             }
  102.         }
  103.     }
  104. </style>

使用自定义组件

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

  1. export default {
  2.     onLoad(option){
  3.         this.$nextTick(() => {
  4.             this.$refs['code'].init()
  5.         })
  6.     }
  7. }

最终效果图如下：

发表评论

表情：
评论列表 （有 1 条评论，1924人围观）
蒲公英云E124D1
蒲公英云E124D1V铁粉 2022-08-07 03:43
在哪下载文件？

相关阅读