HarmonyOS应用开发环境搭建以及快速入门介绍

下载并安装DevEco Studio,这是华为官方提供的HarmonyOS应用开发IDE。访问华为开发者联盟官网下载对应操作系统的版本。安装完成后,配置HarmonyOS SDK和必要的工具链。

确保计算机满足开发环境要求,包括Windows 10 64位或macOS 10.14及以上操作系统,8GB以上内存,以及至少10GB的可用硬盘空间。

创建第一个HarmonyOS项目

官网地址:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_Next-HelloWorld

打开DevEco Studio,选择"Create HarmonyOS Project"创建一个新项目。

选择适合的模板,如"Empty Ability"作为起点。配置项目名称、包名和存储路径,确保选择正确的设备类型和API版本。选择Compatible SDK为5.0.5(17),在编译构建时,DevEco Studio会根据指定的Compatible SDK版本进行编译打包。

DevEco Studio会默认勾选除'Car'以外的全部Device type,保持该选项即可。

项目创建完成后,DevEco Studio会自动生成基本项目结构,包括配置文件、资源文件和初始代码。熟悉项目目录结构,重点关注entry/src/main目录下的config.jsonresourcesjava文件夹。

编写基础UI界面

在Project导航栏中选中 entry -> src -> main -> ets -> pages -> Index.ets,即可看到初始创建项目的模板代码。

@Entry装饰的@Component将作为UI页面的入口。在单个UI页面中,最多可以使用@Entry装饰一个自定义组件。

其中,@Component装饰器装饰了struct关键字声明的数据结构Index。

Index被@Component装饰后具备组件化的能力,通过实现build方法描述UI。

界面由RelativeContainer相对布局容器作为根容器,RelativeContainer支持容器内部的子元素设置相对位置关系,适用于界面复杂场景的情况,对多个子组件进行对齐和排列。

定义字体大小fontSize取值为$r('app.float.page_text_font_size')资源类型;定义文本的字体粗细fontWeight取值为Bold,即字体较粗。

字体大小等数据的值一般存储在/entry/src/main/resources/base/element/float.json文件下,可以按照上文page_text_font_size的方式保存至float.json文件中,并通过$r('app.float.xxx')进行资源引用。

java 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

alignRules属性用于指定设置在相对容器中子组件的对齐规则,仅当父容器为RelativeContainer时生效,在这里定义Text组件横向居中和纵向居中。

开启右边栏的Previewer,预览器将工程中的@Entry作为实现入口,自动实现预览

相关推荐
ChinaDragon2 小时前
HarmonyOS:Web使用Dsbridge与JavaScript完成交互
harmonyos
思录Echo6 小时前
自助易AI数字人外挂技术剖析|如何解决政企智能客服的多端适配难题?
人工智能·华为·harmonyos
方白羽7 小时前
为什么 Android 非要用 Intent 传值?
android·ios·harmonyos
不爱吃糖的程序媛13 小时前
从 0 到 1:react-native-transformer-text-input 鸿蒙化适配实录
react native·transformer·harmonyos
不爱吃糖的程序媛13 小时前
React Native 三方库鸿蒙适配实战:react-native-emoji-popup(Fabric 自定义组件)从 0 到 1
react native·harmonyos·fabric
贾伟康13 小时前
【口算王|19】HarmonyOS ArkTS 回归测试实战:覆盖启动、空数据、异常输入和重复点击
软件测试·harmonyos·arkts·回归测试·hypium
贾伟康13 小时前
【句匠|09】HarmonyOS ArkTS 学习统计实战:汇总正确率、连续学习和薄弱类型
harmonyos·arkts·appstorage·学习统计·本地统计
贾伟康14 小时前
【口算王|17】HarmonyOS ArkTS 亮暗色与视觉令牌实战:集中颜色、间距和交互状态避免页面割裂
harmonyos·arkts·arkui·深色模式·ui设计
搬砖的kk14 小时前
从 0 到 1:react-native-screenshot-aware 鸿蒙适配实战(RNOH 0.84)
react native·华为·harmonyos
贾伟康14 小时前
【口算王|15】HarmonyOS ArkTS 本地状态持久化实战:让保存、删除和页面返回后的数据即时一致
harmonyos·arkts·数据持久化·状态管理·preferences