> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.customeow.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 工作流-WorkFlow能干什么

## 工作原理

**通过连线的方式，使组件与模板图层的数据相连接，让“静态”的图层变“动态”。**

## 能实现什么？

### 预览中展示输入的文字

刻字组件与预览组件的模板中的文字图层连接，输入框的文字就显示在预览中：

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/59157388-c29c-4f50-8f4b-ab8261999e24.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/cb51354f-0ce4-4244-8970-73dcf79f4a78.gif)

#### 刻字组件与多行文本组件连接：

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/9f432c41-7177-49e9-ac3d-9b31c4fbfc5d.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/ad666ac7-47dd-40dd-9617-8bcfb53f9996.gif)

### 改变文字字体，文字颜色

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/f2c81ab5-a01a-4228-ab1a-5f6929b7fad3.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/3e9841eb-7bb6-42be-8210-b13a7af17c74.gif?x-oss-process=image/format%2Cwebp)

### 用户传图

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/4175dbca-9b6c-4a7f-96ef-f459f558b8fd.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/59d405bd-7c05-433a-897b-89ff28667fe9.gif)

### 换图

图片选择组件与模板中的图片图层连接,实现根据选项切换预览显示的图片：

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/6dc7b9ed-23f2-4133-a487-3a98935b99d9.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/6f8ee375-3a8c-4724-a72e-0cdab909edf1.gif?x-oss-process=image/format%2Cwebp)

### 一个输出源连接多个输入源

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/fd5c7c4e-c7c4-44d8-a22f-153ad4af443a.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/5d4f7408-7c28-494f-8787-951c5abeba00.gif?x-oss-process=image/format%2Cwebp)

> 小技巧，可以将多个图层进行编组，简化操作（如果是文字图层，需要点击到勾号）

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ae4a2677-ece8-4bc2-867a-54f9db021659.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/13cae38b-e05f-4929-9b6a-2f88a73ed17c.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/1c2ac009-5ee2-449b-9c9b-ab2954c32556.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/3db2a9cf-b129-4cb6-9af6-2e43b4aa77ed.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/870fd9e4-8192-417c-8a49-fba489219e81.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/36824f50-91bb-4783-81fc-dc142a1f8bc4.png?x-oss-process=image/format%2Cwebp)

### 多个输出源连接同一个输入源

- 待补充

除了直接连接，还可以在WorkFlow面板中点击鼠标右键添加Condition-条件以及Funciton-函数进行对数据进行处理实现更多花活。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/c7f6cad4-5ac3-4c8a-88ba-fa37481a70ab.png?x-oss-process=image/format%2Cwebp)

例如：

### 函数-提取首字母

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/0e3d612d-12d2-426f-a54e-fb3b2d87f90c.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20260716/fbebec3a-984c-4626-8a2b-e348b093bf7c.gif)

### 函数-两个单行文本框拼接内容

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/06d8b4df-6697-4e21-9bea-5c32cb5e482c.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/7f978045-87c6-4837-889d-9b6139229a81.gif?x-oss-process=image/format%2Cwebp)

### 条件-根据用户选项设置输出

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ac0d8481-b83c-439b-9394-d13a39f2dea9.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/a7767cdd-22e3-4750-8003-1efb5b2327f2.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/7bfcb5c6-063e-427e-97fc-f6885bf60ca5.gif?x-oss-process=image/format%2Cwebp)

> 更多函数和条件使用，等您发掘

## 入口

### 一步定制：

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/2ce6f73c-a65b-4cde-8f97-58f479ef97dd.png?x-oss-process=image/format%2Cwebp)

### 功能：

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/5edd7511-a4ea-4986-82db-6ffc1c22a94d.png?x-oss-process=image/format%2Cwebp)

## 操作方法

连接方法非常简单，只需要点击按住输出源拖拉到输入源即可。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/497942a5-be57-4f94-8dfc-e9977d597acc.gif?x-oss-process=image/format%2Cwebp)

### 界面移动方法

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/ddcd997e-9e83-4e0f-8a11-0fd7acec23ba.gif?x-oss-process=image/format%2Cwebp)

## 卡片

组件在Workflow中以卡片形式显示，只显示输入输出源（部分组件没有输入源）。

卡片左侧为输入源，卡片左侧为输出源。

### 文本组件

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/b2e823d0-f523-4442-8aa1-1a13eb8d1612.png?x-oss-process=image/format%2Cwebp)

### 传图组件（1张）

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/0c9b8464-e3c0-4a1a-82ed-f5829d31fb3d.png?x-oss-process=image/format%2Cwebp)

### 传图组件（16张）

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/baf394a0-fbc2-4ccf-9d68-b312583dbcc3.png?x-oss-process=image/format%2Cwebp)

> Preview-预览、Mockup Preview-样机预览、3D Preview-3D预览必须导入模板才会显示卡片在WorkFlow中；并且添加定制图层后，才会显示输入源。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/aeb890d6-419f-4ff5-80e7-8eed4ad81e06.png?x-oss-process=image/format%2Cwebp)

拿Preview-预览举例：

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/9e8c341f-8fbf-42ff-895e-19c8320b540f.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/993989d5-19ea-46d7-832c-3bb08a428f6d.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/5f6bec99-e097-413a-8570-3a6f784742f7.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/835bea49-8221-4b79-8bb4-2d705cf35c26.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/73dd9867-9596-4ebf-bb0a-890eb1aa0d23.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/c8afb5f2-81a9-44ca-820f-f9a50e43a626.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/af0a0c7d-f62d-44ec-8316-c6e67abd21dc.png?x-oss-process=image/format%2Cwebp)

> Schematic-示意图、Pop Modal-弹窗、Description-图文描述、Alert-警示、Countdown-倒计时组件并没有输出输入源，他们也不会以卡片的形式出现在Workflow中。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/e443252d-2ecf-487a-8c45-9d71b0be27a1.png?x-oss-process=image/format%2Cwebp)

## 数据类型

**输入输出源能连接的前提是同一数据类型。**

在拖动输入输出源的时候，会有虚线特效提示可以连接到哪些源。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/f3be3cbe-5120-4eef-8963-0fe6e9584781.png?x-oss-process=image/format%2Cwebp)

在数据类型旁会有一个Value，这是组件输入输出值的命名，与数据类型无关。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/71a81f77-0a04-4ad2-845b-0607bf86d3d2.png?x-oss-process=image/format%2Cwebp)

例如选音乐组件，Name指的是消费者所选的歌曲名，数据类型是文字。

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/e7f384f5-06e2-497b-8c48-37509a5dd0cb.png?x-oss-process=image/format%2Cwebp)

> 文字图层可通过点击右侧小箭头展开勾选更多数据类型

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/b3f10a48-fcbd-4ddb-8bf5-eda1dd9bff6e.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/630a86d8-8d5d-46ce-819d-e811c7df52cb.png?x-oss-process=image/format%2Cwebp)

> 「文字比例」数据类型需要连接文字内容，最常见与「选择菜单」组件搭配使用（选择菜单组件的值为纯数字）

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/3ae041af-5c9f-42ce-9785-aeeb0786a3c8.png?x-oss-process=image/format%2Cwebp)

![](https://assets.staticmeow.com/customeow/static/open-component-cover/20261023/f67e7e60-9638-4d1d-857c-4a3f190c9353.png?x-oss-process=image/format%2Cwebp)

## 拓展阅读

### 新手入门

- [连接店铺](https://help.customeow.io/zh/article/6le5o6l5bqx6zo6-1hgumgi/)
- [新手向：跟着教程创建你的第一个定制功能](https://help.customeow.io/zh/article/5paw5oml5zcr77ya6lef552a5pwz56il5yib5bu65l2g55qe56ys5lia5liq5a6a5yi25yqf6io9-1mdw4s4/)
- [如何让「定制功能」集成到产品落地页？（产品详情页）](https://help.customeow.io/zh/article/5aac5l2v6k6p44cm5a6a5yi25yqf6io944cn6zug5oiq5yiw5lqn5zob6jc95zyw6ag177yf77yi5lqn5zob6km5oof6ag177yj-2ivrml/)

### 进阶功能

- [定制喵中的「模板」](https://help.customeow.io/zh/article/5a6a5yi25za15lit55qe44cm5qih5p244cn-1fy2no5/)
- [使用组件的条件判断实现组件的显示隐藏控制](https://help.customeow.io/zh/article/5l255so57ue5lu255qe5p2h5lu25yik5pat5a6e546w57ue5lu255qe5pi56s66zqq6jep5o6n5yi2-1dxls92/)

### 加价与追销

- [什么是追销产品？](https://help.customeow.io/zh/article/5lua5lmi5piv6l96zsa5lqn5zob77yf-1ggsy/)
- [什么是加价产品？](https://help.customeow.io/zh/article/5lua5lmi5piv5yqg5lu35lqn5zob77yf-pbohnp/)
- [关于加价产品和追销产品以及其在购物车绑定方法](https://help.customeow.io/zh/article/5ywz5lqo5yqg5lu35lqn5zob5zkm6l96zsa5lqn5zob5lul5yk5yw25zyo6lst54mp6l2m57ur5a6a5pa55rov-1pyslym/)