最近在uniapp开发成微信小程序的过程中，遇到了需要将数据库返回的字符串转为二维码给用户去扫描，这个需求和功能往往在商城和点餐系统中出现，在实现这个功能的过程中遇到了很多问题，在研究过后今天来记录一下

插件：qrcode

下载与引入：

 npm i qrcode
 import QrCode from 'qrcode'

使用场景：一个订单会有多个取餐码，对应就会有多个二维码

展现形式：点取餐码弹窗显示对应二维码

个人整体思路：最开始想着把后端返回的数组对象对应元素都给转为canvas去渲染，尝试过后发现会有实现难度和报错，就想到了换成image的url去展示二维码

问题：报错You need to specify a canvas element

在微信小程序中使用 qrcode 库生成二维码时，如果遇到 "You need to specify a canvas element" 错误，通常是因为没有正确指定 canvas 元素

AI提供的解决方案为获取dom或实例--$refs或document.getElementById，但在uniapp中这两种方案不适用

在研究qrcode库源码时，发现有大佬也遇到过这个报错并解决

完整代码：

   <image
        class="qrcode"
        :src="qrcodeDataUrl"
        style="width: 200px; height: 200px"
   ></image> 


generateQRCode() {
    const href = "Z1ARIwsbAAI="; // 要生成二维码的文本
    const opts = {
        margin: 1,
        width: 240,
        height: 240,
        errorCorrectionLevel: "H",
    };

    const ocanvas = uni.createOffscreenCanvas({ type: "2d" });

    QRCode.toDataURL(ocanvas, href, opts)
        .then((url) => {
          this.qrcodeDataUrl = url;
      })
        .catch((err) => {
          console.error(err);
      });
 },