1、背景

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

對于剛?cè)腴TOpenHarmony應用開發(fā)的小伙伴來說，eTS可能比較陌生，如果有一個合適的實戰(zhàn)項目來練手，那么對技術能力提升是非常有幫助的，本文將以一個小項目——數(shù)據(jù)轉(zhuǎn)碼應用，來講解應用開發(fā)全流程。

2、需求

開發(fā)一個字符串轉(zhuǎn)碼應用，應用提供待轉(zhuǎn)碼字符串輸入框，用戶輸入字符串后可方便的進行各種數(shù)據(jù)類型的轉(zhuǎn)碼，具體有：

10進制轉(zhuǎn)16進制，并補0

16進制轉(zhuǎn)10進制

16進制轉(zhuǎn)2進制

2進制轉(zhuǎn)16進制

16進制轉(zhuǎn)ASCII碼

ASCII碼轉(zhuǎn)16進制

3、設計

設計稿如下：

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

4、創(chuàng)建項目

我們打開DevEco Studio開發(fā)工具，選擇Create，點擊下一步。

輸入項目名稱：DataConvert

項目類型選擇：Application

Bundle name：填自己的公司域名+項目名

Save location：選擇工程文件保存路徑

Compile API：選擇api8（最新的api9已推出，本案例使用api8開發(fā)）

UI Syntax：選擇eTS

Device type：勾選Phone、Tablet

點擊Finish

IDE自動構(gòu)建好項目如下：

打開index.ets點擊右側(cè)Previewer，我們可以看到頁面預覽效果。

以上，項目創(chuàng)建完畢，我們可以在gitee或私有git倉庫上創(chuàng)建好代碼倉庫提交上去，便于后續(xù)代碼歸檔。

5、頁面布局規(guī)劃

整個頁面布局規(guī)劃

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

緊接著是標題、字符輸入部分、按鈕部分、轉(zhuǎn)碼結(jié)果部分、清空按鈕，5個大塊；

字符輸入?yún)^(qū)域含有標題+輸入框，分別使用text+textarea；

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

轉(zhuǎn)碼結(jié)果區(qū)域與字符輸入?yún)^(qū)域一致，可以直接復用

清空按鈕可以復用按鈕區(qū)；

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

6、UI界面編碼實現(xiàn)

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、總結(jié)

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

?+

+

更多相關推薦

點擊標題即可查看內(nèi)容

1.OpenHarmony數(shù)據(jù)轉(zhuǎn)碼應用開發(fā)實戰(zhàn)（中）

2.OpenHarmony數(shù)據(jù)轉(zhuǎn)碼應用開發(fā)實戰(zhàn)（下）

本文由電子發(fā)燒友社區(qū)發(fā)布，轉(zhuǎn)載請注明以上來源。如需社區(qū)合作及入群交流，請?zhí)砑?/span>微信EEFans0806，或者發(fā)郵箱liuyong@huaqiu.com。