更多信息请访问：51CTO与华为官方共同建立的鸿蒙技术社区HarmonyOShttps://ost.51cto.com前言HarmonyOSAPI7已于去年年底更新。最大的更新是基于TS扩展声明式开发范式的方舟开发框架。最初的尝试还不错，所以为了以后公司的业务，在DecEco-Studio里仿了一个金融首页的界面。铺路，也考验ETS是否适合金融接口的开发。界面效果界面架构这是一个界面，底部包含两个tabs，每个界面包含搜索、轮播、菜单等业务模块，所以我们一步步实现界面，先实现Tabs，再拆分成两个ETS接口，每个接口又分为业务模块。ETS中有丰富的组件，但是内置的Tabs组件不支持图片，只能自定义一个Tabs。因为在底部而且是固定的，所以采用了Stack布局，两个ETS界面都显示在上面。从“./MinePage.ets”导入MinePage；从“./HomePage.ets”导入主页；@Entry@ComponentstructIndex{@StatetabIndex:number=0;私人tabSelectColor:string="#095AF8";私人标签颜色：字符串=“#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}){图片(this.tabIndex==0?"/common/images/main_click.png":"/common/images/main.png").objectFit(ImageFit.Fill).width(30).height(30)Text("首页").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}){图片(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%")}}上面的代码实现逻辑是很简单，就是底部固定布局实现自定义Tabs，然后判断当前在界面中，更新底部图片、颜色和界面切换界面即可实现。通过图片，你会发现界面由很多业务模块组成，覆盖了一个屏幕，外面一定有一个Scroll。把整个代码堆在一个ets文件里有点不优雅，每个业务模块再封装一个ets实现一个组件，更美观。然后将业务模块组件整体放置在界面中。从'../components/HomeSearchBar.ets'导入HomeSearchBar；从'../components/HomeHeader.ets'导入HomeHeader；从'../components/RecommendMenu.ets'导入RecommendMenu；从'../components导入NewsList/NewsList.ets'；从'../components/AdSwiper.ets'导入AdSwiper；从'../components/NoticeBar.ets'导入NoticeBar；@ComponentstructHomePage{privatescroller:Scroller=newScroller()@StatehomeOpacityNumber:number=0build(){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})。可滚动（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这样布局和业务模块就很清晰了，每个模块不会直接互相影响，可能会影响包的大小，但是代码结构和逻辑会更清晰。限于篇幅，各业务模块组件的具体实现暂不展开，后面将逐个组件一一实现。综上所述，ETS开发界面比较酷，整体开发效率不逊色于Vue或React等前端框架，对hap（未来会推出原子服务）规模的影响是不是特别大。未来完全可以考虑应用到公司的业务发展中，期待HarmonyOS3.0！欲了解更多信息，请访问：?????????????????????????????????????????????????????????????
