微信小程序动态二维码生成组件wx-mini-qrcode

发表时间：2021-3-31

发布人：葵宇科技

浏览次数：113

GitHub地址：https://github.com/flyingsouthwind/wx-mini-qrcode

场景

最近制作一个在微信中为用户生成整张海报的小程序，需要根据用户的店铺ID或商品ID实时动态的生成店铺或商品二维码，试了下社区里已有的二维码组件，感觉不是很适合自己的场景，使用也比较别扭，所以自己折腾了一个。

使用

const qrcode = require('wx-mini-qrcode/src/index');

Page({
    data: {
        qrcode0: ''
    },
    onReady(){
        let text = 'https://m.baidu.com';

        // 输出base64格式
        let qrcode0 = qrcode.outputQRCodeBase64(text, {
            size: 400,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });

        this.setData({
            qrcode0
        })

        // canvas绘制模式一
        qrcode.drawQRCodeToCanvas(text, {
            ctx: 'qrcode1',
            size: 200,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });

        // canvas内绘制模式二
        let qrcode2 = wx.createCanvasContext('qrcode2');
        qrcode.drawQRCodeToCanvas(text, {
            ctx: qrcode2,
            size: 200,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });
        qrcode2.draw();
    }
});

说明

支持两种二维码生成方式，使用canvas和不使用canvas。

由于在小程序中canvas是客户端创建的原生组件，层级最高，限制了使用的灵活性。所以如果可以动态的生成一张二维码图片，使用image插入页面是最好的。使用outputQRCodeBase64 API可以做到，它可以动态的生成base64图片编码。当然，也可以使用drawQRCodeToCanvas API在canvas里实时绘制二维码。

API

1. outputQRCodeBase64: function (text, options)

描述

以base64图片格式输出二维码

参数

text：必须，二维码内容，比如url

options：参数对象

{
	ecc: 'H',               // 可选，容错级别，可选值L、M、Q和H（默认）
	size: 256,              // 可选，二维码尺寸，必须为整数。默认为256
	padding: 0,             // 可选，单侧空白边宽度，默认为0
	color: '#000000',       // 可选，二维码颜色，必须是16进制，默认为'#000000'
	background: '#ffffff'   // 可选，二维码背景色，必须是16进制，默认为'#ffffff'	
}

返回值

二维码图片的base64数据

2. drawQRCodeToCanvas: function (text, options)

描述

绘制二维码到canvas

参数

text：必须，二维码内容，比如url

options：参数对象

{
	x: 0,                   // 可选，二维码左上角点横坐标
	y: 0,                   // 可选，二维码左上角点纵坐标
	ctx: null,              // 必须，canvas绘制上下文或者canvasID
	ecc: 'H',               // 可选，容错级别，可选值L、M、Q和H（默认）
	size: 200,              // 可选，二维码尺寸，必须为整数。默认为200
	padding: 0,             // 可选，单侧空白边宽度，默认为0
	color: '#000000',       // 可选，二维码颜色，必须是16进制，默认为'#000000'
	background: '#ffffff'   // 可选，二维码背景色，必须是16进制，默认为'#ffffff'	
}