欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-16 21:08:16
...

文件地址
主要用到其中的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);
})

最后的效果图微信小程序生成自定义二维码

相关标签: 微信小程序