1、背景

OpenHarmony的應(yīng)用開發(fā)支持C++、JS、eTS，從已有版本的演進(jìn)路線來看，eTS是未來重點(diǎn)的技術(shù)路線。

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

2、需求

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

10進(jìn)制轉(zhuǎn)16進(jìn)制，并補(bǔ)0

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

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

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

16進(jìn)制轉(zhuǎn)ASCII碼

ASCII碼轉(zhuǎn)16進(jìn)制

3、設(shè)計(jì)

設(shè)計(jì)稿如下：

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

4、創(chuàng)建項(xiàng)目

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

輸入項(xiàng)目名稱：DataConvert

項(xiàng)目類型選擇：Application

Bundle name：填自己的公司域名+項(xiàng)目名

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

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

UI Syntax：選擇eTS

Device type：勾選Phone、Tablet

點(diǎn)擊Finish

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

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

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

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

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

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

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

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

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

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

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

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

6、UI界面編碼實(shí)現(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é)

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

?+

+

更多相關(guān)推薦

點(diǎn)擊標(biāo)題即可查看內(nèi)容

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

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

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