??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

背景

OpenHarmony的應(yīng)用開發(fā)支持C++、JS、eTS，從已有版本的演進(jìn)路線來(lái)看，eTS是未來(lái)重點(diǎn)的技術(shù)路線。
對(duì)于剛?cè)腴TOpenHarmony應(yīng)用開發(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)用開發(fā)全流程。

需求

開發(fā)一個(gè)字符串轉(zhuǎn)碼應(yīng)用，應(yīng)用提供待轉(zhuǎn)碼字符串輸入框，用戶輸入字符串后可方便的進(jìn)行各種數(shù)據(jù)類型的轉(zhuǎn)碼，具體有：
1.10進(jìn)制轉(zhuǎn)16進(jìn)制，并補(bǔ)0
2.16進(jìn)制轉(zhuǎn)10進(jìn)制
3.16進(jìn)制轉(zhuǎn)2進(jìn)制
4.2進(jìn)制轉(zhuǎn)16進(jìn)制
5.16進(jìn)制轉(zhuǎn)ASCII碼
6.ASCII碼轉(zhuǎn)16進(jìn)制

設(shè)計(jì)

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

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

創(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è)面預(yù)覽效果：

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

頁(yè)面布局規(guī)劃

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

1. 最外側(cè)使用flex垂直向下布局，這樣確保了所有元素都是從上開始順序往下排列。
2. 緊接著是標(biāo)題、字符輸入部分、按鈕部分、轉(zhuǎn)碼結(jié)果部分、清空按鈕，5個(gè)大塊。
3. 字符輸入?yún)^(qū)域含有標(biāo)題+輸入框，分別使用text+textarea。
4. 按鈕部分采用Row+Column，這樣便于按鈕對(duì)齊。
5. 轉(zhuǎn)碼結(jié)果區(qū)域與字符輸入?yún)^(qū)域一致，可以直接復(fù)用。
6. 清空按鈕可以復(fù)用按鈕區(qū)。
7. 注意所有組件之間的間隔。

UI界面編碼實(shí)現(xiàn)

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 })
}

總結(jié)

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

??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。