小程序开发
uniapp多端开发
内置组件
nvue组件

条形码/二维码组件

# Barcode 组件

Barcode 组件是专用于 App 端 nvue 页面中的扫码组件，提供嵌入到界面上的扫码功能，适用于需要在界面内展示扫码框的场景。不同于 uni.scanCode API 这种全屏扫码模式，Barcode 组件能够自定义扫码框、扫码条的颜色等属性。

# 1. 什么是 `Barcode` 组件？

Barcode 组件用于 App 端的 nvue 页面中进行条码和二维码的扫描操作。它允许将扫码功能嵌入到界面的一部分，通过指定扫码框、扫码条颜色等属性，定制扫码框的外观。Barcode 支持多种条码类型，并允许通过配置扫描的条码类型来优化识别速度和性能。

使用场景

应用内嵌扫码：在 App 中嵌入扫码功能，允许用户通过界面内的扫码框进行扫描操作。
条码与二维码识别：支持多种条码和二维码类型的扫描，例如 QR 码、EAN13、Code128 等。
自定义扫码样式：通过自定义扫码框的颜色和扫码条的颜色，满足不同设计风格的需求。

# 2. `Barcode` 组件的常用属性

Barcode 组件提供了多种属性，用于控制扫码框的显示效果、条码类型过滤器等。以下是常用属性的详细说明及使用示例：

属性	类型	默认值	说明
`autostart`	Boolean	false	是否自动开始扫码
`background`	String		条码识别控件背景颜色，支持 CSS 颜色规范
`frameColor`	String		扫码框的颜色，支持 CSS 颜色规范
`scanbarColor`	String		扫码条的颜色，支持 CSS 颜色规范
`filters`	Array[Number]	[0,1,2]	条码类型过滤器，默认支持 QR、EAN13、EAN8 类型

# 2.1 设置扫码框颜色

说明：通过 frameColor 设置扫码框的颜色，扫码框颜色可以自定义以匹配应用的风格。
类型：String
默认值：无

<template>
  <!-- 设置扫码框颜色 -->
  <barcode 
    id="barcode1" 
    class="barcode" 
    autostart="true" 
    frameColor="#FF0000" 
    scanbarColor="#00FF00" 
    @marked="onMarked" 
    @error="onError"
  />
</template>

<script>
export default {
  setup() {
    const onMarked = (e) => {
      console.log('扫码成功:', e.detail);
    };

    const onError = (e) => {
      console.error('扫码失败:', e.detail);
    };

    return { onMarked, onError };
  }
}
</script>

<style>
.barcode {
  width: 750rpx;
  height: 700rpx;
  background-color: #808080;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 2.2 条码类型过滤器

说明：通过 filters 属性设置扫码支持的条码类型。支持多种条码类型，设置支持的类型越多，识别速度可能会有所降低。
类型：Array[Number]
默认值：[0, 1, 2]（支持 QR、EAN13、EAN8）

<template>
  <!-- 设置条码类型过滤器，仅支持 QR 码与 EAN13 -->
  <barcode 
    id="barcode2" 
    class="barcode" 
    :filters="[0, 1]" 
    @marked="onMarked" 
    @error="onError"
  />
</template>

<script>
export default {
  setup() {
    const onMarked = (e) => {
      console.log('识别成功的条码:', e.detail.message);
    };

    const onError = (e) => {
      console.error('识别失败:', e.detail.message);
    };

    return { onMarked, onError };
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 2.3 控制扫码行为

Barcode 组件提供了多个方法来控制扫码行为，包括 start 开始扫码、cancel 取消扫码和 setFlash 控制闪光灯。

开始扫码：通过 start 方法手动启动扫码，并可以设置是否保存扫码成功时的截图等选项。

<template>
  <view>
    <!-- 扫码框 -->
    <barcode 
      ref="barcode" 
      class="barcode" 
      @marked="onMarked" 
      @error="onError" 
    />
    
    <!-- 开始扫码按钮 -->
    <button @click="startScan">开始扫码</button>
  </view>
</template>

<script>
export default {
  setup() {
    const barcode = ref(null);

    const startScan = () => {
      barcode.value.start({
        conserve: true,  // 保存扫码成功的截图
        filename: '_doc/barcode/'  // 截图保存路径
      });
    };

    const onMarked = (e) => {
      console.log('扫码成功:', e.detail);
    };

    const onError = (e) => {
      console.error('扫码失败:', e.detail);
    };

    return { barcode, startScan, onMarked, onError };
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 2.4 控制闪光灯

说明：通过 setFlash 方法控制扫码时是否启用闪光灯。

<template>
  <view>
    <!-- 扫码框 -->
    <barcode ref="barcode" class="barcode" @marked="onMarked" @error="onError" />

    <!-- 开启闪光灯按钮 -->
    <button @click="toggleFlash">开启闪光灯</button>
  </view>
</template>

<script>
export default {
  setup() {
    const barcode = ref(null);

    const toggleFlash = () => {
      barcode.value.setFlash(true);  // 开启闪光灯
    };

    const onMarked = (e) => {
      console.log('扫码成功:', e.detail);
    };

    const onError = (e) => {
      console.error('扫码失败:', e.detail);
    };

    return { barcode, toggleFlash, onMarked, onError };
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 3. 扫码控制案例

以下案例展示了如何使用 Barcode 组件设置扫码框、扫码条颜色，控制扫码行为（启动扫码、取消扫码、控制闪光灯）及处理扫码成功与失败的完整代码。

<template>
  <view>
    <!-- Barcode 扫码框 -->
    <barcode 
      ref="barcode" 
      class="barcode" 
      autostart="true" 
      frameColor="#FF0000" 
      scanbarColor="#00FF00" 
      @marked="onMarked" 
      @error="onError"
    />

    <!-- 控制按钮 -->
    <button @click="startScan">开始扫码</button>
    <button @click="cancelScan">取消扫码</button>
    <button @click="toggleFlash">开启闪光灯</button>
  </view>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const barcode = ref(null);

    // 开始扫码
    const startScan = () => {
      barcode.value.start({
        conserve: true,
        filename: '_doc/barcode/'
      });
    };

    // 取消扫码
    const cancelScan = () => {
      barcode.value.cancel();
    };

    // 控制闪光灯
    const toggleFlash = () => {
      barcode.value.setFlash(true);  // 开启闪光灯
    };

    const onMarked = (e) => {
      console.log('扫码成功:', e.detail);
    };

    const onError = (e) => {
      console.error('扫码失败:', e.detail);
    };

    return { barcode, startScan, cancelScan, toggleFlash, onMarked, onError };
  }
}
</script>

<style>
.barcode {
  width: 750rpx;
  height: 700rpx;
  background-color: #808080;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

编辑此页

上次更新: 2025/02/01, 02:18:15

← 自定义底部导航栏组件基础列表组件→