uniapp 如何生成和扫描条形码

在uniapp中如何实现条形码的生成和扫描功能？需要用到哪些插件或组件？有没有简单易用的示例代码可以参考？生成的条形码是否可以自定义样式？扫描功能是否支持识别本地相册中的条形码图片？

2 回复

在uni-app中生成条形码可使用uQRCode插件，扫描条形码可使用uni.scanCode API。需在manifest.json中配置扫码权限。


在 UniApp 中生成和扫描条形码可以通过以下方法实现，结合第三方插件或原生 API 来完成。

生成条形码

使用 uQRCode 插件（支持条形码和二维码）或 jsbarcode 库生成条形码。以下是基于 uQRCode 的示例：

  1. 安装插件：通过 npm 安装或下载 uqrcode.js 文件到项目中。
  2. 代码示例：
    <template>
  <view>
    <canvas canvas-id="barcodeCanvas"></canvas>
  </view>
</template>

<script>
import uQRCode from '@/js_sdk/uqrcode/uqrcode.js'; // 调整路径

export default {
  data() {
    return {
      text: '123456789012' // 条形码内容
    };
  },
  onReady() {
    this.makeBarcode();
  },
  methods: {
    makeBarcode() {
      uQRCode.make({
        canvasId: 'barcodeCanvas',
        componentInstance: this,
        text: this.text,
        size: 200,
        type: 'bar', // 指定为条形码
        success: () => {
          console.log('条形码生成成功');
        },
        fail: (error) => {
          console.error('生成失败:', error);
        }
      });
    }
  }
};
</script>
    • 说明：type: 'bar' 设置为条形码模式，确保插件支持条形码生成（部分版本可能需要配置）。

扫描条形码

使用 UniApp 的 uni.scanCode API 调用设备摄像头扫描条形码。

  1. 代码示例：
    <template>
  <view>
    <button @tap="scanBarcode">扫描条形码</button>
  </view>
</template>

<script>
export default {
  methods: {
    scanBarcode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫描结果:', res.result);
          uni.showToast({
            title: `内容: ${res.result}`,
            icon: 'none'
          });
        },
        fail: (err) => {
          console.error('扫描失败:', err);
        }
      });
    }
  }
};
</script>
    • 说明：uni.scanCode 自动识别条形码和二维码，返回结果在 res.result 中。

注意事项

  • 平台兼容性：uni.scanCode 在所有平台支持，但生成条形码的插件需测试兼容性（如 H5、App、小程序）。
  • 权限：扫描条形码需摄像头权限，在 App 端可能需配置原生模块。
  • 插件选择：如果 uQRCode 不支持条形码，可改用 jsbarcode（需自行集成到 Canvas）。

以上方法简洁高效，适用于大部分场景。如有复杂需求（如自定义样式），可查阅插件文档或扩展原生功能。

回到顶部