微信小程序-二维码组件

 

<canvas 
  class='canvas' 
  canvas-id='canvas' 
  style="width:{{qrcodeWidth}}px; height:{{qrcodeWidth}}px;margin:{{marginTB}}rpx auto;"
></canvas>

 

{
  "component": true
}

 

const QRCode = require('../../utils/weapp-qrcode.js')
import rpx2px from '../../utils/rpx2px.js'
let qrcode;
let defaultWidth = 300; //二维码默认宽度

Component({
    properties: {
        //二维码码数
        code: {
            type: String,
            value: '' 
        },
        //二维码默认宽度
        width: {
            type: Number,
            value: defaultWidth 
        },
        //二维码默认margin上下边距
        marginTB: {
            type: Number,
            value: 0
        }
    },
    data: {
        qrcodeWidth: rpx2px(defaultWidth), 
    },
    ready: function() {
        this.setData({qrcodeWidth: rpx2px(this.properties.width)})
        qrcode = new QRCode('canvas', {
            usingIn: this, // usingIn 如果放到组件里使用需要加这个参数
            text: this.properties.code,
            image: '',
            width: rpx2px(this.properties.width),
            height: rpx2px(this.properties.width),
            colorDark: "#010101",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
        });
    },
    methods: {}
})

 

源码地址：https://github.com/tomfriwel/weapp-qrcode