HarmonyOS—低代碼開發(fā)中使用自定義組件（自定義diy代碼）
開發(fā)者在使用DevEco Studio的低代碼功能進行可視化開發(fā)時，可以通過自定義組件功能自由封裝業(yè)務(wù)邏輯類組件，實現(xiàn)能力復(fù)用，降低開發(fā)及維護成本。
NOTE
該功能在DevEco Studio 3.1 Beta2及更高版本中支持，且創(chuàng)建的工程必須是compileSdkVersion為8或以上的ArkTS工程。
自定義組件
由已有的基礎(chǔ)組件（或組合）創(chuàng)建自定義組件
- 右擊基礎(chǔ)組件（或組件組合），在彈出的菜單中選擇Create Custom Component。
2.在彈出的對話框中輸入自定義組件名稱，然后單擊OK。
自定義組件創(chuàng)建完成后，DevEco Studio將會自動生成.visual和.ets文件，Stage模型和FA模型下生成的文件路徑有所區(qū)別：
- Stage模型：
- .visual文件：src/main/supervisual/page/xxx.visual
- .ets文件：src/main/ets/page/xxx.ets
- FA模型：
- .visual文件：src/main/supervisual/xxxAbility/common/xxx.visual
- .ets文件：src/main/ets/xxxAbility/common/xxx.ets
3.自定義組件創(chuàng)建完成后，DevEco Studio將自動打開自定義組件設(shè)計界面，開發(fā)者可以在設(shè)計界面編輯自定義組件的屬性、事件和布局。
新建一個自定義組件
- 選中支持的目錄，選擇File > New > Visual > Component，或者右擊目錄，選擇New > Visual > Component。
其中支持新建自定義組件的目錄，Stage模型和FA模型有所區(qū)別：
- Stage模型：切換到Ohos視圖后的ets目錄及下屬目錄（不包含test目錄）。
- FA模型：切換到Ohos視圖后的Page類型Ability目錄及下屬目錄。
2.在彈出的New Visual Component對話框中，輸入自定義組件名稱，單擊Finish。
3.自定義組件創(chuàng)建完成后，DevEco Studio將自動打開自定義組件設(shè)計界面，開發(fā)者可以在設(shè)計界面編輯自定義組件的屬性、事件和布局。
使用自定義組件
自定義組件創(chuàng)建后，開發(fā)者可以直接在應(yīng)用設(shè)計界面的Custom頁簽查看到已經(jīng)創(chuàng)建的自定義組件，并可以直接拖拽到畫布中使用，另外開發(fā)者也可以在.ets代碼頁面直接導(dǎo)入并使用自定義組件。
在.ets代碼頁面使用自定義組件示例如下所示：
import ImgButton from '../CustomComponents/ImgButton'@Entry@Componentstruct Index { @State message: string = 'Hello World' build() { Column(){ ImgButton() } .width('100%') .height('100%') }}
自定義屬性
開發(fā)者可以為自定義組件設(shè)置自定義屬性。
- 在自定義組件的.ets文件中定義變量。
例如：
@Preview@Componentexport default struct ImgButton { @State customLable:string = 'This is my comp' build() { }}
2.在使用自定義組件的設(shè)計界面中，選擇該自定義組件，在屬性欄中將顯示自定義屬性。開發(fā)者可自行設(shè)置屬性值，設(shè)置屬性值后可同步修改自定義組件顯示效果。
自定義事件
開發(fā)者可以為自定義組件設(shè)置自定義事件。
- 在自定義組件的.ets文件中定義事件函數(shù)。
例如：
@Preview@Componentexport default struct ImgButton { @State customLable:string = 'This is my comp' customKeyEvent:(event:KeyEvent) => void =(event:KeyEvent):void =>{ console.log("customKeyEvent") } build() { }}
2.在使用自定義組件的設(shè)計界面中，選擇該自定義組件，在事件欄中將顯示自定義事件。開發(fā)者可自行綁定事件函數(shù)。
那么要想成為一名鴻蒙高級開發(fā)，以上知識點是必須要掌握的，除此之外，還需要掌握一些鴻蒙應(yīng)用開發(fā)相關(guān)的一些技術(shù)，需要我們共同去探索。
為了能夠讓大家跟上互聯(lián)網(wǎng)時代的技術(shù)迭代，在這里我特邀了幾位行業(yè)大佬整理出一份最新版的鴻蒙學(xué)習(xí)提升資料，有需要的小伙伴自行領(lǐng)取，限時開源，先到先得~~~~
領(lǐng)取以下高清學(xué)習(xí)路線原圖請點擊→《鴻蒙 (Harmony OS)開發(fā)學(xué)習(xí)手冊》純血鴻蒙HarmonyOS基礎(chǔ)技能學(xué)習(xí)路線圖
領(lǐng)取以上完整高清學(xué)習(xí)路線圖，請點擊→《鴻蒙全套學(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ù)，享受藍海紅利。
最后
鴻蒙開發(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í)資料，請點擊→《鴻蒙 (Harmony OS)開發(fā)學(xué)習(xí)手冊》
