推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序动态二维码生成组件wx-mini-qrcode
发布时间:2020-11-04
场景
最近制作一个在微信中为用户生成整张海报的小程序，需要根据用户的店铺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' }- 上一篇：微信小程序播放缓存的音频文件
- 下一篇：微信小程序短文字居中，长文字跑马灯效果
