手把手教你低代碼開發(fā)鴻蒙應用UI
早些時候，應該都有聽說過網(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ā)一個簡單的應用，就要先知道各組件的屬性和事件，從而使新手們的興趣，一下子就變成了有些難以下手，這時如果使用“所見即所得”的開發(fā)界面，只要輕松拖拉一下組件，修改一下組件各屬性值，就可以立刻看到修改后的效果，從而不用寫任何一行代碼就可以把自己想要的界面拖拉，設置出來了，只要踏出了第一步，下來我們就可以通過查看生成的代碼，從中就可以在拖拉和代碼之間學習，而不是一開始就從代碼上學習，這樣就大大給新手們添加了學習興趣。
介紹了以前的歷史，現(xiàn)在說說HUAWEI DevEco Studio工具，也是有“所見即所得”的低代碼開發(fā)功能，HarmonyOS低代碼開發(fā)方式，具有豐富的UI界面編輯功能，遵循HarmonyOS JS開發(fā)規(guī)范，通過可視化界面開發(fā)方式快速構建布局，可有效降低用戶的時間成本和提升用戶構建UI界面的效率。
打開DevEco Studio，創(chuàng)建一個新工程，模板選擇支持Phone的模板，創(chuàng)建空白JS項目。
這里選Application桌面, 低代碼開發(fā)功能適用于Phone和Tablet設備的HarmonyOS應用、原子化服務，目前只支持JS語言，且compileSdkVersion必須為6。
選中模塊的pages文件夾，單擊鼠標右鍵，選擇New > JS Visual。
這里取名為list，用來展示圖片列表。
拖拉一個List組件到畫布上。
調(diào)整List組件寬度與高度為100%。
拖拉一個ListItem組件到List組件里, 并設置寬度為100%, 高度為100px。
拖拉一個Image組件到ListItem組件里, 并設置寬度為200px, 高度為100%。
拖拉Text組件到ListItem組件里, 并在Image組件右邊, 設置寬度為100%, 高度100%。
在list.js文件準備好List組件需要的數(shù)據(jù)。
選擇ListItem組件，設置數(shù)據(jù)源。
選擇Image組件, 設置圖片源為$item.img, 修改圖片寬度為200px, ObjectFit: contain。
選擇Text組件, 設置文本組件顯示內(nèi)容。
修改Text組件左內(nèi)邊距為10px。
大慨效果出來了, 但還是覺得不夠靚仔, 比如每行靠得太近了, 還有在每行下面加上分隔線就更好看了。
界面就拖拉好了, 那下來就把這個界面顯示到項目中, 先把界面轉(zhuǎn)換為hml和css文件。
導出hml和css文件后, 文件名為list, 預覽器不給通過,后來修改文件名就可以了。
創(chuàng)建圖片詳細頁面。
拖拉一個Text組件到畫面上, 設置寬度和高度, 文本對齊方式。
調(diào)整最外層div的對齊方式。
拖拉一個Image組件。
要到導出hml和css文件的時候了。
最終效果為：
B站：https://www.bilibili.com/video/BV1Ag411N7T8/
