uniapp （vue3）生成二维码

特创数字科技2023-11-28 23:18

在uni-app中生成二维码，我们可以使用第三方库qrcode.js。以下是一个简单的示例：

首先，我们需要安装qrcode.js库，可以通过npm进行安装：

bash 复制代码

npm install qrcode

然后，在你的Vue组件中引入并使用这个库：

javascript 复制代码

<template>
  <view>
    <image :src="qrCodeUrl" mode="aspectFit"></image>
  </view>
</template>

<script>
import QRCode from 'qrcode';

export default {
  data() {
    return {
      qrCodeUrl: ''
    };
  },
  methods: {
    generateQRCode(text) {
      QRCode.toDataURL(text, (err, url) => {
        if (err) {
          console.error(err);
          return;
        }
        this.qrCodeUrl = url;
      });
    }
  },
  mounted() {
    this.generateQRCode('https://www.example.com');
  }
};
</script>

在这个示例中，我们创建了一个名为generateQRCode的方法，该方法接受一个文本参数，并使用qrcode.js库将其转换为二维码。然后，我们将生成的二维码URL存储在data对象的qrCodeUrl属性中。

在模板中，我们使用标签显示二维码。我们将qrCodeUrl绑定到src属性，以便显示生成的二维码。

最后，在mounted生命周期钩子中，我们调用generateQRCode方法生成一个示例二维码。