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。
原文標題:【開源項目】帶你快速入門OPenHarmony—數據轉碼應用實戰
文章出處:【微信公眾號:電子發燒友論壇】歡迎添加關注!文章轉載請注明出處。
-
電子技術
+關注
關注
18文章
891瀏覽量
56068 -
電子發燒友論壇
+關注
關注
4文章
197瀏覽量
1101
原文標題:【開源項目】帶你快速入門OPenHarmony—數據轉碼應用實戰
文章出處:【微信號:gh_9b9470648b3c,微信公眾號:電子發燒友論壇】歡迎添加關注!文章轉載請注明出處。
發布評論請先 登錄
相關推薦
評論