ETS是否适合金融界面的开发
harmonyos 在去年年底已经更新了 api7，最大的更新就是基于 ts 扩展的声明式开发范式的方舟开发框架。
初步尝试还不错，所以仿写了一个 dececo-studio 里面的一个金融首页界面，为后面的公司业务铺路，同时也测试一下 ets 是否适合金融界面的开发。
界面效果
如下图：
界面架构
这是一个包含底部两个 tab 的界面，每个界面都含有搜索、轮播、菜单等业务模块。
所以界面实现我们一步一步来，先实现 tabs，再拆分成两个 ets 界面，每个界面进行业务模块拆分。
搭建框架
ets 里面有丰富的组件，但是内置的 tabs 组件并不支持图片，所以只能自定义一个 tabs。
因为在底部且固定，所以要使用 stack 布局，两个 ets 界面在上面显示。
import minepage from './minepage.ets';import homepage from './homepage.ets';@entry@componentstruct index { @state tabindex: number = 0; private tabselectcolor: string = #095af8; private tabcolor: 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 封装一个组件实现比较美观。
然后业务模块组件整体放在界面里面：
import homesearchbar from '../components/homesearchbar.ets';import homeheader from '../components/homeheader.ets';import recommendmenu from '../components/recommendmenu.ets';import newslist from '../components/newslist.ets';import adswiper from '../components/adswiper.ets';import noticebar from '../components/noticebar.ets';@componentstruct homepage { private scroller: scroller = new scroller() @state homeopacitynumber: 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%) }}export default homepage
这样的话布局和业务模块就很清晰了，每个模块直接相互之间不会影响，这样可能会影响包体积，但是代码结构和逻辑会更清晰。
由于篇幅有限，暂不展开每个业务模块组件的具体实现，后面会针对每个组件实现一一展开。
总结
ets 开发界面还是比较爽的，整体开发效率不输 vue 或者 react 等前端框架，而且对 hap 的体积（未来要上架原子化服务）影响不是特别大，未来是完全可以考虑应用到公司的业务开发中，期待 harmonyos 3.0！
原文标题：harmonyos基于ets开发金融界面
文章出处：【微信公众号：harmonyos技术社区】欢迎添加关注！文章转载请注明出处。
FPGA实现OFDM通信—C语言实现N点FFT
人工智能的发展将深入影响到安防行业
基于射频的无线技术改进助听器设计
这几款超性价比的国产千元机,学生党玩王者荣耀的首选机！
Veeco与ALLOS共同展示200mm硅基氮化镓外延片产品
ETS是否适合金融界面的开发
关于智能家居落实所需要经过三个阶段分析
促销HP53131A频率计HP53131A
关于多功能移动终端的应用介绍
快讯：苹果或在WWDC 2019宣布开放NFC技术
中国愿发起《全球数据安全倡议》
数据中心电气火灾监控系统解决方案
不断发展的网络和协议使智慧城市创新成为可能
驱动神经刺激器实现植入式能量传递方案解析
NVIDIA将为自主机器引入现代AI机器人开发者工具箱即将出现
超级细菌是怎么产生的？超级细菌使得淋病越来越难治疗
灯带2835和5050哪个好
5.8GHz 频段产品介绍
上海电气澄清:光刻机并非公司经营业务
OPPO发布全球最轻最薄双目智能眼镜
初步尝试还不错，所以仿写了一个 dececo-studio 里面的一个金融首页界面，为后面的公司业务铺路，同时也测试一下 ets 是否适合金融界面的开发。
界面效果
如下图：
界面架构
这是一个包含底部两个 tab 的界面，每个界面都含有搜索、轮播、菜单等业务模块。
所以界面实现我们一步一步来，先实现 tabs，再拆分成两个 ets 界面，每个界面进行业务模块拆分。
搭建框架
ets 里面有丰富的组件，但是内置的 tabs 组件并不支持图片，所以只能自定义一个 tabs。
因为在底部且固定，所以要使用 stack 布局，两个 ets 界面在上面显示。
import minepage from './minepage.ets';import homepage from './homepage.ets';@entry@componentstruct index { @state tabindex: number = 0; private tabselectcolor: string = #095af8; private tabcolor: 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 封装一个组件实现比较美观。
然后业务模块组件整体放在界面里面：
import homesearchbar from '../components/homesearchbar.ets';import homeheader from '../components/homeheader.ets';import recommendmenu from '../components/recommendmenu.ets';import newslist from '../components/newslist.ets';import adswiper from '../components/adswiper.ets';import noticebar from '../components/noticebar.ets';@componentstruct homepage { private scroller: scroller = new scroller() @state homeopacitynumber: 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%) }}export default homepage
这样的话布局和业务模块就很清晰了，每个模块直接相互之间不会影响，这样可能会影响包体积，但是代码结构和逻辑会更清晰。
由于篇幅有限，暂不展开每个业务模块组件的具体实现，后面会针对每个组件实现一一展开。
总结
ets 开发界面还是比较爽的，整体开发效率不输 vue 或者 react 等前端框架，而且对 hap 的体积（未来要上架原子化服务）影响不是特别大，未来是完全可以考虑应用到公司的业务开发中，期待 harmonyos 3.0！
原文标题：harmonyos基于ets开发金融界面
文章出处：【微信公众号：harmonyos技术社区】欢迎添加关注！文章转载请注明出处。
FPGA实现OFDM通信—C语言实现N点FFT
人工智能的发展将深入影响到安防行业
基于射频的无线技术改进助听器设计
这几款超性价比的国产千元机,学生党玩王者荣耀的首选机！
Veeco与ALLOS共同展示200mm硅基氮化镓外延片产品
ETS是否适合金融界面的开发
关于智能家居落实所需要经过三个阶段分析
促销HP53131A频率计HP53131A
关于多功能移动终端的应用介绍
快讯：苹果或在WWDC 2019宣布开放NFC技术
中国愿发起《全球数据安全倡议》
数据中心电气火灾监控系统解决方案
不断发展的网络和协议使智慧城市创新成为可能
驱动神经刺激器实现植入式能量传递方案解析
NVIDIA将为自主机器引入现代AI机器人开发者工具箱即将出现
超级细菌是怎么产生的？超级细菌使得淋病越来越难治疗
灯带2835和5050哪个好
5.8GHz 频段产品介绍
上海电气澄清:光刻机并非公司经营业务
OPPO发布全球最轻最薄双目智能眼镜