0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

ETS是否适合金融界面的开发

OpenHarmony技术社区 来源:鸿蒙技术社区 作者:正平_CSII 2022-04-21 07:48 次阅读

HarmonyOS 在去年年底已经更新了 API7,最大的更新就是基于 TS 扩展的声明式开发范式的方舟开发框架。

538cb1f2-c0fe-11ec-bce3-dac502259ad0.png

初步尝试还不错,所以仿写了一个 DecEco-Studio 里面的一个金融首页界面,为后面的公司业务铺路,同时也测试一下 ETS 是否适合金融界面的开发。

界面效果

如下图:

53ab2416-c0fe-11ec-bce3-dac502259ad0.png

53f401c2-c0fe-11ec-bce3-dac502259ad0.png

界面架构

这是一个包含底部两个 Tab 的界面,每个界面都含有搜索、轮播、菜单等业务模块。

所以界面实现我们一步一步来,先实现 Tabs,再拆分成两个 ETS 界面,每个界面进行业务模块拆分。

搭建框架

ETS 里面有丰富的组件,但是内置的 Tabs 组件并不支持图片,所以只能自定义一个 Tabs。

因为在底部且固定,所以要使用 Stack 布局,两个 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("首页")
.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%")
}
}

以上代码呢实现逻辑其实很简单,就是底部固定布局实现了自定义的 Tabs,然后判断当前处于界面,更新底部图片、颜色和界面切换。

界面实现

通过图片会发现,界面有很多业务模块组成且铺满一屏,外面肯定要有一个 Scroll。

整体代码堆在一个 ets 文件有点不优雅,每个业务模块都由一个 ets 封装一个组件实现比较美观。

540e37fe-c0fe-11ec-bce3-dac502259ad0.png

然后业务模块组件整体放在界面里面:

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

这样的话布局和业务模块就很清晰了,每个模块直接相互之间不会影响,这样可能会影响包体积,但是代码结构和逻辑会更清晰。

由于篇幅有限,暂不展开每个业务模块组件的具体实现,后面会针对每个组件实现一一展开。

总结

ETS 开发界面还是比较爽的,整体开发效率不输 Vue 或者 React 等前端框架,而且对 hap 的体积(未来要上架原子化服务)影响不是特别大,未来是完全可以考虑应用到公司的业务开发中,期待 HarmonyOS 3.0!

原文标题:HarmonyOS基于ETS开发金融界面

文章出处:【微信公众号:HarmonyOS技术社区】欢迎添加关注!文章转载请注明出处。

审核编辑:汤梓红
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 开发
    +关注

    关注

    0

    文章

    340

    浏览量

    40586
  • 代码
    +关注

    关注

    30

    文章

    4536

    浏览量

    66487
  • HarmonyOS
    +关注

    关注

    79

    文章

    1683

    浏览量

    29148

原文标题:HarmonyOS基于ETS开发金融界面

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    基于eTS的HamronyOS应用开发

    随着HarmonyOS 3.0 Beta版的发布,API Version 8新增了大批JS/eTS API接口,相信很多开发者已经迫不及待想体验基于eTS的HamronyOS应用开发
    的头像 发表于 07-15 09:20 1694次阅读
    基于<b class='flag-5'>eTS</b>的HamronyOS应用<b class='flag-5'>开发</b>

    基于ArkUI eTS开发的坚果食谱(NutRecipes)

    基于ArkUI eTS开发的坚果食谱(NutRecipes)
    的头像 发表于 08-18 08:23 1192次阅读
    基于ArkUI <b class='flag-5'>eTS</b><b class='flag-5'>开发</b>的坚果食谱(NutRecipes)

    HarmonyOS应用开发-eTS文件说明

    1. 目录结构FA应用的ets模块(entry/src/main)的典型开发目录结构如下:目录结构中文件分类如下:·.ets结尾的ETS(Extended TypeScript)文件,
    发表于 12-23 10:40

    entry模块里面的index.ets如何跳转到另外一个xxx.ets页面呢

      ArkUI框架,如何跳转到HarmonyOS Library里面的page呢?  entry模块里面的index.ets,如何跳转到另外一个Module(library)里面实现的xxx.
    发表于 03-14 17:06

    100行代码实现HarmonyOS“画图”应用,eTS开发走起!

    所示。 图5 “设置画笔”界面 至此,“画图”应用就开发完成啦!感兴趣的小伙伴也可以去尝试开发哦~ 三、学习资源 使用eTS语言开发,仅
    发表于 03-30 14:28

    基于eTS高效开发HarmonyOS课程类应用

    配置等。 相较于基于Java的命令式开发eTS采用更接近自然语义的声明式编程语法,让开发者可以更直观地描述UI界面,有效地降低了开发者的上
    发表于 07-15 11:33

    VxWorks下图形用户界面的开发

    VxWorks下图形用户界面的开发
    发表于 03-25 10:45 19次下载

    人机界面的开发与应用

    人机界面的开发与应用彭彦卿,厦门理工学院电子与电气工程系,厦门市厦港新村72号605,361005[摘 要] 研究人机界面主画面、参数设定与显示画面、报警显示画面的
    发表于 11-01 09:25 21次下载

    金融界首颗物联网卫星平安1号成功发射

    2020年12月22日12时37分,万众期待的长征八号在海南文昌发射场首飞成功,本次运载的卫星当中包含由平安银行定制,国电高科研发的首颗金融界物联网卫星"平安1号"(天启星座08星)。
    的头像 发表于 12-22 16:45 1712次阅读

    剖析ETS汽车芯片有效缩短开发周期

    作者:Axel Kleinpaul,Senior Staff Engineer 易于入门芯片(ETS MCU)设计旨在满足汽车应用的严格质量和可靠性需求,但它们同样也非常适合工业甚至消费类
    的头像 发表于 06-30 11:14 1893次阅读

    基于ETS开发范式制作Loading组件

    最近刚接触基于 OpenHarmony 开源框架的应用开发,特别是基于 JS/ETS 开发范式。
    的头像 发表于 04-12 08:56 1084次阅读

    OpenHarmony应用开发ETS开发方式Image组件

    今天带大家了解ETS开发方式中的Image组件
    的头像 发表于 07-03 12:06 3027次阅读
    OpenHarmony应用<b class='flag-5'>开发</b>之<b class='flag-5'>ETS</b><b class='flag-5'>开发</b>方式Image组件

    面向界面的图形化测试技术

    面向界面的图形化测试是一种常用的软件测试方法,旨在验证用户界面是否符合业务规范和用户需求,以及验证应用程序的功能是否正确响应用户操作,以保证应用程序的质量和稳定性。
    的头像 发表于 04-21 11:03 539次阅读
    面向<b class='flag-5'>界面的</b>图形化测试技术

    深入浅出学习eTs(七)如何判断密码是否正确

    本项目Gitee仓地址: 深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com) 一、基本界面 本项目基于#深入浅出学习eTs#(四)登陆
    的头像 发表于 05-13 13:20 612次阅读
    深入浅出学习<b class='flag-5'>eTs</b>(七)如何判断密码<b class='flag-5'>是否</b>正确

    软通动力数字万村项目荣获金融界“乡村振兴产业帮扶优秀案例”奖

    局、临淄区人民政府、物美集团、金融界联合主办的“乡约美好,共谱新章”——乡村振兴万里行暨“2023金融界乡村振兴优秀案例评选”活动在山东淄博顺利召开,并取得圆满成功。通过案例征集、网络投票、专家评审等多个环节的逐层
    的头像 发表于 08-11 18:15 206次阅读