HarmonyOS 在去年年底已經(jīng)更新了 API7，最大的更新就是基于 TS 擴(kuò)展的聲明式開(kāi)發(fā)范式的方舟開(kāi)發(fā)框架。

初步嘗試還不錯(cuò)，所以仿寫(xiě)了一個(gè) DecEco-Studio 里面的一個(gè)金融首頁(yè)界面，為后面的公司業(yè)務(wù)鋪路，同時(shí)也測(cè)試一下 ETS 是否適合金融界面的開(kāi)發(fā)。

界面效果

如下圖：

界面架構(gòu)

這是一個(gè)包含底部?jī)蓚€(gè) Tab 的界面，每個(gè)界面都含有搜索、輪播、菜單等業(yè)務(wù)模塊。

所以界面實(shí)現(xiàn)我們一步一步來(lái)，先實(shí)現(xiàn) Tabs，再拆分成兩個(gè) ETS 界面，每個(gè)界面進(jìn)行業(yè)務(wù)模塊拆分。

搭建框架

ETS 里面有豐富的組件，但是內(nèi)置的 Tabs 組件并不支持圖片，所以只能自定義一個(gè) Tabs。

因?yàn)樵诘撞壳夜潭ǎ砸褂?Stack 布局，兩個(gè) ETS 界面在上面顯示。

importMinePagefrom'./MinePage.ets';
importHomePagefrom'./HomePage.ets';

@Entry
@Component
structIndex{
@StatetabIndex:number=0;
privatetabSelectColor:string="#095AF8";
privatetabColor:string="#BFC0C2";

build(){
Stack({alignContent:Alignment.BottomStart}){
if(this.tabIndex==0){
HomePage()
}
if(this.tabIndex==1){
MinePage()
}
Divider().color("#F5F5F5")
Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center,justifyContent:FlexAlign.SpaceAround}){
Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){
Image(this.tabIndex==0?"/common/images/main_click.png":"/common/images/main.png")
.objectFit(ImageFit.Fill)
.width(30)
.height(30)
Text("首頁(yè)")
.fontColor(this.tabIndex==0?this.tabSelectColor:this.tabColor)
.fontSize(14)
.margin({top:3})
}.onClick(()=>{
this.tabIndex=0;
})

Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){
Image(this.tabIndex==1?"/common/images/life_click.png":"/common/images/life.png")
.objectFit(ImageFit.Fill)
.width(30)
.height(30)
Text("生活")
.fontColor(this.tabIndex==1?this.tabSelectColor:this.tabColor)
.fontSize(14)
.margin({top:3})
}.onClick(()=>{
this.tabIndex=1;
})
}.width("100%")
.height(70)
.backgroundColor("#F3F4F6")
}.width("100%").height("100%")
}
}

以上代碼呢實(shí)現(xiàn)邏輯其實(shí)很簡(jiǎn)單，就是底部固定布局實(shí)現(xiàn)了自定義的 Tabs，然后判斷當(dāng)前處于界面，更新底部圖片、顏色和界面切換。

界面實(shí)現(xiàn)

通過(guò)圖片會(huì)發(fā)現(xiàn)，界面有很多業(yè)務(wù)模塊組成且鋪滿一屏，外面肯定要有一個(gè) Scroll。

整體代碼堆在一個(gè) ets 文件有點(diǎn)不優(yōu)雅，每個(gè)業(yè)務(wù)模塊都由一個(gè) ets 封裝一個(gè)組件實(shí)現(xiàn)比較美觀。

然后業(yè)務(wù)模塊組件整體放在界面里面：

importHomeSearchBarfrom'../components/HomeSearchBar.ets';
importHomeHeaderfrom'../components/HomeHeader.ets';
importRecommendMenufrom'../components/RecommendMenu.ets';
importNewsListfrom'../components/NewsList.ets';
importAdSwiperfrom'../components/AdSwiper.ets';
importNoticeBarfrom'../components/NoticeBar.ets';

@Component
structHomePage{
privatescroller:Scroller=newScroller()
@StatehomeOpacityNumber:number=0

build(){
Stack({alignContent:Alignment.TopStart}){
Scroll(this.scroller){
Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.Start,alignItems:ItemAlign.Start}){
HomeHeader()
NoticeBar()
AdSwiper()
RecommendMenu()
NewsList()
}
.width('100%')
.backgroundColor("#F2F2F2")
}
.width('100%')
.margin({top:60})
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.onScroll((xOffset:number,yOffset:number)=>{
console.info(xOffset+''+yOffset)
this.homeOpacityNumber=(this.scroller.currentOffset().yOffset)/100;
})
HomeSearchBar({opacityNumber:this.homeOpacityNumber})
}.width("100%")
.height("100%")
}
}

exportdefaultHomePage

這樣的話布局和業(yè)務(wù)模塊就很清晰了，每個(gè)模塊直接相互之間不會(huì)影響，這樣可能會(huì)影響包體積，但是代碼結(jié)構(gòu)和邏輯會(huì)更清晰。

由于篇幅有限，暫不展開(kāi)每個(gè)業(yè)務(wù)模塊組件的具體實(shí)現(xiàn)，后面會(huì)針對(duì)每個(gè)組件實(shí)現(xiàn)一一展開(kāi)。

總結(jié)

ETS 開(kāi)發(fā)界面還是比較爽的，整體開(kāi)發(fā)效率不輸 Vue 或者 React 等前端框架，而且對(duì) hap 的體積（未來(lái)要上架原子化服務(wù)）影響不是特別大，未來(lái)是完全可以考慮應(yīng)用到公司的業(yè)務(wù)開(kāi)發(fā)中，期待 HarmonyOS 3.0！