收藏這份實(shí)用又有趣的新手指南,零基礎(chǔ)踏上華為云低代碼開(kāi)發(fā)的奇妙旅程。
第Ⅱ章Astro 輕應(yīng)用奇遇——用鼠標(biāo)「拖拽」的開(kāi)發(fā)
不被編程所困,像玩拼圖一樣打造訂購(gòu)系統(tǒng)!
今天,我們用鼠標(biāo)拖拽的方式開(kāi)發(fā)訂餐應(yīng)用。
讀過(guò)本章,你可以同理開(kāi)發(fā)出各異的訂購(gòu)小程序。
繼續(xù) Astro 輕應(yīng)用旅行吧!
第 1 站:點(diǎn)亮「小提燈」
首先做什么呢?明確一些預(yù)期功能,如:菜品列表、供應(yīng)樓層以及上架情況等。
第 2 站:嗨!智慧百寶箱:華為云 Astro
華為 Astro 低代碼是非程序員開(kāi)發(fā)系統(tǒng)的理想工具,你可以調(diào)用海量組件玩出設(shè)計(jì)新花樣。再次登錄,你會(huì)發(fā)現(xiàn)迎接畫(huà)面變了:
點(diǎn)擊「管理運(yùn)行環(huán)境」,這里自動(dòng)保存了開(kāi)發(fā)過(guò)的項(xiàng)目
在「全部應(yīng)用」版塊,點(diǎn)擊上次創(chuàng)建的「訂餐-進(jìn)階版」
選擇「菜品信息」面板,點(diǎn)擊「新建」
當(dāng)默認(rèn)選項(xiàng)有限時(shí),如:想添加「早餐」,但用餐種類僅有「午餐」、「晚餐」,怎么辦呢?
第 3 站:豐富默認(rèn)預(yù)設(shè)給「菜品」加點(diǎn)料
關(guān)閉「新建」,點(diǎn)擊右上角的「編輯應(yīng)用」
上方的「菜品信息」邊,多了一個(gè)紙筆樣的圖標(biāo),點(diǎn)擊它
左側(cè):組件——點(diǎn)擊(或拖拽)即可增加新功能
右側(cè):編輯——修改對(duì)應(yīng)的功能
中間:畫(huà)布——拖拽即可改變布局。簡(jiǎn)單伐!
在畫(huà)布上,鼠標(biāo)單擊第一行,右側(cè)出現(xiàn)編輯選項(xiàng)
在編輯欄「顯示名稱」,修改原先的「用餐種類」為「開(kāi)胃菜」(或任何開(kāi)胃的稱呼)
「排列方式」即該區(qū)域的呈現(xiàn)方式
「選項(xiàng)」可自定義:
名稱(如上截圖中粉框位置,點(diǎn)擊即修改)
選項(xiàng)卡的色彩(單擊選項(xiàng)名稱左邊的彩點(diǎn),即可修改)
增刪選項(xiàng)
關(guān)聯(lián)其他組件(后續(xù)會(huì)細(xì)致講解)
「驗(yàn)證」、「字段屬性」、該區(qū)域「寬度」,按需調(diào)整即可
從左側(cè)拖拽了「地址」組件,經(jīng)過(guò)一番修改,變成了上面的樣子
「選擇布局」可進(jìn)一步修改樣式
單擊「選擇布局」右邊的手機(jī)圖標(biāo),可預(yù)覽手機(jī)端界面
點(diǎn)擊左上方的「保存」
點(diǎn)擊左上頁(yè)眉的「菜品信息」返回基礎(chǔ)模板
菜單變漂亮了!點(diǎn)擊右上方「退出編輯」
再次「新建」,功能也增加了!
下一站,我們進(jìn)一步完善它!直到符合你心目中理想的效果。在華為云 Astro 享受快樂(lè)開(kāi)發(fā),將「天馬行空」落實(shí)成應(yīng)用!
審核編輯 黃宇
-
華為云
+關(guān)注
關(guān)注
3文章
2691瀏覽量
17590
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
華為云 Flexus 云服務(wù)器 X 實(shí)例全面使用操作指南
![<b class='flag-5'>華為</b><b class='flag-5'>云</b> Flexus <b class='flag-5'>云</b>服務(wù)器 X 實(shí)例全面使用操作<b class='flag-5'>指南</b>](https://file1.elecfans.com//web3/M00/04/7A/wKgZPGd0HROAAtjxAAGp1eyEJGY217.png)
華為云 Flexus 云服務(wù)器 X 實(shí)例的快速入門(mén)與配置指南
![<b class='flag-5'>華為</b><b class='flag-5'>云</b> Flexus <b class='flag-5'>云</b>服務(wù)器 X 實(shí)例的快速入門(mén)與配置<b class='flag-5'>指南</b>](https://file1.elecfans.com//web3/M00/05/BB/wKgZPGeEhG-AHnjhAAEM2AGPJC4938.png)
華為 Flexus 云服務(wù)器搭建 Cloudreve 私人網(wǎng)盤(pán)
![<b class='flag-5'>華為</b> Flexus <b class='flag-5'>云</b>服務(wù)器搭建 Cloudreve 私人網(wǎng)盤(pán)](https://file1.elecfans.com//web3/M00/05/38/wKgZPGd99oiAZqIbAAF0sDSK4tM441.png)
Raspberry Pi樹(shù)莓派新手指南
華為舉辦首屆鴻蒙生態(tài)大會(huì)
柔性算力、行業(yè)首創(chuàng)!雙十一華為云 Flexus 云服務(wù)器 X 實(shí)例革新輕量云體驗(yàn)
![柔性算力、行業(yè)首創(chuàng)!雙十一<b class='flag-5'>華為</b><b class='flag-5'>云</b> Flexus <b class='flag-5'>云</b>服務(wù)器 X 實(shí)例革新<b class='flag-5'>輕</b>量<b class='flag-5'>云</b>體驗(yàn)](https://file1.elecfans.com//web2/M00/0B/B2/wKgZomc2x5CAJx6JAAEbO5GntQw903.png)
海外輕量云服務(wù)器是什么意思?如何使用
睿呈時(shí)代基于華為云 Astro 發(fā)布“數(shù)字孿生平臺(tái) + 政企智慧應(yīng)用”全方案
![睿呈時(shí)代基于<b class='flag-5'>華為</b><b class='flag-5'>云</b> <b class='flag-5'>Astro</b> 發(fā)布“數(shù)字孿生平臺(tái) + 政企智慧應(yīng)用”全方案](https://file1.elecfans.com//web2/M00/09/17/wKgaomb1hn2AHEkqAAqZGiAbYS0639.png)
海外輕量云服務(wù)器是什么
華為云低代碼 AstroZero 技巧教學(xué) 2:輪播組件的魅力 玩轉(zhuǎn)視覺(jué)營(yíng)銷
![<b class='flag-5'>華為</b><b class='flag-5'>云</b>低代碼 AstroZero 技巧教學(xué) 2:輪播組件的魅力 玩轉(zhuǎn)視覺(jué)營(yíng)銷](https://file1.elecfans.com//web2/M00/07/3E/wKgaombj9_OANLAwAAX-0P-_LBg061.png)
美國(guó)輕量云服務(wù)器是什么?和云服務(wù)器有哪些區(qū)別
請(qǐng)問(wèn)ESP是否支持LiteOS+華為云IOT+AT的方式?
華為云 Astro Zero 低代碼平臺(tái)案例:小、輕、快、準(zhǔn)助力銷售作戰(zhàn)數(shù)字化經(jīng)營(yíng)
![<b class='flag-5'>華為</b><b class='flag-5'>云</b> <b class='flag-5'>Astro</b> Zero 低代碼平臺(tái)案例:小、<b class='flag-5'>輕</b>、快、準(zhǔn)助力銷售作戰(zhàn)數(shù)字化經(jīng)營(yíng)](https://file1.elecfans.com//web2/M00/FB/39/wKgZomaP2BGAZW3pAAIhWI39EWM563.png)
華為云 Astro 低代碼平臺(tái)開(kāi)啟 AI 敏捷組裝時(shí)代,探索低代碼創(chuàng)新無(wú)限可能
![<b class='flag-5'>華為</b><b class='flag-5'>云</b> <b class='flag-5'>Astro</b> 低代碼平臺(tái)開(kāi)啟 AI 敏捷組裝時(shí)代,探索低代碼創(chuàng)新無(wú)限可能](https://file1.elecfans.com//web2/M00/FB/1E/wKgaomaMvASAegeVAAOKUA3d4WU702.png)
評(píng)論