微信小程序生成自定义二维码

文件地址
主要用到其中的weapp.qrcode.esm.js
可以直接拖到目录中

页面中引入

import drawQrcode from '../../utils/weapp.qrcode.esm'

使用方式
先在模板中使用canvas标签

 <canvas  class="twoDCode" style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>

方法中调用

      drawQrcode({
        width: 200,
        height: 200,
        canvasId: 'myQrcode',
        // ctx: wx.createCanvasContext('myQrcode'),
        text: this.codeText || '二维码信息丢失',
        foreground: '#1D4E89',
        image: {
          imageResource: '../../static/images/logo.png',
          dx: 70,
          dy: 70,
          dWidth: 60,
          dHeight: 60
        }
      })

要注意的是 canvas中的宽高，要和方法里的宽高保持一致。
text 就是你需要生成的二维码包含的信息，这里我是指向data中的数据。
image是可以里的图片是 生成在二维码中的图片，当然也有网络加载的方式，看到一个很好例子

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);
})

最后的效果图