uni-app如何使用uQRCode插件生成自定义二维码

为什么选择uQRCode

uQRCode 生成方式简单，可扩展性高，适用所有前端应用和Node.js服务端，可运行到所有支持canvas的平台。

支持自定义二维码渲染规则，可通过uQRCode API得到矩阵信息后，自行实现canvas或view+css渲染二维码，如随机颜色、圆点、方块、块与块之间的间距等。

如何使用uQRCode

首先我们先到uni-app插件市场中下载此插件，插件下载地址

直接导入即可。
如何在自己代码中使用：
因为我们是直接使用的是uni_modules版本的，所以我们就不必再import导入自己的项目中。
我们可以直接使用组件。

<u-qrcode ref="qr" canvas-id="qr" :value="text" :size="size" @click="remake" @complete="complete($event)"></u-qrcode>

对于一些其他的配置项我们在options对象上写。
可以查看文档：

对于方法的使用：

下面我写了两个例子：
常规二维码（生成）：

<template>
  <view class="page">
    <view class="qrcode-box">
      <view class="qrcode">
        <u-qrcode ref="qr" canvas-id="qr" :value="text" :size="size" @click="remake"
          @complete="complete($event)"></u-qrcode>
      </view>
      <text class="msg">这是一个常规的二维码</text>
      <button class="save" type="primary" size="mini" @click="save">保存</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: 'uQRCode',
        size: 200
      };
    },
    methods: {
      complete(e) {
        if (e.success) {
          console.log('生成成功');
        } else {
          console.log('生成失败');
        }
      },
      remake() {
        const ref = this.$refs['qr'];
        ref.remake();
      },
      save() {
        uni.showLoading({
          title: '保存中',
          mask: true
        });
        const ref = this.$refs['qr'];
        ref.save({
          success: res => {
            uni.hideLoading();
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            });
          },
          fail: err => {
            uni.showToast({
              icon: 'none',
              title: JSON.stringify(err)
            });
          }
        });

      }
    }
  };
</script>

<style>
  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .qrcode-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 30px;
  }

  .qrcode {
    padding: 16px;
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
  }

  .msg {
    margin-top: 15px;
    font-size: 14px;
    color: #9a9b9c;
  }

  .save {
    margin-top: 10px;
  }
</style>

带logo二维码（生成）：

<template>
  <view class="page">
    <view class="qrcode-box">
      <view class="qrcode">
        <u-qrcode ref="code" canvas-id="code" :value="text" :size="size" :options="{
          foreground: {
            image: {
              src: '/static/logo.png',
              width: 0.25,
              height: 0.25,
              align: ['center', 'center'],
              anchor: [0, 0]
            }
          }
        }" @click="remake" @complete="complete($event)"></u-qrcode>
      </view>
      <text class="msg">这是一个带logo的二维码，logo处于二维码中间</text>
      <button class="save" type="primary" size="mini" @click="save('code')">保存</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        text: 'uQRCode',
        size: 200
      };
    },
    methods: {
      complete(e) {
        if (e.success) {
          console.log('生成成功');
        } else {
          console.log('生成失败');
        }
      },
      remake() {
        const ref = this.$refs['code'];
        ref.remake();
      },
      save() {
        uni.showLoading({
          title: '保存中',
          mask: true
        });
        const ref = this.$refs['code'];
        ref.save({
          success: res => {
            uni.hideLoading();
            uni.showToast({
              icon: 'success',
              title: '保存成功'
            });
          },
          fail: err => {
            uni.showToast({
              icon: 'none',
              title: JSON.stringify(err)
            });
          }
        });

      }
    }
  };
</script>

<style>
  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .qrcode-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    padding: 0 30px;
  }

  .qrcode {
    padding: 16px;
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
  }

  .msg {
    margin-top: 15px;
    font-size: 14px;
    color: #9a9b9c;
  }

  .save {
    margin-top: 10px;
  }
</style>