用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

flyingsouthwind 2017-12-30 12:28

GitHub地址:https://github.com/flyingsouthwind/wx-mini-qrcode场景最近制作一个在微信中为用户生成整张海报的小程序,需要根据用户的店铺ID或商品ID实时动态的生成店铺或商品二维码,试了下社区里已有的二维码组 ...

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'	
    }
    
返回值

无返回值

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏

相关阅读