一、前言
最近在做小程序的需求中碰到需要可以支持用户自定义信息再生成二维码的需求,之前在PC端对应的功能我们是利用jquery-qrcode.js来实现的,但是在小程序里不支持操作dom,所以这个插件就用不了啦。然后在github上找到了weapp-qrcode这个插件,只要我们注意避免一些坑,利用好它的各种属性,功能还是挺强大的,基本画二维码的各种需求都能照顾到。
二、使用
-
在 github 上下载工程,主要用到的文件是 /dist/weapp-qrcode.js 文件。
github地址:weapp-qrcode
-
在 wxml 文件中,创建绘制的 canvas,并定义好 width, height, canvasId
<canvas style="width: 220px; height: 220px;background:pink;" canvas-id="myQrcode"></canvas>
-
引入文件,这里直接将文件copy到了util文件夹下,再在需要用到的文件里引用。
let drawQrcode = require("../../utils/weapp.qrcode.min.js");
-
使用 drawQrcode() 绘制二维码。
注意:在 调用 drawQrcode() 方法之前,一定要确保可以获取到 canvas context 。
drawQrcode({ width: 200, height: 200, canvasId: 'myQrcode', // ctx: wx.createCanvasContext('myQrcode'), text: 'https://github.com/yingye', // v1.0.0+版本支持在二维码上绘制图片 // ctx: wx.createCanvasContext('myQrcode'), text: 'https://github.com/yingye', // v1.0.0+版本支持在二维码上绘制图片 image: { imageResource: '../../image/icon.png', dx: 70, dy: 70, dWidth: 60, dHeight: 60 } })
三、雷坑盘点
上面介绍了 weapp-qrcode 的基本用法,使用上面的方法已经可以成功画出一个二维码图片了, 但是它里面还有许多坑需要注意避免。
- 在二维码中间绘制logo图片:如果使用的是网络地址的图片, 直接设置 options.image 的值logo会绘制失败,所以需要先使用 wx.getImageInfo 去获取图片信息;
- 利用 x,y 可以画出有 padding 感觉的二维码图片 (需要给canvas设置背景颜色);
- 直接在callback中调用 wx.canvasToTempFilePath 在部分安卓机上转出来的二维码图片异常(不完整), 需要自行设置计时器;
- 在组件中使用 drawQrcode() 需要传_this。
- canvas 绘图的尺寸单位是px, 但是小程序中我们一般使用 rpx 作为尺寸单位, 所以如果 canvas 是使用 rpx 来设置它的大小, 需要注意 rpx 与 px 之间的转换。
下面是一个相对比较复杂一点的绘制二维码的例子:
let that = this;
// 直接设置 options.image 的值,在手机上logo会绘制失败
new Promise((resolve, reject) => {
// 绘制网络地址的logo时需要先使用 wx.getImageInfo 获取到图片信息
// 注意网络图片需先配置download域名 wx.getImageInfo 才能生效。
wx.getImageInfo({
src: 'https://.../qrcode.jpg',
success: (res) => {
resolve(res.path);
},
fail: (e) => {
// 获取logo失败也不应该影响正确生成二维码图片
// 这里可以给出失败提示
resolve();
}
})
}).then((path) => {
let options = {
width: 180,
height: 180,
x: 10,
y: 10,
canvasId: 'myQrcode',
text: 'https://www.baidu.com',
callback: (e) => {
// 使用 setTimeout, 避免部分安卓机转出来的二维码图片不完整
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'myQrcode',
x: 0,
y: 0,
width: 200,
height: 200,
success: (e) => {
that.setData({ qrcodeImg: e.tempFilePath });
}
})
}, 0);
}
}
if(!!path){
options.image = {
imageResource: path,
dx: 70,
dy: 70,
dWidth: 60,
dHeight: 60
}
}
drawQrcode(options);
})
API
drawQrcode([options])
options{ Type: Object }
参数 | 说明 | 示例 |
---|---|---|
width | 必须,二维码宽度,与canvas的width保持一致 | 200 |
height | 必须,二维码高度,与canvas的height保持一致 | 200 |
canvasId | 非必须,绘制的canvasId | ‘myQrcode’ |
ctx | 非必须,绘图上下文,可通过 wx.createCanvasContext(‘canvasId’) 获取,v1.0.0+版本支持 | ‘wx.createCanvasContext(‘canvasId’)’ |
text | 必须,二维码内容 | ‘https://github.com/yingye’ |
typeNumber | 非必须,二维码的计算模式,默认值-1 | 8 |
correctLevel | 非必须,二维码纠错级别,默认值为高级,取值:{ L: 1, M: 0, Q: 3, H: 2 }} | 1 |
background | 非必须,二维码背景颜色,默认值白色 | ‘#ffffff’ |
foreground | 非必须,二维码前景色,默认值黑色 | ‘#000000’ |
_this | 非必须,若在组件中使用,需要传入,v0.7.0+版本支持 | this |
callback | 非必须,绘制完成后的回调函数,v0.8.0+版本支持。安卓手机兼容性问题,可通过自行设置计时器来解决,更多可以参考 issue #18 | function (e) { console.log(‘e’, e) } |
x | 非必须,二维码绘制的 x 轴起始位置,默认值0,v1.0.0+版本支持 | 100 |
y | 非必须,二维码绘制的 y 轴起始位置,默认值0,v1.0.0+版本支持 | 100 |
image | 非必须,在 canvas 上绘制图片,层级高于二维码,v1.0.0+版本支持,更多可参考drawImage | { imageResource: ‘’, dx: 0, dy: 0, dWidth: 100, dHeight: 100 } |
请问生成的二维码被压缩了显示不全怎么解决啊?切换到别的软件然后再切回小程序二维码页面又显示正常了
问一下,你们是如何做到一个账号上能够演示多个小程序的,大神求思路
生成的二维码 乱码是什么原因?
您好,部分安卓手机上二维码会这样是什么情况呢
这个插件怎么去绘制白边啊,绘制出来的二维码都没白边。。。
如果生成二维码的字符串很长怎么办,现在这个就提示已经超了
感谢!!!!!!!!!!
为什么我用的本地图片logo还是出不来
非常感谢! 最近的开发,在小米五真机上,保存的二维码一直识别不了。
排查了布局、第三方库的因素,最后断定是wx.canvasToTempFilePath出了问题,可以保存,二维码也不会变形,就是一直识别不了。
刚好上来社区看到这篇文章。真的是帮了大忙!!!!
不错的经验分享,暂时没用到,但是可以先mark一下,以后估计会用。可以少走弯路