鴻蒙支持低代碼開發(fā)，無需HTML知識，就可以設計復雜界面

長沙7喜 2021-07-06

展開全文

鴻蒙的最新IDE支持可視化開發(fā)。幾乎不需要編寫一行代碼，就可以設計非常復雜的界面。當然，如果要實現(xiàn)業(yè)務邏輯，還是需要編寫代碼的。所以我們把這些功能稱為低代碼開發(fā)，也就是說，可以讓我們少編寫一些代碼。

本文將詳細介紹如何使用鴻蒙最新的IDE來設計一個復雜的界面。首先啟動IDE，并創(chuàng)建一個JS工程。

由于可視化開發(fā)目前只支持JS，所以我們只能用JS工程。

創(chuàng)建完工程后，找到js中的pages配置，然后在右鍵菜單中點擊New -> JS Visual菜單項，如下圖所示。

這時會彈出一個對話框，如下圖所示。

輸出可視化文件名字，并選中下面的復選框，然后點擊Finish按鈕創(chuàng)建可視化設計器文件。在創(chuàng)建完可視化設計器后，會看到工程樹中多了一個supervisual節(jié)點，該節(jié)點與pages節(jié)點的目錄結構類似，如下圖所示：

如果使用Web相關技術設計界面，有兩種方式。第1種就是傳統(tǒng)的方式，通過hml文件和css文件設計界面，這種方式需要編寫UI代碼。而第2種方式就是本文要講的可視化設計器，也就是page.visual文件。其實該文件是JSON格式的，只是鴻蒙IDE將其解析成可視化形態(tài)。

如果采用第1種方式設計界面，必須包含3個文件：index.js、index.hml和index.css。而如果使用第2種設計界面的方式，就不再有index.hml和index.css文件，取而代之的是page.visual文件。也就是說，如果采用可視化的方式設計界面，只有兩個文件：page.js和page.visual。分別位于pages和supervisual目錄的相應子目錄。

現(xiàn)在雙擊page.visual文件，會看到如下的可視化設計區(qū)域：

在這個區(qū)域共分為4部分：左上角的組件面板、左下角的組件結構樹、中間的可視化設計器以及右側的屬性面板。

現(xiàn)在我們就用這個可視化設計器設計一個列表。首先刪除原有的組件。要想繪制一個列表，需要使用列表組件（List）和列表項組件（ListItem）?，F(xiàn)在首先將列表組件放到設計區(qū)域，將列表組件拉動到與設計界面同樣尺寸，然后拖動一個列表項組件放到列表組件上面。現(xiàn)在點擊列表項組件，在右側的屬性面板中切換到第2個屬性頁，然后設置列表項的高度為100，設置后的效果如下圖所示：

接下來拖動一個圖像組件（Image）和一個文本顯示組件（Text）的列表項組件上?，F(xiàn)在點擊文本顯示組件，在右側的屬性面板中切換到第3個屬性頁，設置文本顯示組件的字體尺寸為20，并讓文本組件顯示一個靜態(tài)的文本，效果由下圖所示：

到現(xiàn)在為止，所有的可視化設計工作全部完成。下一步需要往這個列表里邊添加數(shù)據(jù)。數(shù)據(jù)來源可以有多種方式。本例將采用JS數(shù)組定義在列表中顯示的數(shù)據(jù)。

現(xiàn)在切換到index.js文件，并編寫如下代碼：

export default { data: { data:[ { title:'鴻蒙編程思想', image:'common/images/a.png' }, { title:'Python從菜鳥到高手', image:'common/images/b.png' } ] }

其中data數(shù)組就是我們要顯示的列表組件中的數(shù)據(jù)。在data數(shù)組中有兩個對象，那一個對象定義了兩個屬性：title和image。分別用于將文本和圖像顯示在Text組件與Image組件中。

最后一步就是需要將data數(shù)組與列表組件綁定，現(xiàn)在切換到可視化設計器，點擊列表項組件。在右側的屬性面板中切換到第1個屬性頁，然后將itemData屬性值設置為{{data}}，如下圖所示。其中{{data}}就是在index.js中定義的data數(shù)組?，F(xiàn)代數(shù)據(jù)已經(jīng)和列表項綁定了。最后需要指定在不同的組件顯示不同的數(shù)據(jù)。