一、前言
最近在做小程序的需求中碰到需要可以支持用户自定义信息再生成二维码的需求,之前在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 } |
iphone手机不显示二维码是什么原因
请问怎样四个边都加上padding的效果呢,加x、y轴起始位置,只有两个边有白边效果
text 传值为数字扫码后为空是什么原因?
为啥报错
二维码信息过长,然后报错,说 code length overflow. (1748>1056); 这个问题解决了嘛?
有没有遇到二维码信息过长,然后报错,说 code length overflow. (1748>1056);
我只想显示在canvas上,但是在微信开发工具中显示正常,真机测试(安卓机)时完全不显示,请问有解决办法吗
你好,请问下callback在什么时候触发,会在不完整的情况下触发么
你好,我生成的二维码一开始不显示,切换页面后就显示出来了,这是啥问题
赞一个