手把手教你低代碼開(kāi)發(fā)鴻蒙應(yīng)用UI
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
早些時(shí)候，應(yīng)該都有聽(tīng)說(shuō)過(guò)網(wǎng)頁(yè)三劍客，是一套強(qiáng)大的網(wǎng)頁(yè)編輯工具，最初是由美國(guó)的Macromedia公司開(kāi)發(fā)出來(lái)的。由Dreamweaver，F(xiàn)ireworks，F(xiàn)lash三個(gè)軟件組成，俗稱(chēng)網(wǎng)頁(yè)三劍客。
Dreamweaver 是一個(gè)“所見(jiàn)即所得”的可視化網(wǎng)站開(kāi)發(fā)工具，主要用于動(dòng)態(tài)網(wǎng)頁(yè)和靜態(tài)網(wǎng)頁(yè)的開(kāi)發(fā);Fireworks主要是用于對(duì)網(wǎng)頁(yè)上常用的jpg、gif的制作和處理，也可用于制作網(wǎng)頁(yè)布局;Flash主要用來(lái)制作動(dòng)畫(huà)。
其實(shí)“所見(jiàn)即所得”的開(kāi)發(fā)工具，很久之前就有了，這里為什么要提一下呢?因?yàn)樗_實(shí)可以幫助新手快速入門(mén)，作為新手如果想開(kāi)發(fā)一個(gè)簡(jiǎn)單的應(yīng)用，就要先知道各組件的屬性和事件，從而使新手們的興趣，一下子就變成了有些難以下手，這時(shí)如果使用“所見(jiàn)即所得”的開(kāi)發(fā)界面，只要輕松拖拉一下組件，修改一下組件各屬性值，就可以立刻看到修改后的效果，從而不用寫(xiě)任何一行代碼就可以把自己想要的界面拖拉，設(shè)置出來(lái)了，只要踏出了第一步，下來(lái)我們就可以通過(guò)查看生成的代碼，從中就可以在拖拉和代碼之間學(xué)習(xí)，而不是一開(kāi)始就從代碼上學(xué)習(xí)，這樣就大大給新手們添加了學(xué)習(xí)興趣。
介紹了以前的歷史，現(xiàn)在說(shuō)說(shuō)HUAWEI DevEco Studio工具，也是有“所見(jiàn)即所得”的低代碼開(kāi)發(fā)功能，HarmonyOS低代碼開(kāi)發(fā)方式，具有豐富的UI界面編輯功能，遵循HarmonyOS JS開(kāi)發(fā)規(guī)范，通過(guò)可視化界面開(kāi)發(fā)方式快速構(gòu)建布局，可有效降低用戶的時(shí)間成本和提升用戶構(gòu)建UI界面的效率。
打開(kāi)DevEco Studio，創(chuàng)建一個(gè)新工程，模板選擇支持Phone的模板，創(chuàng)建空白JS項(xiàng)目。
這里選Application桌面, 低代碼開(kāi)發(fā)功能適用于Phone和Tablet設(shè)備的HarmonyOS應(yīng)用、原子化服務(wù)，目前只支持JS語(yǔ)言，且compileSdkVersion必須為6。
選中模塊的pages文件夾，單擊鼠標(biāo)右鍵，選擇New > JS Visual。
這里取名為list，用來(lái)展示圖片列表。
拖拉一個(gè)List組件到畫(huà)布上。
調(diào)整List組件寬度與高度為100%。
拖拉一個(gè)ListItem組件到List組件里, 并設(shè)置寬度為100%, 高度為100px。
拖拉一個(gè)Image組件到ListItem組件里, 并設(shè)置寬度為200px, 高度為100%。
拖拉Text組件到ListItem組件里, 并在Image組件右邊, 設(shè)置寬度為100%, 高度100%。
在list.js文件準(zhǔn)備好List組件需要的數(shù)據(jù)。
選擇ListItem組件，設(shè)置數(shù)據(jù)源。
選擇Image組件, 設(shè)置圖片源為$item.img, 修改圖片寬度為200px, ObjectFit: contain。
選擇Text組件, 設(shè)置文本組件顯示內(nèi)容。
修改Text組件左內(nèi)邊距為10px。
大慨效果出來(lái)了, 但還是覺(jué)得不夠靚仔, 比如每行靠得太近了, 還有在每行下面加上分隔線就更好看了。
界面就拖拉好了, 那下來(lái)就把這個(gè)界面顯示到項(xiàng)目中, 先把界面轉(zhuǎn)換為hml和css文件。
導(dǎo)出hml和css文件后, 文件名為list, 預(yù)覽器不給通過(guò),后來(lái)修改文件名就可以了。
創(chuàng)建圖片詳細(xì)頁(yè)面。
拖拉一個(gè)Text組件到畫(huà)面上, 設(shè)置寬度和高度, 文本對(duì)齊方式。
調(diào)整最外層div的對(duì)齊方式。
拖拉一個(gè)Image組件。
要到導(dǎo)出hml和css文件的時(shí)候了。
最終效果為：
B站：https://www.bilibili.com/video/BV1Ag411N7T8/
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
