小程序模板网

微信小程序动态二维码生成组件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)

ase64图片格式输出二维码,二维码内容,比如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)



绘制二维码到can
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'	
    }


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24180.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询