??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??

引言

??官方文檔：使用JS語言開發(fā)(低代碼方式)??

??官方文檔：使用低代碼進(jìn)行開發(fā)??

一.低代碼開發(fā)的相關(guān)概念

低代碼開發(fā)：通過UI界面編輯功能進(jìn)行開發(fā)

• 低代碼開發(fā)支持版本：DevEco Studio V2.2 Beta1及更高版本，compileSdkVersion6及以上

支持模板：(DevEco Studio 3.0 Beta2 compileSdkVersion7及以上)

• Empty Ability
• Sport and Health Ability

適用設(shè)備范圍：

• Phone
• Tablet

語言：JS

開發(fā)范圍：

• JS應(yīng)用/服務(wù)
• 服務(wù)的UI界面開發(fā)
• JS服務(wù)卡片開發(fā)

兩種常見方式：

• 在新工程：選擇Super Visual支持低代碼開發(fā)
• 在舊工程：創(chuàng)建JS Visual文件來開發(fā)

低代碼開發(fā)屏幕適配兩種方式：

• 指定designWidth
• 設(shè)置autoDesignWidth為true

低代碼頁面分辨率：1080*2340(P40)，屏幕密度為3

低代碼多語言支持：

• 定義資源文件(i18n文件夾內(nèi)定義)
• 引用資源文件($t方法)

Super Visual：表示使用低代碼開發(fā)功能開發(fā)應(yīng)用/服務(wù)

compileSdkVersion：編譯SDK版本

designWidth：為屏幕邏輯寬度，所有與大小相關(guān)的樣式(例如Width、FontSize)均以designWidth和實(shí)際屏幕寬度的比例進(jìn)行縮放

autoDesignWidth為true：設(shè)置autoDesignWidth為true，此時(shí)designWidth字段將會(huì)被忽略，渲染組件和布局時(shí)按屏幕密度進(jìn)行縮放。

思維導(dǎo)圖

二.低代碼開發(fā)頁面創(chuàng)建

(一)創(chuàng)建工程

(1)工程模板：Empty Ability

(2)開發(fā)模式：Super Visual(低代碼開發(fā)模式)

(3)語言：JS

(4)設(shè)備種類：Phone/Tablet

(二)創(chuàng)建頁面

1.新工程(Empty Ability)創(chuàng)建

創(chuàng)建出來即可使用

2.舊工程創(chuàng)建

(1)刪除工程運(yùn)行默認(rèn)的入口文件夾(index)

(2)創(chuàng)建 JS Visua文件

(3)在page.visual進(jìn)行低代碼開發(fā)

三.低代碼開發(fā)界面詳解

(一)目錄詳解

pages > index > index.js：低代碼頁面的邏輯描述文件

pages > index > index.visual：存儲(chǔ)低代碼頁面的數(shù)據(jù)模型

注意：

(1)如果創(chuàng)建了多個(gè)低代碼頁面，js->default->pages目錄下會(huì)生成多個(gè)頁面文件夾及對(duì)應(yīng)的js文件，supervisual->default->pages會(huì)生成多個(gè)頁面文件夾及對(duì)應(yīng)的visual文件。

(2)需要點(diǎn)擊 按鈕，將JS Visual文件轉(zhuǎn)換為hml和css代碼后才能在模擬器或真機(jī)設(shè)備調(diào)試/運(yùn)行(不可逆過程)

(3)若要在多設(shè)備開發(fā)阿德場(chǎng)景，需設(shè)備切換或模式切換

(4)在創(chuàng)建JS Visual文件時(shí)，如果模塊的compileSdkVersion低于7，則會(huì)自動(dòng)降級(jí)匹配

(二)visual可視化界面詳解

(1)功能區(qū)

(2)Attributes & Styles：屬性樣式欄詳解

四.低代碼開發(fā)的實(shí)例

拖拽、拉伸、設(shè)置樣式、設(shè)置事件

設(shè)置樣式就是在Event選項(xiàng)的對(duì)應(yīng)事件中填好在index.js寫好的函數(shù)名即可

??想了解更多內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??