本項目Gitee倉地址：深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)

一、eTs介紹

概述

基于TS擴(kuò)展的聲明式開發(fā)范式的方舟開發(fā)框架是一套開發(fā)極簡、高性能、跨設(shè)備應(yīng)用的UI開發(fā)框架，支持開發(fā)者高效的構(gòu)建跨設(shè)備應(yīng)用UI界面。

基礎(chǔ)能力

使用基于TS擴(kuò)展的聲明式開發(fā)范式的方舟開發(fā)框架，采用更接近自然語義的編程方式，讓開發(fā)者可以直觀地描述UI界面，不必關(guān)心框架如何實(shí)現(xiàn)UI繪制和渲染，實(shí)現(xiàn)極簡高效開發(fā)。開發(fā)框架不僅從組件、動效和狀態(tài)管理三個維度來提供UI能力，還提供了系統(tǒng)能力接口，實(shí)現(xiàn)系統(tǒng)能力的極簡調(diào)用。

請參考基于TS擴(kuò)展的聲明式開發(fā)范式API文檔，全面地了解組件，更好地開發(fā)應(yīng)用。

開箱即用的組件

框架提供豐富的系統(tǒng)預(yù)置組件，可以通過鏈?zhǔn)秸{(diào)用的方式設(shè)置系統(tǒng)組件的渲染效果。開發(fā)者可以組合系統(tǒng)組件為自定義組件，通過這種方式將頁面組件化為一個個獨(dú)立的UI單元，實(shí)現(xiàn)頁面不同單元的獨(dú)立創(chuàng)建、開發(fā)和復(fù)用，使頁面具有更強(qiáng)的工程性。

豐富的動效接口

提供svg標(biāo)準(zhǔn)的繪制圖形能力，同時開放了豐富的動效接口，開發(fā)者可以通過封裝的物理模型或者調(diào)用動畫能力接口來實(shí)現(xiàn)自定義動畫軌跡。

狀態(tài)與數(shù)據(jù)管理

狀態(tài)數(shù)據(jù)管理作為基于TS擴(kuò)展的聲明式開發(fā)范式的特色，通過功能不同的裝飾器給開發(fā)者提供了清晰的頁面更新渲染流程和管道。狀態(tài)管理包括UI組件狀態(tài)和應(yīng)用程序狀態(tài)，兩者協(xié)作可以使開發(fā)者完整地構(gòu)建整個應(yīng)用的數(shù)據(jù)更新和UI渲染。

系統(tǒng)能力接口

使用基于TS擴(kuò)展的聲明式開發(fā)范式的方舟開發(fā)框架，還封裝了豐富的系統(tǒng)能力接口，開發(fā)者可以通過簡單的接口調(diào)用，實(shí)現(xiàn)從UI設(shè)計到系統(tǒng)能力調(diào)用的極簡開發(fā)。

聲明式UI前端

提供了UI開發(fā)范式的基礎(chǔ)語言規(guī)范，并提供內(nèi)置的UI組件、布局和動畫，提供了多種狀態(tài)管理機(jī)制，為應(yīng)用開發(fā)者提供一系列接口支持。

語言運(yùn)行時

選用方舟語言運(yùn)行時，提供了針對UI范式語法的解析能力、跨語言調(diào)用支持的能力和TS語言高性能運(yùn)行環(huán)境。

聲明式UI后端引擎

后端引擎提供了兼容不同開發(fā)范式的UI渲染管線，提供多種基礎(chǔ)組件、布局計算、動效、交互事件，提供了狀態(tài)管理和繪制能力。

渲染引擎

提供了高效的繪制能力，將渲染管線收集的渲染指令，繪制到屏幕能力。

平臺適配層

提供了對系統(tǒng)平臺的抽象接口，具備接入不同系統(tǒng)的能力，如系統(tǒng)渲染管線、生命周期調(diào)度等。

二、基本框架

類型定義

長度類型

角度類型

點(diǎn)類型

顏色類型

組件屬性方法使用的顏色Color說明如下：

三、組件化分析

可參考：OpenAtom OpenHarmony

@Entry

用@Entry裝飾的自定義組件用作頁面的默認(rèn)入口組件，加載頁面時，將首先創(chuàng)建并呈現(xiàn)@Entry裝飾的自定義組件。

@Component

@Component裝飾的struct表示該結(jié)構(gòu)體具有組件化能力，能夠成為一個獨(dú)立的組件，這種類型的組件也稱為自定義組件，在build方法里描述UI結(jié)構(gòu)。自定義組件具有以下特點(diǎn)：

• 可組合：允許開發(fā)人員組合使用內(nèi)置組件、其他組件、公共屬性和方法；
• 鏈?zhǔn)秸{(diào)用9+：通過鏈?zhǔn)秸{(diào)用通用屬性改變組件樣式；
• 可重用：自定義組件可以被其他組件重用，并作為不同的實(shí)例在不同的父組件或容器中使用；
• 生命周期：生命周期的回調(diào)方法可以在組件中配置，用于業(yè)務(wù)邏輯處理；
• 數(shù)據(jù)驅(qū)動更新：由狀態(tài)變量的數(shù)據(jù)驅(qū)動，實(shí)現(xiàn)UI自動更新。

@Preview

用@Preview裝飾的自定義組件可以在DevEco Studio的預(yù)覽器上進(jìn)行預(yù)覽，加載頁面時，將創(chuàng)建并呈現(xiàn)@Preview裝飾的自定義組件。

@Builder

@Builder裝飾的方法用于定義組件的聲明式UI描述，在一個自定義組件內(nèi)快速生成多個布局內(nèi)容。@Builder裝飾方法的功能和語法規(guī)范與build函數(shù)相同。

@Extend

@Extend裝飾器將新的屬性函數(shù)添加到內(nèi)置組件上，如Text、Column、Button等。通過@Extend裝飾器可以快速定義并復(fù)用組件的自定義樣式。

@CustomDialog

@CustomDialog裝飾器用于裝飾自定義彈窗。

@Styles

@Styles裝飾器將新的屬性函數(shù)添加到基本組件上，如Text、Column、Button等。當(dāng)前@Styles僅支持通用屬性。通過@Styles裝飾器可以快速定義并復(fù)用組件的自定義樣式。

@Styles可以定義在組件內(nèi)或組件外，在組件外定義時需在方法前添加function關(guān)鍵字，組件內(nèi)定義時不需要添加function關(guān)鍵字。

四、組件化分析

開發(fā)的框架主要包括以上幾個部分，其中我們主要修改的部分在于@Builder函數(shù)中

即在上圖的這個部分，該程序是單實(shí)現(xiàn)了一個Hello Word的顯示

編輯：黃飛