基于HarmonyOS低代碼開(kāi)發(fā)的學(xué)習(xí)與應(yīng)用
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
引言
??官方文檔：使用JS語(yǔ)言開(kāi)發(fā)(低代碼方式)??
??官方文檔：使用低代碼進(jìn)行開(kāi)發(fā)??
一.低代碼開(kāi)發(fā)的相關(guān)概念
低代碼開(kāi)發(fā)：通過(guò)UI界面編輯功能進(jìn)行開(kāi)發(fā)
- 低代碼開(kāi)發(fā)支持版本：DevEco Studio V2.2 Beta1及更高版本，compileSdkVersion6及以上
支持模板：(DevEco Studio 3.0 Beta2 compileSdkVersion7及以上)
- Empty Ability
- Sport and Health Ability
適用設(shè)備范圍：
- Phone
- Tablet
語(yǔ)言：JS
開(kāi)發(fā)范圍：
- JS應(yīng)用/服務(wù)
- 服務(wù)的UI界面開(kāi)發(fā)
- JS服務(wù)卡片開(kāi)發(fā)
兩種常見(jiàn)方式：
- 在新工程：選擇Super Visual支持低代碼開(kāi)發(fā)
- 在舊工程：創(chuàng)建JS Visual文件來(lái)開(kāi)發(fā)
低代碼開(kāi)發(fā)屏幕適配兩種方式：
- 指定designWidth
- 設(shè)置autoDesignWidth為true
低代碼頁(yè)面分辨率：1080*2340(P40)，屏幕密度為3
低代碼多語(yǔ)言支持：
- 定義資源文件(i18n文件夾內(nèi)定義)
- 引用資源文件($t方法)
Super Visual：表示使用低代碼開(kāi)發(fā)功能開(kāi)發(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)圖
二.低代碼開(kāi)發(fā)頁(yè)面創(chuàng)建
(一)創(chuàng)建工程
(1)工程模板：Empty Ability
(2)開(kāi)發(fā)模式：Super Visual(低代碼開(kāi)發(fā)模式)
(3)語(yǔ)言：JS
(4)設(shè)備種類(lèi)：Phone/Tablet
(二)創(chuàng)建頁(yè)面
1.新工程(Empty Ability)創(chuàng)建
創(chuàng)建出來(lái)即可使用
2.舊工程創(chuàng)建
(1)刪除工程運(yùn)行默認(rèn)的入口文件夾(index)
(2)創(chuàng)建 JS Visua文件
(3)在page.visual進(jìn)行低代碼開(kāi)發(fā)
三.低代碼開(kāi)發(fā)界面詳解
(一)目錄詳解
pages > index > index.js：低代碼頁(yè)面的邏輯描述文件
pages > index > index.visual：存儲(chǔ)低代碼頁(yè)面的數(shù)據(jù)模型
注意：
(1)如果創(chuàng)建了多個(gè)低代碼頁(yè)面，js->default->pages目錄下會(huì)生成多個(gè)頁(yè)面文件夾及對(duì)應(yīng)的js文件，supervisual->default->pages會(huì)生成多個(gè)頁(yè)面文件夾及對(duì)應(yīng)的visual文件。
(2)需要點(diǎn)擊
按鈕，將JS Visual文件轉(zhuǎn)換為hml和css代碼后才能在模擬器或真機(jī)設(shè)備調(diào)試/運(yùn)行(不可逆過(guò)程)
(3)若要在多設(shè)備開(kāi)發(fā)阿德場(chǎng)景，需設(shè)備切換或模式切換
(4)在創(chuàng)建JS Visual文件時(shí)，如果模塊的compileSdkVersion低于7，則會(huì)自動(dòng)降級(jí)匹配
(二)visual可視化界面詳解
(1)功能區(qū)
(2)Attributes & Styles：屬性樣式欄詳解
四.低代碼開(kāi)發(fā)的實(shí)例
拖拽、拉伸、設(shè)置樣式、設(shè)置事件
設(shè)置樣式就是在Event選項(xiàng)的對(duì)應(yīng)事件中填好在index.js寫(xiě)好的函數(shù)名即可
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
??https://harmonyos.51cto.com??
