OpenHarmony数据转码应用开发实战(上)
2023-02-25 18:03:22 时间
背景
OpenHarmony的应用开发支持C++、JS、eTS,从已有版本的演进路线来看,eTS是未来重点的技术路线。
对于刚入门OpenHarmony应用开发的小伙伴来说,eTS可能比较陌生,如果有一个合适的实战项目来练手,那么对技术能力提升是非常有帮助的,本文将以一个小项目——数据转码应用,来讲解应用开发全流程。
需求
开发一个字符串转码应用,应用提供待转码字符串输入框,用户输入字符串后可方便的进行各种数据类型的转码,具体有:
1.10进制转16进制,并补0
2.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仓库上创建好代码仓库提交上去,便于后续代码归档。
页面布局规划
整个页面布局规划:
- 最外侧使用flex垂直向下布局,这样确保了所有元素都是从上开始顺序往下排列。
- 紧接着是标题、字符输入部分、按钮部分、转码结果部分、清空按钮,5个大块。
- 字符输入区域含有标题+输入框,分别使用text+textarea。
- 按钮部分采用Row+Column,这样便于按钮对齐。
- 转码结果区域与字符输入区域一致,可以直接复用。
- 清空按钮可以复用按钮区。
- 注意所有组件之间的间隔。
UI界面编码实现
总结
项目的开发包含很多流程步骤,我们在开发时需要注意规划好前期的需求和设计工作,这样在后续的编码过程中可以避免频繁的修改调整。OpenHarmony应用开发与VUE开发有一定的相似性,两者的布局和组件样式原理是相通的,我们在拿到UI设计稿后不要急于编码,提前规划好组件布局可以事半功倍。
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023