1、背景

OpenHarmony的應用開發支持C++、JS、eTS，從已有版本的演進路線來看，eTS是未來重點的技術路線。

對于剛入門OpenHarmony應用開發的小伙伴來說，eTS可能比較陌生，如果有一個合適的實戰項目來練手，那么對技術能力提升是非常有幫助的，本文將以一個小項目——數據轉碼應用，來講解應用開發全流程。

2、需求

開發一個字符串轉碼應用，應用提供待轉碼字符串輸入框，用戶輸入字符串后可方便的進行各種數據類型的轉碼，具體有：

10進制轉16進制，并補0

16進制轉10進制

16進制轉2進制

2進制轉16進制

16進制轉ASCII碼

ASCII碼轉16進制

3、設計

設計稿如下：

字符串輸入框采用textarea組件，按鈕采用button組件，文字標題采用text組件。

4、創建項目

我們打開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倉庫上創建好代碼倉庫提交上去，便于后續代碼歸檔。

5、頁面布局規劃

整個頁面布局規劃

最外側使用flex垂直向下布局，這樣確保了所有元素都是從上開始順序往下排列；

緊接著是標題、字符輸入部分、按鈕部分、轉碼結果部分、清空按鈕，5個大塊；

字符輸入區域含有標題+輸入框，分別使用text+textarea；

按鈕部分采用Row+Column，這樣便于按鈕對齊；

轉碼結果區域與字符輸入區域一致，可以直接復用

清空按鈕可以復用按鈕區；

注意所有組件之間的間隔；

6、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 })
}

7、總結

項目的開發包含很多流程步驟，我們在開發時需要注意規劃好前期的需求和設計工作，這樣在后續的編碼過程中可以避免頻繁的修改調整。OpenHarmony應用開發與VUE開發有一定的相似性，兩者的布局和組件樣式原理是相通的，我們在拿到UI設計稿后不要急于編碼，提前規劃好組件布局可以事半功倍。

?+

+

更多相關推薦

點擊標題即可查看內容

1.OpenHarmony數據轉碼應用開發實戰（中）

2.OpenHarmony數據轉碼應用開發實戰（下）

本文由電子發燒友社區發布，轉載請注明以上來源。如需社區合作及入群交流，請添加微信EEFans0806，或者發郵箱liuyong@huaqiu.com。