Skip to content

在小程序中生成二维码

  1. 下载二维码生插件

点击下载生成二维码插件

  1. wxml中配置画布:
html
<canvas
  style="width: 400rpx; height: 400rpx;margin:0 auto;display:block;background:#fff;"
  canvas-id="group-code"
  id="group-code"
></canvas>
  1. js中引入插件,生成二维码
js
const drawQrcode = require('./libs/weapp.qrcode.min.js');
const rpx2px = function (rpx) {
  return (wx.getSystemInfoSync().windowWidth / 750) * rpx;
};
Component({
  options: {
    styleIsolation: 'shared',
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false,
      observer(value) {
        if (value && this.data.code) {
          if (value) {
            // 生成二维码
            drawQrcode({
              _this: this,
              canvasId: 'group-code',
              text: this.data.code,
              width: rpx2px(400),
              height: rpx2px(400),
            });
          }
        }
      },
    },
    code: {
      type: Object,
      value: null,
    },
  },
});