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

上两篇大师兄讲了一下扣子平台的基础调试技巧。

扣子(coze)编程

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

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

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

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

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

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

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

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

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

从今天开始大师兄将开始讲一些简单的用户界面编程的知识,了解这些基本内容有助于我们在后续的应用中制作自己的小程序。

我们之前的重点在于“工作流”介绍,所以并没有关心界面的设计。几乎都使用了默认设计。今天我们将从添加一个主界面开始,将我们的“标题党”应用拓展成一个多功能的“写作助手”。

版本存档

到现在为止我们的每次开发都是基于上一次的完成的例子的。我们一直在使用系统的自动存档功能,所以是没办法看到以前做好的版本的。

随着应用越做越复杂,有些刚开始看的朋友就很难从头开始跟着学习了。

所以今天大师兄先用了一个版本的保存功能。将当前的版本存档,以便后续的学习者可以回到原来的某一个版本去学习。

我们首先打开应用,在右上角有一个“存档”按钮。

图片

点击这个按钮,输入存档信息,就可以保存当前的状态了。

图片

点击版本记录,可以查看之前保存的版本。

图片

点击相应的版本就可以回溯到原来的状态。非常方便。

图片

界面编辑

先将工程切换到“用户界面”状态。我们原来的主界面只有内容读取并生成标题的功能,显然文案的创作并不局限于此。还有许多功能将在将来加入。这一回我们先做一个主界面,在上面添加一些按钮,这样可以点击按钮切换不同页面。

界面编辑

我们先把原来的页面从主页修改为一个功能页。

在“用户界面”编辑界面的左上角,选择“结构”按钮。

图片

原来的页面使用了默认名“主页”,我们现在将他的名字改为“标题生成页”。

图片

在右边的工具栏中将“页面标题”修改为“标题生成”。并在“导航栏”这里勾选,关闭导航栏。

图片

添加页面

在左上角,点击添加按钮。添加一个新的页面。用之前的方法重新命名为“首页”。

图片

设置主页

点击“设置主页”按钮,可以将这一页设置成主页。(也就是点击应用默认进入的页面)。

图片

好了我们现在有两个页面了。

图片

编辑首页

选中新建的页面(可以点击左上角“首页”,也可以直接在界面中选中页面)

图片

修改标题

在右边的页面中修改“页面标题”为写作助手。

图片

添加“瓷片”按钮

选择“模版”。我们使用这个瓷片的官方模版。

图片

可以看到我们的界面上多了四个“瓷片”按钮。外观还挺不错的。

图片

编辑按钮

我们这次暂时只使用左上角这个按钮。点击标题,在右边的区域修改名字为“标题生成”。

图片

添加事件

与之前的按钮点击添加了工作流调用事件一样,我们在按钮中也要添加跳转页面的功能。

点击按钮组件(注意要选最外框的那个,参考图中虚线范围。)

图片

按照下图顺序添加“页面跳转”事件。

图片

在“选择页面”下拉框中选择“标题生成页”。意思就是点击这个瓷片后,就跳到新的页面。

图片

预览

点击“预览”按钮,就会直接显示新编辑好的应用。来看看效果吧。

大师兄带你刨科技

成品可以使用以下链接访问。

https://www.coze.cn/store/project/7496033564422111286?entity_id=1&bid=6g9nc4me07g16

历史文章检索:

扣子(coze)编程

「极简」扣子(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分析特朗普事件的正确姿势

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值