乐趣区

关于openharmony:OpenHarmony数据转码应用开发实战上

jiezi

背景

OpenHarmony 的利用开发反对 C ++、JS、eTS，从已有版本的演进路线来看，eTS 是将来重点的技术路线。对于刚入门 OpenHarmony 利用开发的小伙伴来说，eTS 可能比拟生疏，如果有一个适合的实战我的项目来练手，那么对技术能力晋升是十分有帮忙的，本文将以一个小我的项目——数据转码利用，来解说利用开发全流程。

需要

开发一个字符串转码利用，利用提供待转码字符串输入框，用户输出字符串后可不便的进行各种数据类型的转码，具体有：1. 10 进制转 16 进制，并补 02. 16 进制转 10 进制 3. 16 进制转 2 进制 4. 2 进制转 16 进制 5. 16 进制转 ASCII 码 6. ASCII 码转 16 进制 

设计

设计稿如下：

字符串输入框采纳 textarea 组件，按钮采纳 button 组件，文字题目采纳 text 组件

创立我的项目

咱们关上 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 仓库上创立好代码仓库提交下来，便于后续代码归档。

页面布局布局

整个页面布局布局

1. 最外侧应用 flex 垂直向下布局，这样确保了所有元素都是从上开始程序往下排列
2. 紧接着是题目、字符输出局部、按钮局部、转码后果局部、清空按钮，5 个大块
3. 字符输出区域含有题目 + 输入框，别离应用 text+textarea
4. 按钮局部采纳 Row+Column，这样便于按钮对齐
5. 转码后果区域与字符输出区域统一，能够间接复用
6. 清空按钮能够复用按钮区
7. 留神所有组件之间的距离

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

总结

我的项目的开发蕴含很多流程步骤，咱们在开发时须要留神布局好后期的需要和设计工作，这样在后续的编码过程中能够防止频繁的批改调整。OpenHarmony 利用开发与 VUE 开发有肯定的相似性，两者的布局和组件款式原理是相通的，咱们在拿到 UI 设计稿后不要急于编码，提前布局好组件布局能够事倍功半。

退出移动版