---
order: 43
navTitle: 扫码
---
# SuperPage交互-扫码

SuperPage中提供了扫码交互，可以使用移动设备（手机，平板等）或扫码枪进行扫码，获取码内的信息。

## 使用扫码交互{#start}

扫码交互执行需要有如下步骤：

1. 扫码需要提前和微信做好单点配置，具体可参考[单点登录](../../../../devops/sso/wechat.md)
2. 添加按钮，设置扫码交互
3. 点击扫码按钮，打开一个扫码弹窗，将扫码返回的信息设置给指定的参数，此时用户可以根据识别信息进行数据库查询以便校验识别结果的合法性，根据用户设置的校验公式进行校验，校验失败会提示用户并不再执行下面的步骤，具体见[对返回的信息做数据校验](#check)
4. 设置识别结果和数据库查询结果给参数、输入组件或者给指定数据集增加一行数据，可参考[将识别返回信息设置给参数或组件](#return-value)
5. 完成扫码

如下是使用扫码提交信息的具体步骤：

![扫码](./images/scan.gif)

1. **添加单次扫码按钮：** 在**组件区**>**常用分组**下将按钮组件拖入到画布中，可参考文档[按钮](../../components/common/button.md)
2. **添加扫码交互：** 选中按钮，在**属性栏**>**交互**下点击添加动作，选择**扫码**
3. **设置交互属性：**
   1. 选择设备为**默认**，场景为**默认**
   2. **将返回信息设置给参数或组件：** 勾选**将返回内容设置给参数**，并点击**组件设置**添加**目标组件**和**值**，具体见[将识别返回信息设置给参数或组件](#return-value)
   3. **提交扫码数据：** 勾选**结果插入到数据集**，选择提交的数据集，并点击**字段设置**添加**目标字段**和**值**；选择**覆盖模式**为**追加**，并设置提示信息，具体见[将返回结果写入到数据库中](#set-dataset)

## 支持的设备类型{#device-type}

扫码交互支持微信扫码和扫码枪扫码，在**设备**和**场景**属性里进行设置。详细属性如下：

- **默认**：如果是移动端设备，则调用微信扫码；如果是PC端设备，会打开一个文本输入弹窗，手动输入码值。默认选项下，只提供了默认的扫码场景，即扫描二维码和条形码
- **扫码枪**：扫码枪的场景支持扫描二维码和条形码

如果需要支持其他设备类型，可以在扩展模块中导入相应的扩展包，详细可参考[扩展管理](../../../../devops/extension-manage/README.md)

## 设置连续扫码{#scanning}

扫码方式分为单次扫码和连续扫码，二者的体验区别如下：

- **单次扫码：** 默认为单次扫码，即点击扫码按钮，调用微信扫码，扫码完成后，自动关闭扫码窗口。每次扫码前都要点击一次扫码按钮
- **连续扫码：** 勾选连续输入后，可以进行连续扫码，连续扫码完成后，不会自动关闭扫码窗口

连续扫码提供了2种体验：

- **持续扫码**：只勾选**连续输入**，点击扫码按钮，调用微信扫码。上一个扫码完成后，自动弹出扫码窗口，继续扫码
- **确认后继续**：勾选**连续输入**和**确认后继续**。上一个扫码完成后，会提示扫码成功，点击屏幕，才能继续扫码

## 将识别返回信息设置给参数或组件{#return-value}

将扫码返回的信息设置给参数或组件，具体可参考OCR识别[将识别返回信息设置给参数或组件](./OCR.md#return-value)。区别在于扫码交互的辅助输入结果，只有扫码结果。

### 对返回的信息做数据校验{#check}

扫码交互支持对返回的信息做数据校验。在数据校验开始前和校验后两个阶段，都可以将返回的信息填充到参数或组件，而校验通过的数据才可填充到组件或插入到数据集中，具体可参考OCR识别[对返回的信息做数据校验](./OCR.md#check)

### 将校验前的结果设置给参数{#set-param}

当有返回结果时，会将返回信息传递给设置的参数或组件。具体可参考OCR识别[将校验前的结果设置给参数](./OCR.md#set-param)

### 将校验后的结果填充到组件{#set-component}

在校验表达式中设置了校验规则，只有在校验通过后才会将返回信息传递给设置的参数或组件。具体可参考OCR识别[将校验后的结果填充到组件](./OCR.md#component)

## 将返回结果写入到数据库中{#set-dataset}

将扫码返回的结果信息存储到数据集中，在扫码交互下勾选**结果插入到数据集**属性，并选择需要插入的数据模型及字段设置即可。具体可参考OCR识别[将识别返回信息写入到数据库中](./OCR.md#set-dataset)

## 应用场景{#application-scenarios}

1. **扫码提交新数据：** 扫码后往数据库里插入一条新数据，如商品出售时，扫码新增一条订单数据。具体效果可以在[单次/多次扫码](https://demo.succbi.com/v5/DEMO/app/ap.app/index.mpg?id=%E6%89%AB%E7%A0%81)中进行体验
2. **扫码更新已有数据：** 扫码后更新数据库里的一条已有数据，如出库时，扫描货物的二维码，修改货物的剩余库存。具体效果可以在[扫码更新数据](https://demo.succbi.com/v5/DEMO/app/ap.app/index.mpg?id=%E6%89%AB%E7%A0%81)中进行体验
3. **扫码查看溯源数据：** 扫码查看数据，如扫描防伪码，可以查看对应产品的详细信息。具体效果可以在[扫码溯源](https://demo.succbi.com/v5/DEMO/app/ap.app/index.mpg?id=%E6%89%AB%E7%A0%81)中进行体验

扫描第一个二维码打开扫码demo，然后切换到对应的标签页，点击扫码按钮，扫描下方的二维码即可体验对应的扫码场景，更多扫码体验可查看[扫码交互](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E6%89%AB%E7%A0%81%E4%BA%A4%E4%BA%92)

| 扫码demo | 单次/多次扫码 | 扫码更新数据 |  扫码溯源 |
| --------| -------- | -------- | -------- |
| ![扫码demo](./images/2021-03-22-16-31-07.png) | ![单次/多次扫码](./images/2021-03-22-11-27-38.png) | ![扫码更新数据](./images/2021-03-22-11-31-45.png) | ![扫码溯源](./images/2021-03-22-11-32-23.png) |