正文 

当前位置： 首页 > java > java教程

#打卡不停更#openharmony数据转码应用开发实战（上）(代码片段)

author author     2022-12-06     321

关键词：

背景

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仓库上创建好代码仓库提交上去，便于后续代码归档。

页面布局规划

整个页面布局规划 1.最外侧使用flex垂直向下布局，这样确保了所有元素都是从上开始顺序往下排列 2.紧接着是标题、字符输入部分、按钮部分、转码结果部分、清空按钮，5个大块 3.字符输入区域含有标题+输入框，分别使用text+textarea 4.按钮部分采用Row+Column，这样便于按钮对齐 5.转码结果区域与字符输入区域一致，可以直接复用 6.清空按钮可以复用按钮区 7.注意所有组件之间的间隔

UI界面编码实现

  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设计稿后不要急于编码，提前规划好组件布局可以事半功倍。

本文作者：软通动力HOS

想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com/#bkwz​​

#打卡不停更#-openharmony/docs开发入门(代码片段)

作者：朱子道杨成前言不管是作为软件开发的爱好者还是已经从事软件开发这个行业的从业者，对于接触一种全新的系统OpenHarmony。学习OpenHarmony，需要清楚OpenHarmony这个系统是什么，能干什么，今日分享从设备开发和应用开发两... 查看详情

#打卡不停更#编译效率快三倍,使用wsl2编译openharmony嘎嘎得劲!!(代码片段)

笔者发现使用wsl（WindowsSubsystemforLinux，适用于Linux的Windows子系统）编译openharmony镜像比传统虚拟机快3倍以上。编译环境换成wsl后，编译ohos只需要传统虚拟机上三分之一的时间。下面分享使用经验如下：(目录)为什么使用WSL2比传... 查看详情

#打卡不停更#openharmony-arkui（ts）声明式开发之列表拖动排列(代码片段)

作者：梁青松项目介绍本项目基于OpenHarmony的ArkUI框架：TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式，因为OpenHarmony的API相对于HarmonyOS的API，功能上比较完善和成熟的，有些... 查看详情

#打卡不停更#ffhopenharmony学生挑战赛分享-少儿语言教育app(代码片段)

Openharmony学生挑战赛经验分享前言本次参赛的项目是基于openHarmony开发的北向应用-少儿语言文化教育APP。从项目成立到初版成型再到参加比赛，这一路上遇到了不少困难，我也从团队协作、产品迭代、技术等方面学到了很多宝贵... 查看详情

#打卡不停更#ffh浅析ability框架中stage模型与fa模型的差异(代码片段)

(#打卡不停更#【FFH】浅析Ability框架中Stage模型与FA模型的差异)Aility框架概述Ability是应用所具备能力的抽象，也是应用程序的基本组成单元。OpenHarmony与HarmonyOS的应用程序APP由一个或多个Hap包组成，每个Hap可以包含一个或多个Abilit... 查看详情

openharmony数据转码应用开发实战（下）(代码片段)

背景对于刚入门OpenHarmony开发的小伙伴来说，如果有一个合适的实战项目来练手，对自身的技术能力提升是非常有帮助的，本文将以一个小项目——数据转码应用，来讲解应用开发全流程。在《OpenHarmony数据转码应用开发实战（... 查看详情

#打卡不停更#三方库移植之napi开发[2]c/c++与js的数据类型转换(代码片段)

在《三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI》通过一个HelloOpenHarmonyNAPI样例讲述了NPAI接口开发基础知识。本文在其基础上修改hellonapi.cpp文件，介绍JS类型和C/C++数据类型之间的转换。开发基于最新的OpenHarmony3.2Beta3版本及其对应... 查看详情

#打卡不停更#elt.zip啃论文俱乐部——统计压缩编码机理分析(代码片段)

本文出自ELT.ZIP团队，ELT<=>Elite(精英)，.ZIP为压缩格式，ELT.ZIP即压缩精英。成员：上海工程技术大学大三学生合肥师范学院大三学生成都信息工程大学大二学生黑龙江大学大二学生沈阳农业大学大二学生东南大学成贤学院大... 查看详情

#打卡不停更#智能喂食器(代码片段)

一、介绍​随着人们生活方式的不断改变，宠物猫在许多家庭中占有重要的地位，其凭借独立的个性和易于打理的饲养方式，成为当下上班族喜欢的宠物之一，人们更是把宠物猫和狗作为家庭的重要成员。有铲屎官表示，每月在... 查看详情

#打卡不停更#家庭健康管理平台(代码片段)

0.项目简介身体健康是一切生产生活的硬性基础。健康是福，一切安好，未来才可期。为什么经常跑步体重缺还在往上飘？突发紧急情况怎么处理？在数字时代，如何更好的为人们提供健康福祉、普及健康知识？如何进一步驱动... 查看详情

基于stm32的串口收发讲解（hal库）#打卡不停更#(代码片段)

(基于STM32的串口收发程序（HAL库）)介绍串口（UART通用异步收发器，TTL）通讯是一种设备间的串行全双工通讯方式。由于UART是异步传输，没有传输同步时钟，为了保证数据的正确性，UART采用16倍数据波特率的时钟进行采样。因为... 查看详情

#打卡不停更#三方库移植之napi开发[4]异步调用:callback&promise(代码片段)

三方库移植之NAPI开发系列文章《HelloOpenHarmonyNAPI》、《C/C++与JS的数据类型转换》其接口都是同步的。对IO、CPU密集型任务需要异步处理。NAPI支持异步模型，提供了Promise、Callback2种方式。往期回顾：三方库移植之NAPI开发[1]—HelloO... 查看详情

#打卡不停更#[图文并茂]packstack部署train版openstack(代码片段)

Packstack部署openstack-train介绍如何在centos7.9中使用packstack部署openstack-train。首先需要安装一个最小化安装的centos7.9，按照你的网络环境配置好网络，然后重启。这里我的环境是VMware虚拟机，ip是192.168.10.30.首先我们需要关闭防火墙... 查看详情

#打卡不停更#harmonyos基于arkui(ets)实现雷达扫描(代码片段)

作者：杨尚晓前言雷达扫描是一个比较有科技感的东西，对于科幻迷来说，科幻电影里基本都能看到的画面，一个大大的屏幕上,可以看到雷达扫描的绿幕效果。下面我们使用三种方式来实现这样的雷达效果。项目说明工具版本... 查看详情

#打卡不停更#harmonyos-基于arkui（js）实现虚拟摇杆组件(代码片段)

作者：杨尚晓前言虚拟摇杆在移动端游戏中是最常见看的，用来实现游戏中的精灵移动。本案例中使用jspai中的div和image组件来实现的虚拟摇杆组件，然后监听touch事件获取滑动的方向和位置x，y。开发环境说明工具版本：OpenHarmon... 查看详情

#打卡不停更#harmonyos-基于arkui(ets)实现心电图组件(代码片段)

作者：杨尚晓前言随着大家生活水平的提升，越来越多的人注重自身身心健康，养生成了目前比较热门的活动。心电图是检测心脏活动状态的直观表现，可以通过心电图来观察人提的健康状况。响应鸿蒙万物互联的口号，肯定少... 查看详情

#打卡不停更#简单的js鸿蒙小游戏——飞行棋之游戏逻辑(代码片段)

前言我们之前完成了游戏的基本布局，今天我们接着来讲下如何实现飞行棋的游戏逻辑。游戏逻辑掷骰子：随机地掷出点数1~6，根据骰子点数和当前阵营的棋子状态改变对应棋子的disabled属性，以控制该棋子是否可交互移动，若... 查看详情

#打卡不停更#三方库移植之napi开发[3]通过ide开发napi工程(代码片段)

在三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI一文中，笔者开发的是一个rom包的napi工程。该工程需要编译烧录固件，C++的动态库会集成到开发板的ROM中。在本篇文章中，笔者使用三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI中一样的he... 查看详情