基于HarmonyOS低代碼開(kāi)發(fā)的學(xué)習(xí)與應(yīng)用

作者：Der_帶魚(yú) 2022-02-21 15:25:47

系統(tǒng) OpenHarmony

本篇帶給大家基于HarmonyOS低代碼開(kāi)發(fā)的學(xué)習(xí)與應(yīng)用，希望對(duì)你有所幫助！

??想了解更多內(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ò)程)