飞书小程序生成二维码

ttml代码 

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

ts如下

引入插件 import QRCode from 'qrcode-generator';

不使用qrcode的原因是 微信小程序是通过找到dom元素的node节点插入的，但飞书小程序没有node节点，所以无法使用

以下是完整方法，主要是用飞书小程序canvas方法实现

const generateQRCode = () => {

  console.log(666666);

  let text = JSON.stringify(tempData.value);

  if (typeof tt !== 'undefined' && typeof tt.createCanvasContext === 'function') {

    // 获取 canvas 上下文

    const ctx = tt.createCanvasContext('canvas');

    // 设置 canvas 的宽度和高度

    const canvasWidth = 200;

    const canvasHeight = 200;

    // 生成二维码数据

    const qr = QRCode(0, 'L');

    qr.addData(text);

    qr.make();

    // 获取二维码的模块数据

    const moduleCount = qr.getModuleCount();

    const cellSize = canvasWidth / moduleCount;

    // 绘制二维码

    for (let row = 0; row < moduleCount; row++) {

      for (let col = 0; col < moduleCount; col++) {

        ctx.setFillStyle(qr.isDark(row, col) ? '#000000' : '#ffffff');

        ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);

      }

    }

    // 渲染 canvas

    ctx.draw();

    console.log('QR Code generated and drawn to canvas');

  } else {

    console.log('tt 对象未定义或方法不可用');

  }

  //console.log(canvasContext, 'canvasContext');

};