微信小程序动态二维码生成组件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：参数对象

二维码图片的base64数据

绘制二维码到can
text：必须二维码内容比如url