早些時(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è)軟件組成，俗稱網(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)畫。

其實(shí)“所見(jiàn)即所得”的開(kāi)發(fā)工具，很久之前就有了，這里為什么要提一下呢？

因?yàn)樗_實(shí)可以幫助新手快速入門，作為新手如果想開(kāi)發(fā)一個(gè)簡(jiǎn)單的應(yīng)用，就要先知道各組件的屬性和事件，從而使新手們的興趣，一下子就變成了有些難以下手。

這時(shí)如果使用“所見(jiàn)即所得”的開(kāi)發(fā)界面，只要輕松拖拉一下組件，修改一下組件各屬性值，就可以立刻看到修改后的效果，從而不用寫任何一行代碼就可以把自己想要的界面拖拉，設(shè)置出來(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 組件到畫布上。

⑥調(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 組件到畫面上，設(shè)置寬度和高度，文本對(duì)齊方式。

?調(diào)整最外層 div 的對(duì)齊方式。

?拖拉一個(gè) Image 組件。

?要到導(dǎo)出 hml 和 css 文件的時(shí)候了。

最終效果為：

Gitee 源碼：

https://gitee.com/army16_harmony/low-code-one.git

編輯：jq