背景

OpenHarmony的利用开发反对C++、JS、eTS，从已有版本的演进路线来看，eTS是将来重点的技术路线。对于刚入门OpenHarmony利用开发的小伙伴来说，eTS可能比拟生疏，如果有一个适合的实战我的项目来练手，那么对技术能力晋升是十分有帮忙的，本文将以一个小我的项目——数据转码利用，来解说利用开发全流程。 

需要

开发一个字符串转码利用，利用提供待转码字符串输入框，用户输出字符串后可不便的进行各种数据类型的转码，具体有：1. 10进制转16进制，并补02. 16进制转10进制3. 16进制转2进制4. 2进制转16进制5. 16进制转ASCII码6. ASCII码转16进制 

设计

设计稿如下：

字符串输入框采纳textarea组件，按钮采纳button组件，文字题目采纳text组件

创立我的项目

咱们关上DevEco Studio开发工具，抉择Create，点击下一步

输出项目名称：DataConvert
我的项目类型抉择：Application
Bundle name：填本人的公司域名+我的项目名
Save location：抉择工程文件保留门路
Compile API：抉择api8（最新的api9已推出，本案例应用api8开发）
UI Syntax：抉择eTS
Device type：勾选Phone、Tablet
点击Finish

IDE主动构建好我的项目如下：

关上index.ets点击右侧Previewer，咱们能够看到页面预览成果

以上，我的项目创立结束，咱们能够在gitee或公有git仓库上创立好代码仓库提交下来，便于后续代码归档。

页面布局布局

整个页面布局布局

1.最外侧应用flex垂直向下布局，这样确保了所有元素都是从上开始程序往下排列
2.紧接着是题目、字符输出局部、按钮局部、转码后果局部、清空按钮，5个大块
3.字符输出区域含有题目+输入框，别离应用text+textarea
4.按钮局部采纳Row+Column，这样便于按钮对齐
5.转码后果区域与字符输出区域统一，能够间接复用
6.清空按钮能够复用按钮区
7.留神所有组件之间的距离

UI界面编码实现

build() {  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {    Flex({ direction: FlexDirection.Row }) {      Text($r('app.string.title'))        .fontSize(30)    }    .width('100%')    .margin({ bottom: 30 })    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {      Text($r('app.string.inputStr'))        .fontSize(24)        .margin({ bottom: 15 })        .width('100%')      TextArea()        .width('100%')        .height(180)        .backgroundColor(0x0ffff)        .borderRadius(0)    }.width('100%')    Row() {      Column() {        Button($r('app.string.btnDec2hex'), { type: ButtonType.Normal })          .width('50%')      }      .padding({ top: 10, right: 5, bottom: 0, left: 0 })      Column() {        Button($r('app.string.btnHex2dex'), { type: ButtonType.Normal })          .width('50%')      }      .padding({ top: 10, right: 0, bottom: 0, left: 5 })    }    Row() {      ……    }    Row() {……    }    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {      Text($r('app.string.encodeStr'))        .fontSize(24)        .margin({ bottom: 10 })        .width('100%')      Flex() {        Text(this.strEncode).fontSize(16)      }      .width('100%')      .height(180)      .backgroundColor(0x0ffff)      .borderRadius(20)      .padding({ top: 10, right: 10, bottom: 10, left: 10 })    }    .width('100%')    .margin({ top: 20 })    Row() {      Column() {        Button($r('app.string.btnClean'), { type: ButtonType.Normal })          .width('50%')      }      .padding({ top: 10, right: 5, bottom: 0, left: 0 })    }    .width('100%')  }  .padding({ top: 18, right: 18, bottom: 18, left: 18 })}

总结

我的项目的开发蕴含很多流程步骤，咱们在开发时须要留神布局好后期的需要和设计工作，这样在后续的编码过程中能够防止频繁的批改调整。OpenHarmony利用开发与VUE开发有肯定的相似性，两者的布局和组件款式原理是相通的，咱们在拿到UI设计稿后不要急于编码，提前布局好组件布局能够事倍功半。