Taro小程序微信、支付宝双端实现二维码图片生成

一、安装依赖

这里安装1.5.3以下版本，最新的会报错

ReferenceError: TextEncoder is not defined at new ByteData (byte-data.js:6:1) at buildSingleSegment (segments.js:262:1

npm install qrcode@1.5.3 --save

weapp-qrcode-canvas-2d仅支持微信小程序

npm install weapp-qrcode-canvas-2d --save

仅供参考：我使用的版本如下：

"qrcode": "1.5.3",
"vue": "^3.0.0",
"weapp-qrcode-canvas-2d": "^1.1.6"

二、具体实现

1、封装个QRCode.vue子组件

<template>
  <view class="qrcode-container">
    <!-- 
        1. 用于绘制的隐藏 Canvas
        type="2d" 和 id 是关键
      -->
    <canvas
      id="myCanvas"
      type="2d"
      :style="{
        width: `${width}px`,
        height: `${height}px`,
        position: 'fixed',
        left: '9999px', // 移出屏幕可视区
        top: '-9999px',
      }"
    />
    <!-- 
        2. 最终展示给用户的图片
        show-menu-by-longpress 属性支持长按保存
      -->
    <image
      v-if="qrCodeUrl"
      :src="qrCodeUrl"
      :style="{
        width: `${width}px`,
        height: `${height}px`,
      }"
      mode="aspectFit"
      show-menu-by-longpress
      @click="saveToAlbum"
    />
  </view>
</template>
  
  <script setup>
import { ref, onMounted, nextTick } from "vue";
import Taro from "@tarojs/taro";
import drawQrcode from "weapp-qrcode-canvas-2d";
import QRCode from 'qrcode';

const props = defineProps({
  // 要生成二维码的文本或链接
  text: {
    type: String,
    required: true,
  },
  width: {
    type: Number,
    default: 200,
  },
  height: {
    type: Number,
    default: 200,
  },
});

const qrCodeUrl = ref(""); // 存储二维码的临时图片路径

// 生成二维码的核心函数-weapp
const generateWxQRCode = () => {
  const query = Taro.createSelectorQuery();
  // 获取 Canvas 节点
  query
    .select("#myCanvas")
    .fields({ node: true, size: true })
    .exec((res) => {
      if (!res || !res[0]) {
        console.error("Canvas 节点获取失败");
        return;
      }

      const canvas = res[0].node;
      // 调用库的方法在 Canvas 上绘制二维码
      drawQrcode({
        canvas,
        canvasId: "myCanvas",
        width: props.width,
        height: props.height,
        text: props.text,
        background: "#ffffff", // 背景色，可自定义
        foreground: "#000000", // 前景色（二维码颜色）
      });

      // 将 Canvas 内容转换为临时图片路径，便于展示和保存
      setTimeout(() => {
        Taro.canvasToTempFilePath({
          canvasId: "myCanvas",
          canvas,
          x: 0,
          y: 0,
          width: props.width,
          height: props.height,
          destWidth: props.width * 2, // 输出图片宽度，*2可使图片更清晰
          destHeight: props.height * 2, // 输出图片高度
          success(res) {
            qrCodeUrl.value = res.tempFilePath;
          },
          fail(err) {
            console.error("Canvas 转图片失败", err);
          },
        });
      }, 100); // 延迟确保二维码绘制完成
    });
};
// Base64编码函数（小程序兼容）
const base64Encode = (str) => {
  if (typeof btoa !== 'undefined') {
    return btoa(str); // 浏览器环境
  } else {
    // 小程序环境使用 Buffer 或 Taro API
    try {
      if (typeof Buffer !== 'undefined') {
        return Buffer.from(str).toString('base64');
      } else {
        // 使用 Taro 的 base64 编码
        return Taro.base64.encode(str);
      }
    } catch (error) {
      console.error('Base64编码失败:', error);
      return '';
    }
  }
};

// 生成二维码的核心函数-aliapy
const createAlipayQrCode = async () => {
  try {
    // 生成 SVG 格式的二维码
    const svgString = await QRCode.toString(props.text, { type: 'svg' });
    
    // 使用兼容的Base64编码
    const base64SVG = base64Encode(svgString);
    const imgSrc = `data:image/svg+xml;base64,${base64SVG}`;
    
    qrCodeUrl.value = imgSrc;
  } catch (error) {
    console.error('SVG二维码生成失败:', error);
  }
};
const generateQRCode = () => {
  // 根据环境选择二维码生成方法
  const env = Taro.getEnv();
  if (env === Taro.ENV_TYPE.WEAPP) {
    generateWxQRCode();
  } else if (env === Taro.ENV_TYPE.ALIPAY) {
    setTimeout(() => {
      createAlipayQrCode(); 
    }, 100);
  }
}
// 组件挂载时生成二维码
onMounted(() => {
  nextTick(() => {
    generateQRCode();
  });
});
</script>
  
<style lang="scss">
.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

2、在父组件你需要的地方使用即可

 <QRcode :text="qrCodeUrl" :size="200"></QRcode>

本来是想问ai的结果豆包只会编造不存在的插件和api ，麻了。。。。。

end！

希望记录的问题能帮助到你~