最近剛接觸基于 OpenHarmony 開(kāi)源框架的應(yīng)用開(kāi)發(fā)，特別是基于 JS/ETS 開(kāi)發(fā)范式。

其中基于 JS 的應(yīng)用開(kāi)發(fā)，與 vue 語(yǔ)法和思想高度相似，數(shù)據(jù)模型僅僅是普通的 JavaScript 對(duì)象。而當(dāng)你修改它們時(shí)，視圖會(huì)進(jìn)行更新。這使得狀態(tài)管理非常簡(jiǎn)單直接式?？梢灶?lèi)比學(xué)習(xí)。

今天就 ETS 規(guī)范，寫(xiě)一個(gè) Loading 的組件，熟悉 ETS 下的一些基礎(chǔ)組件的應(yīng)用和聯(lián)動(dòng)。

參考資料

OpenHarmony API：

https://docs.openharmony.cn/pages/000701010201/

OpenHarmony / docs：

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

UI開(kāi)發(fā)模式

如下圖：

實(shí)現(xiàn)

①新建項(xiàng)目

如下圖：

語(yǔ)言選擇 eTS，API Version 選擇 8，不然部分組件不支持。

②頁(yè)面布局

如下：

• 用到的容器組件有：Column，Row

• 用到的其他組件有：Image，Text，Slider

Column(){//沿垂直方向布局的容器
Row(){//沿水平方向布局容器。
Text()//文本，用于呈現(xiàn)一段信息。
Image()
}
Row(){
Text()
Image()//圖片組件，用來(lái)渲染展示圖片。
}
Row(){
Text()
Silder()//滑動(dòng)條組件，用來(lái)快速調(diào)節(jié)設(shè)置值，如音量、亮度等。
}
Row(){
Text()
Silder()
}
}

③根據(jù) Silder 和 Image 的參數(shù)設(shè)置要求賦初始值

如下圖：

@StateinSetValue:number=10
@StateoutVerticalSetValue:number=40
@StateinVerticalSetValue:number=40

@Stateprivatedegree:number=0
@Stateprivatespeed:number=5
@Stateprivatetimer:number=0
@StateprivateimageSize:number=0

④設(shè)置關(guān)聯(lián)

將 Slider 進(jìn)度值賦給 Image rotate 屬性的坐標(biāo)值，在頁(yè)面加載的生命周期 onPageShow 中反復(fù)這一過(guò)程，最后記得把清楚定時(shí)器以免內(nèi)存泄漏。

Image($r('app.media.load'))
.rotate({x:0,y:0,z:1,angle:this.degree}).objectFit(ImageFit.Contain)
.scale({x:this.imageSize,y:this.imageSize})

speedChange(){
this.timer=setInterval(()=>{
this.degree+=this.speed;
},20)
}
onPageShow(){
this.speedChange()
}
onPageHide(){
this.timer=null;
}

⑤用 @Builder() 裝飾器封裝相同的功能，減少冗余代碼

代碼如下：

//聲明
@Builder
TextInfo(text:string){
Column(){
Text(text)
.fontSize(29)
.fontColor("#708090")
.width('90%')
.margin({top:20,left:25})
}
}
//調(diào)用
this.TextInfo('Changespeed'）

效果圖如下：

總結(jié)

此例就基于 ETS 組件的基本使用和關(guān)聯(lián)，以及裝飾器 @Builer 的簡(jiǎn)單使用展開(kāi)說(shuō)明，旨在熟悉 ETS 規(guī)范和對(duì)組件的初體驗(yàn)。

思考：如果業(yè)務(wù)比較復(fù)雜，可以根據(jù)實(shí)際的場(chǎng)景和數(shù)據(jù)的情況抽成更小粒度的組件，以便更方便的組合，提升效率。