HarmonyOS 低代碼開發(fā)開發(fā)鴻蒙應(yīng)用UI

早些時候，應(yīng)該都有聽說過網(wǎng)頁三劍客，是一套強大的網(wǎng)頁編輯工具，最初是由美國的 Macromedia 公司開發(fā)出來的。由 Dreamweaver，F(xiàn)ireworks，F(xiàn)lash 三個軟件組成，俗稱網(wǎng)頁三劍客。

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

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

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

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

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

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

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

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

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

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

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

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

⑥調(diào)整 List 組件寬度與高度為 100%。

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

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

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

⑩在 list.js 文件準備好 List 組件需要的數(shù)據(jù)。

?選擇 ListItem 組件，設(shè)置數(shù)據(jù)源。

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

?選擇 Text 組件，設(shè)置文本組件顯示內(nèi)容。

?修改 Text 組件左內(nèi)邊距為 10px。

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

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

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

?創(chuàng)建圖片詳細頁面。

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

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

?拖拉一個 Image 組件。

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

最終效果為：

Gitee 源碼：

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

編輯：jq