uni-app 二维码生成器分享

当然，下面是一个使用uni-app实现二维码生成器的示例代码。我们将利用qrcode这个npm包来生成二维码。

1. 安装依赖

首先，在你的uni-app项目中安装qrcode包。你可以通过以下命令来安装：

npm install qrcode

2. 创建页面

接下来，我们创建一个页面来展示二维码生成器。例如，我们可以创建一个名为qrcode的页面。

qrcode.vue

<template>
  <view class="container">
    <input type="text" v-model="text" placeholder="输入生成二维码的内容" />
    <button @click="generateQRCode">生成二维码</button>
    <canvas canvas-id="qrcodeCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

<script>
import QRCode from 'qrcode';

export default {
  data() {
    return {
      text: ''
    };
  },
  methods: {
    generateQRCode() {
      QRCode.toCanvas(this.$refs.qrcodeCanvas, this.text, (error) => {
        if (error) console.error(error);
        console.log('二维码生成成功!');
      });
    }
  },
  mounted() {
    // 确保canvas元素存在
    this.$nextTick(() => {
      this.$refs.qrcodeCanvas = this.$mp.page.selectComponent('#qrcodeCanvas');
    });
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
input {
  margin-bottom: 20px;
  padding: 10px;
  font-size: 16px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

3. 配置页面路径

在pages.json文件中，添加你新创建的页面的路径配置：

{
  "pages": [
    {
      "path": "pages/qrcode/qrcode",
      "style": {
        "navigationBarTitleText": "二维码生成器"
      }
    }
    // 其他页面配置...
  ]
}

4. 运行项目

完成上述步骤后，你可以运行你的uni-app项目，并在浏览器中访问qrcode页面。在输入框中输入你想要生成二维码的内容，然后点击“生成二维码”按钮，即可在canvas中看到生成的二维码。

这个示例代码展示了如何使用uni-app和qrcode包来生成二维码。你可以根据需求进一步扩展和优化这个示例。