uni-app 全端二维码生成插件 uQRCode 支持nvue及nodejs服务端 - 3snn app内生成二维码

在uni-app项目中，使用uQRCode插件可以方便地在全端（包括nvue和Node.js服务端）生成二维码。下面是一个具体的代码案例，展示如何在uni-app的HBuilderX开发环境中，使用uQRCode插件在app内生成二维码。

1. 安装uQRCode插件

首先，确保你的uni-app项目已经初始化，并在项目的根目录下运行以下命令安装uQRCode插件：

npm install uqrcode --save

2. 在页面中引入并使用uQRCode

接下来，在需要生成二维码的页面中引入uQRCode，并编写生成二维码的逻辑。

示例代码（Vue页面）

<template>
  <view>
    <button @click="generateQRCode">生成二维码</button>
    <image v-if="qrCodeSrc" :src="qrCodeSrc" mode="widthFix"></image>
  </view>
</template>

<script>
import uQRCode from 'uqrcode';

export default {
  data() {
    return {
      qrCodeSrc: ''
    };
  },
  methods: {
    generateQRCode() {
      const text = 'https://example.com'; // 替换为你想生成二维码的内容
      const options = {
        errorCorrectionLevel: 'H', // 容错级别
        type: 'image/png', // 生成二维码的图片类型
        width: 256, // 二维码宽度
        margin: 4, // 边框宽度
      };

      uQRCode.toCanvas(this.$refs.qrcodeCanvas, text, options, (error) => {
        if (error) console.error(error)
        else {
          this.qrCodeSrc = this.$refs.qrcodeCanvas.toDataURL();
        }
      });
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
button {
  margin-top: 20px;
}
image {
  width: 256px; /* 与生成的二维码宽度一致 */
  margin-top: 20px;
}
</style>

注意：

• 在上面的代码中，我们使用了uQRCode.toCanvas方法将二维码绘制到canvas上，然后将其转换为DataURL用于在<image>标签中显示。
• 由于直接在Vue页面中使用canvas可能会遇到一些兼容性问题，特别是nvue页面，如果需要在nvue中使用，可以考虑使用其他方式（如使用canvas的nvue实现，或者将二维码生成逻辑放在服务端）。
• 对于Node.js服务端，你可以使用uQRCode.toFile方法将二维码生成到文件中。

3. 运行项目

确保你的uni-app项目配置正确，然后在HBuilderX中运行项目，点击按钮即可在app内生成并显示二维码。

这个示例展示了如何在uni-app中使用uQRCode插件生成二维码，你可以根据实际需求调整生成二维码的内容和样式。