更新记录

1.0.1（2023-03-29） 下载此版本

uniapp绘制二维码图案

1.0.0（2023-02-02） 下载此版本

qr.drawCanvas();

平台兼容性

  <canvas canvas-id="qrcode" :style="{width: size * 2 +'rpx', height: size * 2 + 'rpx'}"></canvas>

import UQRCode from "./uqrcodejs";
var qr = new UQRCode();
export default {
  name: "",
  props: {
    size: {
        type: Number,
        default: 200
    },
  },
  components: {},
  data() {
    return {};
  },
  methods: {
    createCode(va) {
      // 获取uQRCode实例
      var qr = new UQRCode();
      // 设置二维码内容
      qr.data = va;
      // 设置二维码大小，必须与canvas设置的宽高一致
      qr.size = this.size;
      // 调用制作二维码方法
      qr.make();
      // 获取canvas上下文
      var canvasContext = uni.createCanvasContext("qrcode", this); // 如果是组件，this必须传入
      // 设置uQRCode实例的canvas上下文
      qr.canvasContext = canvasContext;
      // 调用绘制方法将二维码图案绘制到canvas上
      qr.drawCanvas();
    },
  },
  mounted() {
    // this.createCode();
  },
  watch: {},
  computed: {},
  filters: {},
};

组件中使用

<uqcode ref="uqcode" />

import uqcode from "@/components/uqrcode/uqrcode.vue";

this.$refs.uqcode.createCode(this.code);