早些時候，應該都有聽說過網頁三劍客，是一套強大的網頁編輯工具，最初是由美國的 Macromedia 公司開發出來的。由 Dreamweaver，Fireworks，Flash 三個軟件組成，俗稱網頁三劍客。

Dreamweaver 是一個“所見即所得”的可視化網站開發工具，主要用于動態網頁和靜態網頁的開發；Fireworks 主要是用于對網頁上常用的 jpg、gif 的制作和處理，也可用于制作網頁布局；Flash 主要用來制作動畫。

其實“所見即所得”的開發工具，很久之前就有了，這里為什么要提一下呢？

因為它確實可以幫助新手快速入門，作為新手如果想開發一個簡單的應用，就要先知道各組件的屬性和事件，從而使新手們的興趣，一下子就變成了有些難以下手。

這時如果使用“所見即所得”的開發界面，只要輕松拖拉一下組件，修改一下組件各屬性值，就可以立刻看到修改后的效果，從而不用寫任何一行代碼就可以把自己想要的界面拖拉，設置出來了。

只要踏出了第一步，下面我們就可以通過查看生成的代碼，從中就可以在拖拉和代碼之間學習，而不是一開始就從代碼上學習，這樣就大大給新手們添加了學習興趣。

介紹了以前的歷史，現在說說 HUAWEI DevEco Studio 工具，也是有“所見即所得”的低代碼開發功能。

HarmonyOS 低代碼開發方式，具有豐富的 UI 界面編輯功能，遵循 HarmonyOS JS 開發規范，通過可視化界面開發方式快速構建布局，可有效降低用戶的時間成本和提升用戶構建 UI 界面的效率。

①打開 DevEco Studio，創建一個新工程，模板選擇支持 Phone 的模板，創建空白 JS 項目。

②這里選 Application 桌面， 低代碼開發功能適用于 Phone 和 Tablet 設備的 HarmonyOS 應用、原子化服務，目前只支持 JS 語言，且 compileSdkVersion 必須為 6。

③選中模塊的 pages 文件夾，單擊鼠標右鍵，選擇 New→JS Visual。

④這里取名為 list，用來展示圖片列表。

⑤拖拉一個 List 組件到畫布上。

⑥調整 List 組件寬度與高度為 100%。

⑦拖拉一個 ListItem 組件到 List 組件里，并設置寬度為 100%，高度為 100px。

⑧拖拉一個 Image 組件到 ListItem 組件里，并設置寬度為 200px，高度為100%。

⑨拖拉 Text 組件到 ListItem 組件里，并在 Image 組件右邊，設置寬度為 100%，高度100%。

⑩在 list.js 文件準備好 List 組件需要的數據。

?選擇 ListItem 組件，設置數據源。

?選擇 Image 組件，設置圖片源為 $item.img，修改圖片寬度為 200px，ObjectFit： contain。

?選擇 Text 組件，設置文本組件顯示內容。

?修改 Text 組件左內邊距為 10px。

?大慨效果出來了，但還是覺得不夠靚仔，比如每行靠得太近了，還有在每行下面加上分隔線就更好看了。

?界面就拖拉好了，那下來就把這個界面顯示到項目中，先把界面轉換為 hml 和 css 文件。

?導出 hml 和 css 文件后，文件名為 list，預覽器不給通過，后來修改文件名就可以了。

?創建圖片詳細頁面。

?拖拉一個 Text 組件到畫面上，設置寬度和高度，文本對齊方式。

?調整最外層 div 的對齊方式。

?拖拉一個 Image 組件。

?要到導出 hml 和 css 文件的時候了。

最終效果為：

Gitee 源碼：

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

編輯：jq