Coze中“按钮” 组件的使用秘诀+举例+疑问（组件 A002）

AI-AIGC-7744423

已于 2025-03-04 08:05:37 修改

阅读量913

点赞数 5

文章标签： ui 人工智能 stable diffusion

于 2025-03-01 10:39:23 首次发布

本文链接：https://blog.csdn.net/2301_80471322/article/details/145944154

版权

“按钮”组件的用处和什么时候会用到

想象你在玩一个超有趣的游戏，点击屏幕上的 “开始游戏” 按钮，游戏就开始啦；或者你用手机点外卖，点击 “下单” 按钮，就把想吃的东西告诉商家啦。在 Coze 里做的东西也一样哦，这个按钮组件就是用来让你点击它，然后让电脑去做一些事情，比如查询信息、发送消息，就像给电脑下命令的小开关。

各个功能选项详细说明

按钮名字：这里显示的 “Button1” ，就像给按钮取个小名，方便我们知道说的是哪个按钮。你可以把它改成更有趣的名字，比如 “查询按钮”“发送按钮”。
预览：点击这个蓝色的 “预览” 按钮，就能提前看看这个按钮在实际用的时候长啥样，点它会有什么反应，就像提前彩排一样。
属性和事件：“属性” 就像是按钮的外表特征，比如按钮长啥样、颜色是什么；“事件” 就是按钮被点击后会发生什么，现在咱们重点看 “事件”。
事件配置
- 事件类型：这里选的是 “点击时” ，意思就是只有当你用鼠标或者手指点这个按钮的时候，才会发生后面的事情。就像只有按一下开关，灯才会亮。
- 执行动作：选的是 “调用工作流” ，工作流就像是一套提前设计好的电脑做事流程。比如有个工作流是去查天气，那点击按钮，电脑就会按这个流程去查天气。
- Workflow：这里写着 “Obtaindatainformation” ，这是具体要调用的那个工作流的名字，就像你要找一个叫 “查信息” 的小帮手来做事。
- Workflow 入参配置：这是要给工作流小帮手一些信息，让它能更好地做事。这里有 “im” 和 “button1” ，它们都是字符串类型（String），就像给小帮手的小纸条，上面写着一些文字信息。而且 “button1” 后面有个红色提示说它是必填字段，就是必须要给它写点东西，不然小帮手就不知道该咋做啦。
- 失败提示：如果工作流这个小帮手没把事情做好，就会出现这里写的提示，告诉我们哪里出问题了。比如 “工作流调用失败，原因：（会具体说原因）” 。
- 成功提示：当小帮手把事情做好啦，就会显示 “OK 的呀”，就像给我们报个平安，说事情做完啦。

在 Coze 的 Workflow 入参配置中，要填入的内容要求和规则：

数据类型要求

因为这两个变量的类型都是 “String” ，所以必须填入文本内容。比如可以填一个人的姓名，像 “李华”；或者是一句话，如 “今天的任务是什么” ；也可以是一串数字当成编号，如 “123456” ，但这些数字在这里是当作文字看待，而不是数学计算里的数字哦。不能填入图片、文件这种不是文本的东西。

内容完整性要求

“button1” 带有必填提示，这就意味着必须给它填写内容，不可以空着，不然工作流运行时会出错。而 “im” 虽然没提示必填，但如果工作流需要这个信息才能正常工作，那也得填上合适内容。

引用数据规则

可以使用 {{ }} 引用数据。比如之前流程里已经收集到了用户的姓名，存到了一个变量叫 “user_name” ，那在填写 “im” 或 “button1” 时，就可以写成 {{user_name}} ，这样按钮点击调用工作流时，就会把 “user_name” 实际存储的内容传过去。

内容准确性要求

填入的内容要符合工作流的预期。比如工作流是用来查询图书信息，“im” 要填的可能就是图书名称，填其他不相关的内容，工作流就没办法正确查询啦。

咱们来想象一个给学校做的简单信息查询小工具的例子。

收集用户姓名

在这个工具一开始，会用 “输入” 节点收集用户的姓名。我们把这个收集姓名的变量名设置为 “user_name”，它的变量类型是 “String”（字符串），因为姓名是文本内容嘛。比如小朋友叫 “王小明”，他在使用这个工具时，就会在相应的输入框里输入自己的名字 “王小明”，这个名字就会被存到 “user_name” 这个变量里。

按钮及 Workflow 设置

然后呢，有一个按钮，比如按钮名字叫 “查询我的信息” 。我们给这个按钮设置 Workflow，事件类型选 “点击时”，意思就是当王小明点击这个按钮，就会触发后面的操作；执行动作选 “调用工作流” ，假设这个工作流名字叫 “student_info_search” ，它的作用是去查找王小明的个人信息。

在 Workflow 入参配置这里，有 “im” 和 “button1” 两个要填的地方。因为工作流 “student_info_search” 需要知道要查谁的信息，我们就可以利用之前收集到并存在 “user_name” 里的姓名信息。在 “im” 或者 “button1”（假设工作流设定从 “im” 接收姓名信息）这里填写 {{user_name}} 。

运行过程及效果

当王小明点击 “查询我的信息” 这个按钮时，按钮就会去调用 “student_info_search” 工作流。工作流看到 “im” 里填的是 {{user_name}} ，就会自动去找到 “user_name” 这个变量，把里面存的 “王小明” 这个名字拿过来。然后工作流就可以根据 “王小明” 这个名字，去学校的信息系统里查找属于王小明的成绩、班级等个人信息，最后把结果展示给王小明。

这里的变量名 “user_name” 就像一个小标签，帮我们把用户输入的姓名信息存起来，方便在后续按钮调用工作流等操作中，通过 {{user_name}} 这种引用方式，准确地把这个信息传递给需要

在按钮的 Workflow 设置中使用多个变量，你可以按照以下步骤和方法进行操作，这里结合一个在线商城查询订单信息的实际场景为例：

1. 明确业务需求和变量收集

假设用户需要通过按钮查询特定订单的详细信息，需要收集用户的 ID 和订单编号两个信息。

使用输入节点收集变量：在 Coze 流程中，使用 “输入” 节点分别收集用户 ID 和订单编号。将收集用户 ID 的变量名设置为 user_id，变量类型为 String；收集订单编号的变量名设置为 order_number，变量类型同样为 String。

2. 配置按钮及 Workflow

创建按钮：创建一个名为 “查询订单信息” 的按钮。
设置事件类型：将按钮的事件类型设置为 “点击时”，表示当用户点击该按钮时触发后续操作。
选择执行动作：选择 “调用工作流”，假设工作流名称为 order_info_query，该工作流的作用是根据用户 ID 和订单编号查询订单详细信息。

3. Workflow 入参配置使用多个变量

识别入参字段：在 Workflow 的入参配置中，会有相应的字段用于接收不同的信息。例如，有 input_user_id 和 input_order_number 两个字段，分别用于接收用户 ID 和订单编号。
引用多个变量：
- 在 input_user_id 字段中填写 {{user_id}}，这样当按钮被点击调用工作流时，系统会自动将之前收集到并存储在 user_id 变量中的实际用户 ID 传递给工作流。
- 在 input_order_number 字段中填写 {{order_number}}，同理，工作流会获取 order_number 变量里存储的实际订单编号。

4. 示例代码（以伪代码形式展示逻辑）

plaintext

// 模拟用户输入
user_id = "U12345"
order_number = "O67890"

// 按钮点击事件触发工作流
function button_click() {
    // 调用工作流 order_info_query
    result = order_info_query(input_user_id = {{user_id}}, input_order_number = {{order_number}})
    // 处理工作流返回的结果
    if (result) {
        // 显示订单信息
        show_order_info(result)
    } else {
        // 显示错误提示
        show_error("未找到相关订单信息")
    }
}

5. 注意事项

变量名匹配：确保引用的变量名与之前收集数据时设置的变量名完全一致，否则系统无法正确获取到相应的数据。
数据类型匹配：要保证变量的数据类型与 Workflow 入参字段要求的数据类型一致。例如，如果 Workflow 要求 input_user_id 为字符串类型，那么收集 user_id 时也应设置为字符串类型。
必填项检查：如果某些入参字段是必填项，要确保对应的变量在使用前已经被正确赋值，避免因缺少必要信息导致工作流执行失败。

看图解析：

图中这些选项是什么意思

Workflow：这里面的 “Obtaindatainformation” 就像是一个已经准备好的小任务包，里面装着好多电脑要做的事情，比如去查找一些信息呀。它是个 “object”（对象），就像一个小盒子，装着各种和这个任务相关的东西。
组件：这下面的东西就像是搭建一个大玩具的不同小零件。
- Page2：可以把它想象成一本书里的一页纸，在咱们做的这个东西里，它可能是其中一个页面哦。
- InputNumber1：这是一个能让你输入数字的小框框，就像你做数学题时写答案的地方，不过这里专门用来写数字呢。
- TextArea1：这个是可以写好多文字的地方，你可以把想说的话，像写作文一样写在里面。
- Button1：就是我们现在设置的这个按钮啦，它也被当成一个小零件哦。
系统变量：这是电脑自己准备的一些小帮手。
- query：它有点像一个小侦探，能帮我们去查找和问问题相关的东西。
- userInfo：这个是用来装着用户信息的，比如你的名字、年龄这些信息可能就会放在这里面。

怎么选这些选项呢

假设我们要做一个能查成绩的小工具：

如果你之前用 “InputNumber1” 这个可以输入数字的小框框，让小朋友输入自己的学号，那在 “kaishi” 这里（就是要填东西的地方），就可以选 {{InputNumber1}} 。这样当你点击按钮的时候，电脑就能把你输入的学号拿给那个 “Obtaindatainformation” 小任务包，让它去按照学号找成绩。
要是你用 “TextArea1” 让小朋友写自己想问的问题，比如 “我的成绩怎么样” ，那你就可以选 {{TextArea1}} ，电脑就能带着这个问题去处理啦。

咱们再来更详细地认识一下这两个系统变量 “query” 和 “userInfo”，看看它们到底有多厉害。

query 系统变量

想象你在一个超级大的图书馆里找一本关于恐龙的书。你心里有很多问题，比如 “恐龙都有哪些种类呀”“恐龙是怎么灭绝的呀” ，这个 “query” 就像是你把这些问题写在一张纸条上。

在我们用电脑做的各种东西里，比如一个智能问答的小工具。当你在输入框里写下你的问题，像是 “明天天气怎么样” ，这个问题就会被装到 “query” 这个小纸条里。然后这个 “query” 就像一个小侦探一样，带着你的问题出发啦。它会去电脑里存着各种信息的地方，比如天气数据库，去查找和你问题相关的答案，找到之后再把答案带回来给你。

而且呀，不管你问的是数学题、历史故事，还是生活常识，“query” 都会紧紧记住你的问题，然后努力去找答案，是不是很厉害！

userInfo 系统变量

“userInfo” 就像是一个超级贴心的小口袋，专门用来装你的个人信息。比如说，当你第一次使用一个好玩的学习软件时，软件会让你填写一些信息，像你的名字、年龄、喜欢的学科。这些信息就会被统统装到 “userInfo” 这个小口袋里。

这样一来，当软件想给你提供更适合你的内容时，就可以从 “userInfo” 里拿出这些信息。比如知道你喜欢数学，就给你推荐更多有趣的数学题目和故事；知道你的年龄，就用你这个年龄能听懂的方式和你交流。

不仅是学习软件，很多其他的电脑程序和工具也会用 “userInfo” 这个小口袋。比如一个运动软件，它可以从 “userInfo” 里拿到你的年龄、身高、体重这些信息，然后根据这些给你制定更合适的运动计划。所以呀，“userInfo” 就像一个能帮你更好享受各种电脑服务的小助手呢。

咱们继续深入看看这个 “userInfo” 系统变量里的小秘密哦。

图里面参数的含义

var userInfo：这就像是给一个超级神奇的小盒子取了个名字叫 “userInfo” ，这个小盒子是用来装和用户有关的信息的。
nickName: string;：“nickName” 就是昵称的意思哦，就像你在游戏里或者网上用的名字，比如 “阳光小超人” 。“string” 表示这里面装的是文字内容。所以呀，这个 “nickName” 就是专门用来装你给自己取的那个有趣名字的小格子。
avatarUrl: string;：“avatar” 是头像的意思，“Url” 可以理解成一个地址，就像你家的门牌号，能找到你家一样。“avatarUrl” 就是你头像所在的地址，通过这个地址，电脑就能找到并显示出你的头像啦，比如一张你可爱的照片或者一个有趣的卡通形象。它也是 “string” 类型，也就是文字形式的地址。

怎么选这些参数呢

当你在设置按钮的工作流，想要用到用户的信息时：

如果你想让电脑在做事情的时候，能用到用户的昵称，比如在欢迎语里显示用户的昵称，那在相关的输入框里，就可以选择 {{userInfo.nickName}} 。这样，电脑就能把用户的昵称拿过来用啦。
要是你想展示用户的头像，比如在一个个人信息展示的地方，就可以选择 {{userInfo.avatarUrl}} 。电脑就会根据这个头像的地址，把头像显示出来哟。

不过呢，这里也说了，使用用户信息需要开启页面授权。就好像你要进别人的房间，得先得到主人的同意一样。你要在页面右上角的设置入口中开启用户授权弹窗，得到用户的允许后，才能使用这些信息哦。

小朋友，咱们之前了解了 “userInfo” 系统变量里的 “nickName”（昵称）和 “avatarUrl”（头像地址），还有按钮工作流的入参配置，现在来看这张图就很好懂啦。

Workflow 入参配置的整体作用

Workflow 入参配置，就像是给电脑发布任务时，要给它一些小提示和信息，让它能更好地完成任务。这里的 “kaishi” 就是一个小提示框，它的类型是 “String”，也就是只能放文字内容进去。

框中内容的含义

{{ userInfo.nickName }}：这表示从 “userInfo” 这个装着用户信息的小盒子里，拿出 “nickName” （用户的昵称）。比如用户的昵称叫 “快乐小熊” ，当按钮被点击，工作流启动时，电脑就会把 “快乐小熊” 这个昵称从 “userInfo” 里取出来，放到 “kaishi” 这里。
{{ userInfo.avatarUrl }}：意思是从 “userInfo” 里取出 “avatarUrl”（用户头像的地址）。假如用户头像的地址是 “www.example.com/avatar123.jpg” ，那电脑也会把这个地址取出来，放到 “kaishi” 里。

简单来说，现在 “kaishi” 这个小提示框里，告诉工作流要用到用户的昵称和头像地址这两个信息。这样工作流在运行的时候，就能利用这些信息去做相应的事情，比如向用户打招呼时显示昵称，或者在某个界面上展示用户的头像。