一、前言

最近在做小程序的需求中碰到需要可以支持用户自定义信息再生成二维码的需求，之前在PC端对应的功能我们是利用jquery-qrcode.js来实现的，但是在小程序里不支持操作dom，所以这个插件就用不了啦。然后在github上找到了weapp-qrcode这个插件，只要我们注意避免一些坑，利用好它的各种属性，功能还是挺强大的，基本画二维码的各种需求都能照顾到。

二、使用

1. 在 github 上下载工程，主要用到的文件是 /dist/weapp-qrcode.js 文件。

   github地址：weapp-qrcode

2. 在 wxml 文件中，创建绘制的 canvas，并定义好 width, height, canvasId

   <canvas style="width: 220px; height: 220px;background:pink;" canvas-id="myQrcode"></canvas>
   

3. 引入文件，这里直接将文件copy到了util文件夹下，再在需要用到的文件里引用。

   let drawQrcode = require("../../utils/weapp.qrcode.min.js");
   

4. 使用 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 的基本用法，使用上面的方法已经可以成功画出一个二维码图片了， 但是它里面还有许多坑需要注意避免。

1. 在二维码中间绘制logo图片：如果使用的是网络地址的图片, 直接设置 options.image 的值logo会绘制失败，所以需要先使用 wx.getImageInfo 去获取图片信息；
2. 利用 x,y 可以画出有 padding 感觉的二维码图片 (需要给canvas设置背景颜色)；
3. 直接在callback中调用 wx.canvasToTempFilePath 在部分安卓机上转出来的二维码图片异常(不完整), 需要自行设置计时器；
4. 在组件中使用 drawQrcode() 需要传_this。
5. 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 }