「极简」扣子(coze)教程 | 小程序UI设计进阶！控件可见性设置

最新推荐文章于 2025-05-22 00:16:56 发布
最新推荐文章于 2025-05-22 00:16:56 发布
阅读量1k 收藏 25
点赞数 21
分类专栏： 扣子（coze） AI编程 文章标签： 大数据 人工智能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014527622/article/details/148103222
版权

大师兄在上一期的内容中对用户的UI做了一些简单的介绍。这期大师兄继续介绍UI设计上的进阶小技巧，帮我们获得更好的使用体验。

扣子（coze）编程

「极简」扣子(coze)教程 | 3分钟学会小程序UI设计！从零开始创建页面和瓷片按钮

「极简」扣子(coze)教程 | 老司机秘籍，扣子调试实践II ,错误信息读取及定位

「极简」扣子(coze)教程 | 成为老司机的秘籍，扣子调试实践 I

「极简」扣子(coze)教程 | 一篇讲透“变量聚合” 节点，让输入更灵活！

「极简」扣子(coze)教程 | 细节决定成败！这个小功能让用户满意度飙升，讲的太细了

「极简」扣子(coze)教程 | 添加插件的另一种方法，上百款插件一键添加，快速扩展你的应用功能！

「极简」扣子(coze)教程 | 上百款插件一键添加，快速扩展你的应用功能！

做小程序不求人 |  零代码神器！0基础秒做专业级App智能体，字节扣子平台抄详细实操纪实

打工人变现新赛道 | 原来做智能体这么简单，5分钟0代码，草履虫实例  【快来学】

「惊觉」未来打工人标配 | 史上第二易懂智能体编程指南来了, 5分钟飞书扣子编程实例 【快收藏】

回顾一下上一期，我们的标题输出界面输出后是这样的。因为需要输出10条结果，而框的高度（或者说手机屏幕高度）非常有限，所以一般只能输出5条记录，其他的内容需要用户向下滑动界面才能可看到。

但是在输出结果以后，我们的上面的内容框应该就可以不显示了（或者说可以隐藏起来）。我们今天就来做这个效果。

图片

方案

我们的方案是使用两个按钮。在还未完成生成时显示按钮A和输入框。 生成以后就把按钮A和输入框隐藏起来。这时显示按钮B，点击这个按钮B可以回到刚开始的状态。两个状态不断的可以切换。(成品视频拉到最后)

图片

添加一个按钮B

首先进入用户界面，选中“标题生成”界面。在左边的组件栏中选择按钮。这样又添加了一个按钮。

图片

修改按钮名字为“重新开始”。

选中新建的按钮，修改名字。

图片

设置事件

当“重新开始”的按钮按下以后，代表新的输入周期就要开始了。

这时候需要清空输出，当输出清空后，我们的内容输入框和“开始”按钮将显示出来。（这部分设置在后面）

点击“重新开始”按钮，选择事件，“新建”。

图片

在“选择组件”中选择输出框，方法选择“清除”。点击确定，这样在点击这个按钮后就会清除输出的内容。

图片

修改按钮可见性

从流程图可以分析出，这个按钮有两个状态。

  • 有输出的情况下：可见的

  • 没有输出的时候：不可见

所以我们要对他的可见性进行简单的编程。首先选中这个按钮，然后点击“可见性”中的“添加条件”。

图片

设置“不显示”

弹出框中可以看满足下面的条件，这个按钮就会隐藏。

图片

通过下面4步选中markdown组件（输出）的内容作为比较值。

图片

条件中选择为空。意思就是markdown组件中没内容，这个按钮就不显示了。

图片

设置内容和按钮A控件的可见性

从流程图可以分析出，这个内容输入框和按钮A的状态。

  • 有输出的情况下：不可见的

  • 没有输出的时候：可见的

正好与之前的按钮B相反。我们使用与上面同样的方式来设置他们的可见性。

输入框

选中输入框，可见性，添加条件。

图片

前面的组件部分是跟按钮B的设置是一样的，但是条件中选择“不为空”。

图片

按钮A

对原来界面上的按钮A做同样的操作。

预览

点击预览按钮，开始测试。可以看到界面已经按照我们的策略运行了。

「极简」扣子(coze)教程 | 小程序UI设计进阶！控件可见性设置

历史文章检索：

扣子（coze）编程

「极简」扣子(coze)教程 | 3分钟学会小程序UI设计！从零开始创建页面和瓷片按钮

「极简」扣子(coze)教程 | 老司机秘籍，扣子调试实践II ,错误信息读取及定位

「极简」扣子(coze)教程 | 成为老司机的秘籍，扣子调试实践 I

「极简」扣子(coze)教程 | 一篇讲透“变量聚合” 节点，让输入更灵活！

「极简」扣子(coze)教程 | 细节决定成败！这个小功能让用户满意度飙升，讲的太细了

「极简」扣子(coze)教程 | 添加插件的另一种方法，上百款插件一键添加，快速扩展你的应用功能！

「极简」扣子(coze)教程 | 上百款插件一键添加，快速扩展你的应用功能！

做小程序不求人 |  零代码神器！0基础秒做专业级App智能体，字节扣子平台抄详细实操纪实

打工人变现新赛道 | 原来做智能体这么简单，5分钟0代码，草履虫实例  【快来学】

「惊觉」未来打工人标配 | 史上第二易懂智能体编程指南来了, 5分钟飞书扣子编程实例 【快收藏】

AI编程与系统

20年经验程序员被AI踢馆现场！AI时代职场危机应对

大师兄数字生命崛起 | 腾讯元器五分钟零成本集成”公众号文章问答“

办公&图文创作

立夏爆款！咸鱼最新副业山水藏字接单到手软，工具免费，附保姆级教程

为什么 DeepSeek 复制总带奇怪符号？| 解密AI时代的基础语言markdown

DeepSeek又抽风? | 5.1假期必备，一口气10个DeepSeek 稳定满血入口清单 【快收藏】

90%人不知道的功能 | 飞书多维表格批量自动爬取网上信息，0基础5分钟打造全自动信息加工厂实操【快来试】

一张海报=一部电影 | 一键带你重回电影的黄金年代，即梦3.0让人人都成为海报设计师

信息爆炸时代，怎么能不会这招 | 倍速吸收信息的秘密武器，阿里通意AI，送AI时代择业指南

何止提效10倍，全自动小红书卡片生产攻略 | 只需3步，DeepSeek+多维表格 【先进生产力收藏】

离谱！凌晨保险代理跟我卷AI | 5分钟顶你一天的小红书卡片模板批量生成

清华动手反制美国！又一个国产deepseek时刻？| 能自己动手查资料的智谱“沉思”完整测试

还在用Mermaid+Napkin？| 3步，让大老板深深记住你的名字，制作现场限时公开 【速转家人】

老板露出了赞赏的笑容 | 这个AI绘图神器，让你的 PPT 秒杀麦肯锡，免费 【建议收藏】

只知道Mermaid？ 这款独自与visio抗衡20年的免费软件竟让deepseek的生图效率再翻倍 【建议收藏】

废物简历秒变HR心动款！Deepseek教你3步改出必过简历  【建议收藏】

踩坑又踩坑 | 做到这些才能效率翻10倍！用deepseek三分钟绘制各种图表（建议收藏）

别再用KimiPPT助手了 | 比较了三个AI工具后大师兄给牛马的忠告

大师兄登录小红书 |  跟着大师兄学 AI 图文笔记，小红书创作不求人

抢救褪色记忆！手残党福利，AI三步修复老照片

三八妇女节海报设计0成本！用AI工具2步生成精美海报？0基础也能秒懂

体制人必看：DeepSeek智能改稿的3大禁忌与3个提效密码

特朗普VS泽连斯基刷屏 | 别被碎片化信息骗了！这才是AI分析特朗普事件的正确姿势

DeepSeek：选对模型，效率翻倍。   送Deepseek清华AI 5件套

文档系列

小红书/Tiktok运营秘籍 | 《大任智库DeepSeek+ 外经贸企业创新突围讲义精华全版》

他为中央政治局第二十次集体学习演讲 | 郑南宁院士《科技赋能教育》

13所大学Deepseek公开课，一次拿走 | 更新浙大第2季《AI大模型如何破局传统医疗 》

不花钱请家教！秘塔这个AI免费功能让学习效率翻倍 | AIGC技术赋能教育数字化转型

未来教育风向标 | 教育学顶流985高校，华东师范大学《AIGC技术赋能教育数字化转型的机遇与挑战》,13所大学deepseek

中美博弈又添筹码，AI模型差距只剩千分之三 | 455页斯坦福2025 AI指数报告全新出炉，附文档免费下载及中文通意辅读工具

没有更全的了，免费拿走 | 12所大学Deepseek公开课，更新至浙大第2季《智能金融：AI 驱动的金融变革》

Deepseek公开课,不能再全了 | 中山大学 《从技术突破到场景落地：大模型发展图谱与DeepSeek创新应用》。

一次下载10个大学的Deepseek系列课 | 更新至哈工大，《从图灵测试到DeepSeek》 82页

清华大学 | 1-14 全网最全合集，《迈向未来的AI教学实验》369页爆肝呈现  【快收藏】

【免费下载】清华大学Deepseek系列之第九篇 |《DeepResearch应用报告》  【建议收藏】

【免费下载】政务七连发 |《北京“数据要素x”典型案例 》《智慧城市大脑建设方案》 【建议收藏】

【免费下载】制造业数字化两件套 | 《德勤制造业人工智能创新应用发展报告》《中国制造企业数字化转型白皮书》

【免费下载】清华厦大deepseek学术王炸两件套

给被315晚会扎心的朋友们补补血 | 《2024年宇树科技商业计划书》【免费下载】

【免费下载】阿里巴巴全域数据中台 | 华为数据中台建设路径：筑梦数字化未来之路

【免费下载】小朋友再不学AI就来不及啦 | “少年商学院｜DeepSeek中小学生使用手册（83页）”

[免费下载]浙江大学DeepSeek系列公开课：智能时代的全面到来和人机协作的新常态（含视频课

这一回不要羡慕别人了，快来取 |  北京大学：DeepSeek与AIGC应用

AI五分钟科普

快转给爸爸 | 从平面到动画，5分钟零基础为小棉袄打造属于自己的迪斯尼魔法回忆

5分钟！| 早读课偷偷哼歌被表扬！这招让<出师表>秒变洗脑神曲无需安装！5 分钟体验 AI 文生图魔法（内有豆包安装方法）

AI新闻

「解读」IT新闻 | 微软裁员 6000 人背后：两次亲身体验暴露的必然性，活该还是无奈？

AI 时代，你的工作会被取代吗？| 如何重塑AI时代的个人价值

马拉松新纪元：冠军只是开始，这些「翻车」画面才是重点，机器人马拉松比赛带来的机器人AI赛道的思考

「好奇」从实验室到独角兽 | 人工智能路演现场直击

东大反制速度震惊白宫幕僚！| 川普关税清单竟被AI秒破解？

这5条愚人节AI生成的假新闻你有没有中招  【快转给中招的朋友】

“4月1号，朋友圈一定要这样发”

四大 AI 联合打造 315 晚会曝光清单，这些信息不容错过！

英特尔首次换上华人CEO | AI你怎么看

特朗普VS泽连斯基刷屏 | 别被碎片化信息骗了！这才是AI分析特朗普事件的正确姿势

Coze高阶玩法 | 使用Coze制作思维认知提升视频，效率提升300%！（附保姆级教程）
李同学Lino的博客
04-25 452
中午吃饭的时候，刷到了一个思维认知提升的视频账号，发现这个账号不简单啊！它仅仅4条作品，最早发布的一条作品还是四天前的，而且条条爆款，最爆的视频点赞数有13w，涨粉至3.2w了，真的太夸张了！无独有偶，我发现这类型的视频很多都基本爆了，无论是小红书还是抖音平台，都是有相应的爆款视频。随便点进去，基本都是固定的格式，只有字幕是动态的，做起来非常简单。接下来我将手把手教大家利用Coze搭建工作流来实现这类型的视频，看完你也可以上手实操一遍。
coze案例|标准证件照(上)--图像流
sinat_29950703的博客
10-23 674
拍一套证件照需要几十块甚至上百元钱，还要花费时间去照相馆拍照。现在可以通过coze智能体来实现自助制作证件照。
一文带你入门字节智能体扣子coze！！！《扣子智能体小白入门指南》
kaka0722ww的博客
01-04 1万+
在扣子智能体的学习过程中，丰富的学习资源能够帮助用户更好地掌握和运用这一强大的工具。以下是一些推荐的学习资源：•。
扣子（coze）教程1-智能体 | 界面重点功能
weixin_44276464的博客
12-02 4606
本次介绍了扣子在工作中如何应用，以及如何创建智能体或应用，并介绍了扣子界面其他两个重要的动能。商店，查看广大网友的创建的智能体、应用等。工作空间，查看自己创建的智能体，应用等。
coze(扣子)智能体和AI应用从入门到精通(保姆式教程)
热门推荐
程序老曹的博客
02-22 2万+
扣子是新一代 AI 应用开发平台。无论你是否有编程基础，都可以在扣子上快速搭建基于大模型的各类 AI 应用，并将 AI 应用发布到各个社交平台、通讯软件，也可以通过 API 或 SDK 将 AI 应用集成到你的业务系统中。这个 天生漫画师 应用支持用户输入一段故事梗概或者片段，点击生成漫画就可以获得到根据自己创建的工作流生成的相对应的漫画图片。
发现一个产品经理用AI搞钱新思路(附教程)
qq_46094651的博客
11-04 2289
先说下最近看到用AI赚钱的真实经历。最近在逛淘宝的时候，看到有几个AI店铺，都很有意思。可能很多小伙伴还不知道扣子是啥，那先简单介绍下扣子。扣子（coze.cn）是字节旗下一个无需编程经验，只需要有产品思维就可以通过自然语言搭建出一个自己的AI智能体的平台，搭建好的智能体还可以发布到自己的公众号、小程序、抖音等。只要花几分钟看教程，从0开始搭建一个智能体，对于产品经理来说是非常简单的（后面部分我会举个例子来介绍如何搭建）。
最新扣子(Coze)实战案例：扣子卡片的制作及使用，完全免费教程
andy_68147772的博客
06-21 2936
例如你在扣子上通过插件或工作流返回一篇新闻，如果直接输出，就是一行标题，一段内容，可能有的还会有一个链接。正常情况下，循环的数据是接口返回的。通过本节课学习，彻底让大家掌握扣子卡片的使用，让你的应用与众不同。好了，到这里，我们就把卡片的制作及使用学习完了，希望大家多多使用卡片的形式展现更好的的效果。上面的这个结构，可以看出，是一个两列布局，有左右两部分内容。数组变量的值如下，一共有三个元素，也就是对应展示出来的新闻列表也应是三条。这时让图片的部分占1分，让文字的内容占5份，这样就能达到我们的效果了。
【扣子coze+微信开发者工具】实现ai自定义对话02：微信小程序对话页面简单设计
qq_54413078的博客
07-15 2195
本系列文章实现了运用国内扣子Coze与微信开发者工具实现一个简单的微信小程序页面，一个与自定义AI语言交互问答的功能。本系列文章详细讲解的从创建bot到微信小程序页面还有接口的编写。后续可能会加入后端Java+SpringBoot的逻辑功能来丰富项目。成果预览：专栏相关操作1、创建自定义Bot2、微信小程序对话页面简单设计3、逻辑和接口实现在这之前要先拥有一个微信公众平台的账号，如果没有的话要去微信公众平台注册，然后创建一个小程序，记得更改成自己的AppID。
【扣子coze+微信开发者工具】实现ai自定义对话03：微信小程序js逻辑和接口实现
qq_54413078的博客
07-15 7907
本文介绍了扣子的API官方文档，还有使用微信开发者工具输入内容和获取本机图片，调用扣子的API实现AI通信。本系列文章实现了运用国内扣子Coze与微信开发者工具实现一个简单的微信小程序页面，一个与自定义AI语言交互问答的功能。本系列文章详细讲解的从创建bot到微信小程序页面还有接口的编写。后续可能会加入后端Java+SpringBoot的逻辑功能来丰富项目。01、创建自定义Bot02、微信小程序对话页面简单设计03、微信小程序js逻辑和接口实现。
coze案例|标准证件照(下)–工作流+Bot设计
sinat_29950703的博客
10-26 1449
coze案例|标准证件照(下)–工作流+Bot设计
AI智能体：手把手带你用扣子搭建知识库，还能自动收集客户需求
m0_59235945的博客
09-04 9901
本次我用扣子搭建了一套提示词基础入门的智能体。利用智能体把需求收集到飞书表格，构建了一整套自动化需求收集流程。如果我们有一套细分领域的专家智能体，通过这种近乎零成本的方式，就能为我们带来可观的商机。
「极简」扣子(coze)教程 | 成为老司机的秘籍，扣子调试实践 I
u014527622的博客
05-17 922
在扣子编程中有的时候还是会犯一些小错误。这个时候学一些调试技巧就能帮助快速发现这些小错误。老司机与小白最大的区别就在调试能力上。今天大师兄就写一下扣子工作流的调试技巧。今天的例子基于以下这篇内容。
「极简」扣子(coze)教程 | 3分钟学会小程序UI设计！从零开始创建页面和瓷片按钮
u014527622的博客
05-19 1354
上两篇大师兄讲了一下扣子平台的基础调试技巧。这期我们介绍一下扣子平台UI的编程基础。
「极简」扣子(coze)教程 | 做小程序不求人 ，零代码神器！0基础秒做专业级App智能体，字节扣子平台抄详细实操纪实
u014527622的博客
05-11 1359
大师兄带大家通过扣子低代码工具做了一个带界面的小程序。
AI智能体|最新扣子(Coze)教程：图像流画板节点，一键搞定小红书爆款配图。
fyg123654的博客
09-30 3380
扣子(Coze)图像流画板，一键搞定小红书爆款配图。
Coze扣子智能体工作流开发入门教程 | 手把手教你实现调研助手Agent
2401_85373898的博客
10-11 6742
本文介绍如何通过Coze工作流构建一个调研助手Agent。我们将介绍Coze工作流的基础概念，并通过实际案例演示如何利用Coze工作流进行数据收集和处理。大语言模型的训练数据有截止时间，需要借助工作流和插件的能力获取最新的资讯数据。通过设置合适的提示词，为智能体设定角色和处理逻辑。智能体会根据大语言模型对人物设定和回复逻辑的理解，来响应用户问题。因此提示词编写的越清晰明确，智能体的回复也会越符合预期。可以在提示词中指定用作逻辑处理，实现通过prompt无法实现的功能。
如何优化 Elasticsearch 磁盘空间和使用情况
Elastic 中国社区官方博客
05-19 1054
文章由Elastic的Kofi Bartlett撰写，主要讨论了如何有效管理和优化Elasticsearch中的磁盘空间使用。文章首先强调了磁盘管理的重要性，指出磁盘空间不足会导致数据写入停止，而过度分配则会造成资源浪费。接着，文章介绍了Elasticsearch中的水位线阈值，包括低磁盘水位线、高磁盘水位线阈值和磁盘洪水阶段，这些阈值帮助监控磁盘使用情况。文章还提供了处理磁盘过满的几种方法，如删除旧数据、增加存储容量、使用快照与还原技术、减少分片副本数以及设置磁盘使用告警。此外，文章还探讨了如何减少未被充
MongoDB聚合框架：大数据处理的瑞士军刀
最新发布
vvilkin的学习备忘
05-22 753
在当今数据驱动的时代，如何高效地处理和分析海量数据成为了开发者面临的重要挑战。MongoDB作为最流行的NoSQL数据库之一，其强大的聚合框架(Aggregation Framework)为我们提供了灵活而高效的数据处理能力。本文将深入探讨MongoDB聚合框架的核心概念、使用方法和最佳实践，帮助您掌握这一"大数据处理的瑞士军刀"。
coze 开发微信小程序
03-22
### 关于 Coze 微信小程序开发 Coze 是一种用于快速构建跨平台应用的框架，它支持多种前端环境，包括微信小程序。以下是关于如何使用 Coze 进行微信小程序开发的相关信息。 #### 1. 安装与配置 在开始之前，需要安装并配置 Coze 的开发环境。可以通过 npm 或 yarn 来安装 Coze CLI 工具[^4]。具体命令如下： ```bash npm install -g @cozecode/cli ``` 或者 ```bash yarn global add @cozecode/cli ``` 完成安装后，初始化一个新的项目以适配微信小程序环境： ```bash coze init my-weapp-project --template weapp cd my-weapp-project npm install ``` 这一步会创建一个基于 Coze 的微信小程序模板项目，并自动下载依赖项。 --- #### 2. 文件结构说明 Coze 提供了一种模块化的文件组织方式，使得代码更加清晰易维护。典型的微信小程序项目目录可能如下所示： ``` my-weapp-project/ ├── src/ # 主要源码目录 │ ├── components/ # 自定义组件 │ ├── pages/ # 页面逻辑 │ └── utils/ # 实用工具函数 ├── app.coze # 应用入口文件 └── project.config.json# 小程序配置文件 ``` `app.coze` 是整个项目的入口文件，在这里可以设置全局状态管理、路由规则以及其他初始化逻辑[^3]。 --- #### 3. 组件化开发 Coze 支持声明式的 UI 编写风格，类似于 Vue.js 或 React。下面是一个简单的按钮组件示例： ```html <!-- Button.coze --> <view class="button"> {{ text }} </view> <script> export default { props: ['text'], }; </script> <style scoped> .button { padding: 10px; background-color: #1890ff; color: white; border-radius: 5px; } </style> ``` 此组件可以在其他页面中复用，只需传递 `text` 属性即可。 --- #### 4. 数据绑定与事件处理 Coze 中的数据绑定机制允许开发者轻松实现动态界面更新。例如，以下代码展示了如何监听用户的点击操作并将数据同步到视图上： ```html <!-- Counter.coze --> <view>{{ count }}</view> <button bindtap="increment">增加</button> <script> export default { data() { return { count: 0 }; }, methods: { increment() { this.setData({ count: this.data.count + 1 }); } } }; </script> ``` 上述代码片段实现了计数器功能，每次点击按钮都会触发 `increment` 方法来修改 `count` 值。 --- #### 5. 构建与发布 当开发完成后，可运行以下命令打包项目以便上传至微信公众平台进行审核和发布： ```bash coze build --platform=weapp ``` 该命令会生成适合微信小程序使用的资源包，存放在指定输出路径下。 --- ### 总结 通过以上步骤，能够利用 Coze 框架高效地开展微信小程序的应用开发工作。其强大的生态系统不仅简化了复杂流程，还提供了灵活扩展的可能性[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值