使用低代碼開發(fā)應(yīng)用或服務(wù)有以下兩種開發(fā)方式：

• 創(chuàng)建一個支持低代碼開發(fā)的新工程，開發(fā)應(yīng)用或服務(wù)的UI界面。
• 在已有工程中，創(chuàng)建Visual文件來開發(fā)應(yīng)用或服務(wù)的UI界面。

ArkTS工程和JS工程使用低代碼的步驟相同，接下來以JS工程為例分別講解這兩種開發(fā)方式。

創(chuàng)建新工程支持低代碼開發(fā)

在工程模板中，提供了低代碼開發(fā)的工程模板，您可以直接選擇一個支持低代碼開發(fā)的工程模板來開發(fā)應(yīng)用或服務(wù)的UI界面。

NOTE

該功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必須為7或以上。ArkTS低代碼要求compileSdkVersion必須為8或以上。

接下來我們以創(chuàng)建一個Empty Ability工程模板為示例進行說明。

1. 打開DevEco Studio，創(chuàng)建一個新的工程，選擇Empty Ability模板。

2.打開Enable Super Visual，表示使用低代碼開發(fā)功能開發(fā)應(yīng)用/服務(wù)。單擊Finish等待工程同步完成。

同步完成后，工程目錄中自動生成低代碼目錄結(jié)構(gòu)。

pages > index > index.js：低代碼頁面的邏輯描述文件，定義了頁面里所用到的所有的邏輯關(guān)系，比如數(shù)據(jù)、事件等，詳情請參考JS語法參考。如果創(chuàng)建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應(yīng)的js文件。

NOTE

使用低代碼頁面開發(fā)時，其關(guān)聯(lián)js文件的同級目錄中不能包含hml和css頁面，例如上圖中的js > MainAbility > pages > index目錄下不能包含hml與css文件，可能出現(xiàn)報錯。

• pages > index > index.visual：visual文件存儲低代碼頁面的數(shù)據(jù)模型，雙擊該文件即可打開低代碼頁面，進行可視化開發(fā)設(shè)計。如果創(chuàng)建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應(yīng)的visual文件。

3.打開“index.visual”文件，即可進行頁面的可視化布局設(shè)計與開發(fā)。

NOTE

使用低代碼開發(fā)界面過程中，如果界面需要使用到其它暫不支持可視化布局的控件時，可以在低代碼界面開發(fā)完成后，單擊按鈕，將低代碼界面轉(zhuǎn)換為hml和css代碼。注意，代碼轉(zhuǎn)換操作會刪除visual文件及其父目錄，且為不可逆過程，代碼轉(zhuǎn)換后不能通過hml/css文件反向生成visual文件。

多設(shè)備開發(fā)的場景，可以單擊界面畫布右上角設(shè)備/模式切換按鈕，進行設(shè)備切換或模式切換。其中，單擊按鈕，切換到Media query模式，可以針對不同設(shè)備和屏幕狀態(tài)設(shè)置專屬的樣式和屬性值，如下圖，當(dāng)前模式僅針對P40豎屏狀態(tài)有效

在已有工程中添加Visual支持低代碼開發(fā)

在已有的HarmonyOS工程中，可以通過創(chuàng)建Visual文件的方式，使用低代碼開發(fā)應(yīng)用或服務(wù)的UI界面，要求compileSdkVersion必須為7或以上。ArkTS低代碼要求compileSdkVersion必須為8或以上。

1. 在打開的工程中，選中模塊的pages文件夾，單擊鼠標(biāo)右鍵，選擇New > Visual > Page。

2.在彈出的對話框中，輸入Visual name，單擊Finish。創(chuàng)建Visual后，會在工程中自動生成低代碼的目錄結(jié)構(gòu)，如下圖所示：

pages > page > page.js：低代碼頁面的邏輯描述文件，定義了頁面里所用到的所有的邏輯關(guān)系，比如數(shù)據(jù)、事件等，詳情請參考JS語法參考。如果創(chuàng)建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應(yīng)的js文件。

NOTE

使用低代碼頁面開發(fā)時，其關(guān)聯(lián)js文件的同級目錄中不能包含hml和css頁面，例如上圖中的js > MainAbility > pages > page目錄下不能包含hml與css文件，否則可能報錯。

• pages > page > page.visual：visual文件存儲低代碼頁面的數(shù)據(jù)模型，雙擊該文件即可打開低代碼頁面，進行可視化開發(fā)設(shè)計。如果創(chuàng)建了多個低代碼頁面，則pages目錄下會生成多個頁面文件夾及對應(yīng)的visual文件。

NOTE

DevEco Studio預(yù)置了JS Visual模板，該模板對應(yīng)的SDK版本為API 7。因此，在創(chuàng)建JS Visual文件時，如果模塊的compileSdkVersion低于7，則會對新建的JS Visual文件對應(yīng)的SDK版本進行降級處理，使其與模塊對應(yīng)的SDK版本保持一致。

不建議通過文本編輯的方式更改visual文件，否則，可能導(dǎo)致不能正常使用低代碼功能。

3.打開“page.visual”文件，即可進行頁面的可視化布局設(shè)計與開發(fā)。

NOTE

使用低代碼開發(fā)界面過程中，如果界面需要使用到其它暫不支持可視化布局的控件時，可以在低代碼界面開發(fā)完成后，單擊按鈕，將低代碼界面轉(zhuǎn)換為hml和css代碼。注意，代碼轉(zhuǎn)換操作會刪除visual文件及其父目錄，且為不可逆過程，代碼轉(zhuǎn)換后不能通過hml/css文件反向生成visual文件。

多設(shè)備開發(fā)的場景，可以單擊界面畫布右上角設(shè)備/模式切換按鈕，進行設(shè)備切換或模式切換。其中，單擊按鈕，切換到media query模式，可以為組件設(shè)置不同的樣式和屬性。當(dāng)前media query模式僅針對不同設(shè)備類型和不同屏幕狀態(tài)（橫屏豎屏）有效。

為了能夠讓大家跟上互聯(lián)網(wǎng)時代的技術(shù)迭代，在這里跟大家分享一下我自己近期學(xué)習(xí)心得以及參考網(wǎng)上資料整理出的一份最新版的鴻蒙學(xué)習(xí)提升資料，有需要的小伙伴自行領(lǐng)取，限時開源，先到先得~~~~

領(lǐng)取以下高清學(xué)習(xí)路線原圖請點擊→《鴻蒙全套學(xué)習(xí)指南》純血鴻蒙HarmonyOS基礎(chǔ)技能學(xué)習(xí)路線圖

領(lǐng)取以上完整高清學(xué)習(xí)路線圖，請點擊→《鴻蒙 (Harmony OS)開發(fā)學(xué)習(xí)手冊》小編自己整理的部分學(xué)習(xí)資料（包含有高清視頻、開發(fā)文檔、電子書籍等）

以上分享的學(xué)習(xí)路線都適合哪些人跟著學(xué)習(xí)？
-應(yīng)屆生/計算機專業(yè)
通過學(xué)習(xí)鴻蒙新興技術(shù)，入行互聯(lián)網(wǎng)，未來高起點就業(yè)。
-0基礎(chǔ)轉(zhuǎn)行
提前布局新方向，抓住風(fēng)口，自我提升，獲得更多就業(yè)機會。
-技術(shù)提升/進階跳槽
發(fā)展瓶頸期，提升職場競爭力，快速掌握鴻蒙技術(shù)，享受藍(lán)海紅利。

最后

鴻蒙開發(fā)學(xué)習(xí)是一個系統(tǒng)化的過程，從基礎(chǔ)知識的學(xué)習(xí)到實戰(zhàn)技能的錘煉，再到對前沿技術(shù)的探索，每一環(huán)節(jié)都至關(guān)重要。希望這份教程資料能幫助您快速入門并在鴻蒙開發(fā)之路上步步攀升，成就一番事業(yè)。讓我們一起乘風(fēng)破浪，擁抱鴻蒙生態(tài)的廣闊未來！

如果你覺得這篇內(nèi)容對你有幫助，我想麻煩大家動動小手給我：點贊，轉(zhuǎn)發(fā)，有你們的 『點贊和評論』，才是我創(chuàng)造的動力。

關(guān)注我，同時可以期待后續(xù)文章ing，不定期分享原創(chuàng)知識。

想要獲取更多完整鴻蒙最新VIP學(xué)習(xí)資料，請點擊→《鴻蒙基礎(chǔ)入門學(xué)習(xí)指南》