绘出「星辰大海」:华为云Astro轻应用新手指南-第二章

第2章 Astro轻应用奇遇------用鼠标「拖拽」的开发

不被编程所困,像玩拼图一样打造订购系统!

今天,我们用鼠标拖拽的方式开发订餐应用。

读过本章,你可以同理开发出各异的订购小程序。

继续Astro轻应用旅行吧!

第1站:点亮「小提灯」

首先做什么呢?明确一些预期功能,如:菜品列表、供应楼层以及上架情况等。

第2站:嗨!智慧百宝箱:华为云Astro

华为Astro低代码是非程序员开发系统的理想工具,你可以调用海量组件玩出设计新花样。再次登录,你会发现迎接画面变了:

  • 点击「管理运行环境」,这里自动保存了开发过的项目
  • 在「全部应用」版块,点击上次创建的「订餐-进阶版」
  • 选择「菜品信息」面板,点击「新建」
  • 当默认选项有限时,如:想添加「早餐」,但用餐种类仅有「午餐」、「晚餐」,怎么办呢?

第3站: 丰富默认预设 给「菜品」加点料

  • 关闭「新建」,点击右上角的「编辑应用」
  • 上方的「菜品信息」边,多了一个纸笔样的图标,点击它
  • 左侧:组件------点击(或拖拽)即可增加新功能
  • 右侧:编辑------修改对应的功能
  • 中间:画布------拖拽即可改变布局。简单伐!
  • 在画布上,鼠标单击第一行,右侧出现编辑选项
  • 在编辑栏「显示名称」,修改原先的「用餐种类」为「开胃菜」(或任何开胃的称呼)
  • 「排列方式」即该区域的呈现方式
  • 「选项」可自定义:
    • 名称(如上截图中粉框位置,点击即修改)
    • 选项卡的色彩(单击选项名称左边的彩点,即可修改)
    • 增删选项
    • 关联其他组件(后续会细致讲解)
  • 「验证」、「字段属性」、该区域「宽度」,按需调整即可
  • 从左侧拖拽了「地址」组件,经过一番修改,变成了上面的样子
  • 「选择布局」可进一步修改样式
  • 单击「选择布局」右边的手机图标,可预览手机端界面
  • 点击左上方的「保存」
  • 点击左上页眉的「菜品信息 」返回基础模板
  • 菜单变漂亮了!点击右上方「退出编辑」
  • 再次「新建」,功能也增加了!

下一站,我们进一步完善它!直到符合你心目中理想的效果。在华为云Astro享受快乐开发,将「天马行空」落实成应用!


相关教程第一章请戳>>https://bbs.huaweicloud.com/blogs/406188

相关推荐
Just_Paranoid12 小时前
华为云Flexus+DeepSeek征文|基于Dify构建音视频内容转录工作流
华为云·音视频·dify·maas·deepseek·flexusx
小明说Java12 小时前
华为云Flexus+DeepSeek征文 | 基于华为云Flexus X实例部署Dify平台构建企业行政助手的可用性研究
华为云·maas·deepseek·flexus
降世神童20 小时前
华为云Flexus+DeepSeek征文| 使用华为云CCE容器部署Dify-LLM高可用方案的验证与测试
运维·华为云·aigc
安 当 加 密20 小时前
多云密钥统一管理实战:CKMS对接阿里云/华为云密钥服务
数据库·阿里云·华为云
降世神童20 小时前
华为云Flexus+DeepSeek征文| 基于华为云Dify-LLM高可用平台开发运维故障处理智能体
运维·华为云·aigc
cooldream200920 小时前
华为云Flexus+DeepSeek征文|利用华为云一键部署 Dify 平台并接入 DeepSeek 大模型,构建长篇文章生成助手
大模型·华为云·dify
Linux猿20 小时前
华为云Flexus+DeepSeek征文|基于华为云Flexus云服务的Dify 快速构建联网搜索助手
华为云·华为云服务·华为云征文·联网搜索助手·华为云flexus云服务
江湖有缘20 小时前
华为云Flexus+DeepSeek征文|基于 Dify-LLM 构建网站智能客服助手的实践探索
华为云
AI生存日记1 天前
AI 日报:阿里、字节等企业密集发布新技术,覆盖语音、图像与药物研发等领域
人工智能·华为云·语音识别·open ai大模型
lgbisha11 天前
华为云Flexus+DeepSeek征文|体验华为云ModelArts快速搭建Dify-LLM应用开发平台并创建自己的AI写作神器
人工智能·ai·语言模型·自然语言处理·华为云·ai写作