uni-app 生成二维码插件

在 uni-app 中生成二维码，你可以使用 qrcode.js 这个流行的库。以下是一个完整的示例，展示如何在 uni-app 项目中集成 qrcode.js 并生成二维码。

1. 安装 qrcode.js

首先，你需要在项目中安装 qrcode.js。你可以通过 npm 或 yarn 安装：

npm install qrcodejs2 --save
# 或者
yarn add qrcodejs2

2. 在页面中引入 qrcode.js

接下来，在你需要生成二维码的页面中引入 qrcode.js。假设你在 pages/index/index.vue 文件中生成二维码。

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

<script>
import QRCode from 'qrcodejs2';

export default {
  data() {
    return {
      qrCode: null,
    };
  },
  mounted() {
    this.generateQRCode('https://example.com');
  },
  methods: {
    generateQRCode(text) {
      const canvas = this.$refs.qrcodeCanvas;
      if (this.qrCode) {
        this.qrCode.clear(); // 清除之前的二维码
      }
      this.qrCode = new QRCode(canvas, {
        text: text,
        width: 200,
        height: 200,
        colorDark: "#000000",  // 二维码颜色
        colorLight: "#ffffff", // 背景颜色
        correctLevel: QRCode.CorrectLevel.H, // 容错级别
      });
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

注意：由于 uni-app 在小程序环境中不支持直接操作 DOM，因此你需要确保这段代码在 H5 环境下运行，或者在支持 canvas 操作的其他平台上（如 App 端）。

3. 注意事项

• 在小程序中生成二维码，建议使用小程序原生 API，如 wx.createQRCode。
• 在 App 端，如果你遇到 canvas 相关的问题，确保你正确配置了 canvas 的大小和样式。
• 在 H5 端，上述代码应该能够正常工作，但需要注意跨域问题，特别是当你生成包含外部链接的二维码时。

这个示例展示了如何在 uni-app 中使用 qrcode.js 来生成二维码。根据你的具体需求，你可能需要调整一些参数或样式。