小程序开发 生成二维码qr-container

小程序开发中生成二维码的功能可以通过使用wx.createCanvasContext方法创建一个Canvas对象，然后使用Canvas的toDataURL方法将Canvas转换为图片的Base64格式数据，最后可以使用Image组件显示二维码图片。

下面是一个示例代码：

1. 在.wxml文件中添加一个Canvas元素和一个Image元素：

<canvas canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
<image src="{{qrcodeImageUrl}}" mode="aspectFit"></image>

2. 在.js文件中编写生成二维码的逻辑：

Page({
  data: {
    qrcodeImageUrl: '',
  },
  onLoad: function () {
    this.generateQRCode('https://www.example.com'); // 传入需要生成二维码的链接地址
  },
  generateQRCode: function (url) {
    const context = wx.createCanvasContext('qrcode');

    // 调用第三方库生成二维码
    // 这里以wxqrcode库为例，需要在项目中引入对应的库文件
    const QRCode = require('wxqrcode'); 
    const qrcodeSize = 200;
    const qrcodeData = QRCode.createQrCodeImgSync(url, {
      size: qrcodeSize,
    });

    context.clearRect(0, 0, qrcodeSize, qrcodeSize);
    context.drawImage(qrcodeData, 0, 0, qrcodeSize, qrcodeSize);

    context.draw(false, () => {
      wx.canvasToTempFilePath({
        canvasId: 'qrcode',
        success: (res) => {
          this.setData({
            qrcodeImageUrl: res.tempFilePath,
          });
        },
      });
    });
  },
});

这样就可以在小程序中生成二维码并显示了。请注意，在上述示例代码中，使用了一个名为wxqrcode的第三方库来生成二维码图片，需要在小程序项目中引入该库文件。