色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

【開源項目】帶你快速入門OPenHarmony—數據轉碼應用實戰

電子發燒友論壇 ? 來源:未知 ? 2022-11-15 08:45 ? 次閱讀

1、背景

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

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

2、需求

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

10進制轉16進制,并補0

16進制轉10進制

16進制轉2進制

2進制轉16進制

16進制轉ASCII碼

ASCII碼轉16進制

3、設計

設計稿如下:

7ac0781a-647a-11ed-8abf-dac502259ad0.jpg

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

4、創建項目

我們打開DevEco Studio開發工具,選擇Create,點擊下一步。

7b183f00-647a-11ed-8abf-dac502259ad0.jpg

輸入項目名稱:DataConvert

項目類型選擇:Application

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

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

Compile API:選擇api8(最新的api9已推出,本案例使用api8開發)

UI Syntax:選擇eTS

Device type:勾選Phone、Tablet

點擊Finish

7b32a746-647a-11ed-8abf-dac502259ad0.jpg

IDE自動構建好項目如下:

7b538c9a-647a-11ed-8abf-dac502259ad0.jpg

打開index.ets點擊右側Previewer,我們可以看到頁面預覽效果。

7b6ca25c-647a-11ed-8abf-dac502259ad0.jpg

以上,項目創建完畢,我們可以在gitee或私有git倉庫上創建好代碼倉庫提交上去,便于后續代碼歸檔。

5、頁面布局規劃

7b829d32-647a-11ed-8abf-dac502259ad0.jpg

整個頁面布局規劃

最外側使用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

7ba10164-647a-11ed-8abf-dac502259ad0.png


原文標題:【開源項目】帶你快速入門OPenHarmony—數據轉碼應用實戰

文章出處:【微信公眾號:電子發燒友論壇】歡迎添加關注!文章轉載請注明出處。


聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴

原文標題:【開源項目】帶你快速入門OPenHarmony—數據轉碼應用實戰

文章出處:【微信號:gh_9b9470648b3c,微信公眾號:電子發燒友論壇】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦

    開源鴻蒙榮獲開放原子“2024年度操作系統領域國內活躍開源項目

    近日,2024開放原子開發者大會暨首屆開源技術學術大會在武漢圓滿召開。在大會開幕式“2024年度國內活躍開源項目&開發者致謝儀式”上,開放原子開源鴻蒙(OpenAtom
    的頭像 發表于 12-28 15:39 ?361次閱讀

    凌蒙派OpenHarmony開源項目榮獲本期Gitee官方推薦

    近日,我司凌蒙派OpenHarmony開源項目榮獲本期Gitee官方推薦。本期Gitee官方推薦不僅是對凌蒙派OpenHarmony開源
    的頭像 發表于 11-20 01:04 ?303次閱讀
    凌蒙派<b class='flag-5'>OpenHarmony</b><b class='flag-5'>開源</b><b class='flag-5'>項目</b>榮獲本期Gitee官方推薦

    CCF開源創新大賽決賽結果發布!OpenHarmony應用開發賽道盡展風采

    經過數月的激烈比拼與項目展示,第七屆CCF開源創新大賽決賽結果揭榜!其中,深開鴻的“OpenHarmony應用開發-開源項目貢獻賽”賽道星光
    的頭像 發表于 11-07 08:07 ?270次閱讀
    CCF<b class='flag-5'>開源</b>創新大賽決賽結果發布!<b class='flag-5'>OpenHarmony</b>應用開發賽道盡展風采

    OpenHarmony首次亮相歐洲開源會議

    。OpenHarmony項目群技術指導委員會(TSC)主席陳海波受邀參加大會主論壇分享,由OpenHarmony 與Eclipse Oniro聯合籌劃的“Think Global, Code Local”分論壇
    的頭像 發表于 10-26 11:48 ?514次閱讀
    <b class='flag-5'>OpenHarmony</b>首次亮相歐洲<b class='flag-5'>開源</b>會議

    【全新課程資料】正點原子《基于GD32 ARM32單片機項目實戰入門》培訓課程資料上線!

    正點原子《基于GD32 ARM32單片機項目實戰入門》全新課程資料上線啦!徹底解決ARM32單片機項目入門難的問題! 一、課程介紹 本課程
    發表于 09-24 18:06

    【全新課程資料】正點原子《ESP32基礎及項目實戰入門》培訓課程資料上線!

    正點原子《ESP32基礎及項目實戰入門》全新課程資料上線啦!正點原子工程師手把手教你學!熟練掌握ESP-IDF開發,突破ESP32入門難題! 一、課程介紹 本課程針對ESP32的
    發表于 09-24 17:59

    開放原子開源生態大會OpenHarmony生態主題演講報名開啟

    開源賦能產業,生態共筑未來,OpenAtom OpenHarmony(簡稱“OpenHarmony”)項目群工作委員會將于9月26日上午舉辦Open
    發表于 09-19 22:02

    鴻蒙OpenHarmony快速入門概述】

    OpenHarmony是一款面向全場景的開源分布式操作系統,采用組件化設計,支持在128KiB到xGiB RAM資源的設備上運行系統組件,設備開發者可基于目標硬件能力自由選擇系統組件進行集成。
    的頭像 發表于 04-19 15:14 ?463次閱讀
    鴻蒙<b class='flag-5'>OpenHarmony</b>【<b class='flag-5'>快速</b><b class='flag-5'>入門</b>概述】

    深開鴻升為OpenHarmony項目群A類捐贈人,引領開源生態新篇章!

    決議,正式升級成為OpenHarmony項目群A類捐贈人。這不僅是對深開鴻在OpenHarmony社區生態建設中突出貢獻的肯定,更標志著深開鴻在引領開源生態向前邁進
    的頭像 發表于 04-18 08:33 ?828次閱讀
    深開鴻升為<b class='flag-5'>OpenHarmony</b><b class='flag-5'>項目</b>群A類捐贈人,引領<b class='flag-5'>開源</b>生態新篇章!

    OpenHarmony內核編程實戰

    編程入門[Hello,OpenHarmony]在正式開始之前,對于剛接觸OpenHarmony的伙伴們,面對大篇幅的源碼可能無從下手,不知道怎么去編碼寫程序,下面用一個簡單的例子帶伙伴們入門
    的頭像 發表于 03-27 08:31 ?850次閱讀
    <b class='flag-5'>OpenHarmony</b>內核編程<b class='flag-5'>實戰</b>

    【六】Purple Pi OH開發板帶你7天入門OpenHarmony!

    今天我們來從OpenHarmony簡介、環境搭建、創建第一個OpenHarmony項目等方面開始OpenHarmony應用開發的第一步。一.Open
    的頭像 發表于 03-14 08:31 ?555次閱讀
    【六】Purple Pi OH開發板<b class='flag-5'>帶你</b>7天<b class='flag-5'>入門</b><b class='flag-5'>OpenHarmony</b>!

    鴻蒙實戰項目開發:【短信服務】

    、OpenHarmony 多媒體技術、Napi組件、OpenHarmony內核、Harmony南向開發、鴻蒙項目實戰等等)鴻蒙(Harmony NEXT) 技術知識點 如果你是一名An
    發表于 03-03 21:29

    盤點那些硬件+項目學習套件:STM32U5單片機開發板及入門常見問題解答

    ,可以手把手帶你快速完成STM32單片機的入門學習及綜合項目實戰。 然后再學習RTOS,這個方向,Ope
    發表于 02-19 16:59

    Purple Pi 帶你7天入門OpenHarmony

    大家好!我是一名剛入門OpenHarmony的小白,很高興能夠和大家一起學習OpenHarmony,在本系列文章里,我將分享使用PurplePiOH從零開始學習開源鴻蒙的整個流程,并提
    的頭像 發表于 02-19 13:20 ?497次閱讀
    Purple Pi <b class='flag-5'>帶你</b>7天<b class='flag-5'>入門</b><b class='flag-5'>OpenHarmony</b>

    淺談兼容 OpenHarmony 的 Flutter

    OpenHarmony SIG 組織在 Gitee 開源了兼容 OpenHarmony 的 Flutter。該組織主要用于孵化 OpenHarmony 相關的
    的頭像 發表于 02-02 15:22 ?617次閱讀
    淺談兼容 <b class='flag-5'>OpenHarmony</b> 的 Flutter
    主站蜘蛛池模板: 99国内精精品久久久久久婷婷| 果冻传媒在线观看视频| 狼好色有你好看| 姉调无修版ova国语版| 噜噜噜狠狠夜夜躁| G国产精品无马| 天龙八部慕容属性加点| 黑吊大战白女出浆| 97国产视频| 天天影视网网色色欲| 九九热在线免费观看| 99热久久精品国产一区二区| 色狠狠色综合吹潮| 精品午夜久久影视| yellow免费观看直播| 无码射肉在线播放视频| 老少配xxxxx欧美| 国产AV天堂一区二区三区| 一个人的免费完整在线观看HD| 欧美特级特黄a大片免费| 国产系列视频二区| a在线视频免费观看| 亚洲国产成人一区二区在线| 免费乱理伦片在线观看夜| 国产精品久久久久久久久免费下载| 早乙女由依在线观看| 三级aa久久| 麻豆产精品一二三产区区| 国产乱码精品一区二区三区四川 | 四虎成人影院| 久久久久久极精品久久久| 抽插嫩B乳无码漫| 一个人HD在线观看免费高清视频 | 久久视频这里只精品6国产| 国产a级黄色毛片| 91免费网站在线看入口黄| 亚洲国产精品自在自线观看| 亲胸揉胸膜下刺激视频在线观看| 黄页网址大全免费观看| 国产ts在线| www.欧美与曽交性video|