1、背景
OpenHarmony的應(yīng)用開(kāi)發(fā)支持C++、JS、eTS,從已有版本的演進(jìn)路線來(lái)看,eTS是未來(lái)重點(diǎn)的技術(shù)路線。
對(duì)于剛?cè)腴TOpenHarmony應(yīng)用開(kāi)發(fā)的小伙伴來(lái)說(shuō),eTS可能比較陌生,如果有一個(gè)合適的實(shí)戰(zhàn)項(xiàng)目來(lái)練手,那么對(duì)技術(shù)能力提升是非常有幫助的,本文將以一個(gè)小項(xiàng)目——數(shù)據(jù)轉(zhuǎn)碼應(yīng)用,來(lái)講解應(yīng)用開(kāi)發(fā)全流程。
2、需求
開(kāi)發(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)目
我們打開(kāi)DevEco Studio開(kāi)發(fā)工具,選擇Create,點(diǎn)擊下一步。
輸入項(xiàng)目名稱:DataConvert
項(xiàng)目類型選擇:Application
Bundle name:填自己的公司域名+項(xiàng)目名
Save location:選擇工程文件保存路徑
Compile API:選擇api8(最新的api9已推出,本案例使用api8開(kāi)發(fā))
UI Syntax:選擇eTS
Device type:勾選Phone、Tablet
點(diǎn)擊Finish
IDE自動(dòng)構(gòu)建好項(xiàng)目如下:
打開(kāi)index.ets點(diǎn)擊右側(cè)Previewer,我們可以看到頁(yè)面預(yù)覽效果。
以上,項(xiàng)目創(chuàng)建完畢,我們可以在gitee或私有g(shù)it倉(cāng)庫(kù)上創(chuàng)建好代碼倉(cāng)庫(kù)提交上去,便于后續(xù)代碼歸檔。
5、頁(yè)面布局規(guī)劃
整個(gè)頁(yè)面布局規(guī)劃
最外側(cè)使用flex垂直向下布局,這樣確保了所有元素都是從上開(kāi)始順序往下排列;
緊接著是標(biāo)題、字符輸入部分、按鈕部分、轉(zhuǎn)碼結(jié)果部分、清空按鈕,5個(gè)大塊;
字符輸入?yún)^(qū)域含有標(biāo)題+輸入框,分別使用text+textarea;
按鈕部分采用Row+Column,這樣便于按鈕對(duì)齊;
轉(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)目的開(kāi)發(fā)包含很多流程步驟,我們?cè)陂_(kāi)發(fā)時(shí)需要注意規(guī)劃好前期的需求和設(shè)計(jì)工作,這樣在后續(xù)的編碼過(guò)程中可以避免頻繁的修改調(diào)整。OpenHarmony應(yīng)用開(kāi)發(fā)與VUE開(kāi)發(fā)有一定的相似性,兩者的布局和組件樣式原理是相通的,我們?cè)谀玫経I設(shè)計(jì)稿后不要急于編碼,提前規(guī)劃好組件布局可以事半功倍。
?+
+
更多相關(guān)推薦
點(diǎn)擊標(biāo)題即可查看內(nèi)容
1.OpenHarmony數(shù)據(jù)轉(zhuǎn)碼應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)(中)
2.OpenHarmony數(shù)據(jù)轉(zhuǎn)碼應(yīng)用開(kāi)發(fā)實(shí)戰(zhàn)(下)
本文由電子發(fā)燒友社區(qū)發(fā)布,轉(zhuǎn)載請(qǐng)注明以上來(lái)源。如需社區(qū)合作及入群交流,請(qǐng)?zhí)砑?/span>微信EEFans0806,或者發(fā)郵箱liuyong@huaqiu.com。
原文標(biāo)題:【開(kāi)源項(xiàng)目】帶你快速入門OPenHarmony—數(shù)據(jù)轉(zhuǎn)碼應(yīng)用實(shí)戰(zhàn)
文章出處:【微信公眾號(hào):電子發(fā)燒友論壇】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
-
電子技術(shù)
+關(guān)注
關(guān)注
18文章
853瀏覽量
55510 -
電子發(fā)燒友論壇
+關(guān)注
關(guān)注
4文章
197瀏覽量
990
原文標(biāo)題:【開(kāi)源項(xiàng)目】帶你快速入門OPenHarmony—數(shù)據(jù)轉(zhuǎn)碼應(yīng)用實(shí)戰(zhàn)
文章出處:【微信號(hào):gh_9b9470648b3c,微信公眾號(hào):電子發(fā)燒友論壇】歡迎添加關(guān)注!文章轉(zhuǎn)載請(qǐng)注明出處。
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論