鸿蒙开发第一行代码从 “Hello CSDN !“ 开始 ~

Abdu1106

已于 2023-12-10 12:34:33 修改

阅读量1.1k

点赞数 35

分类专栏：鸿蒙开发文章标签： harmonyos 华为

于 2023-12-10 03:36:16 首次发布

本文链接：https://blog.csdn.net/weixin_43203970/article/details/134903466

版权

鸿蒙开发专栏收录该内容

4 篇文章 2 订阅

订阅专栏

本文介绍了如何在鸿蒙DevEcoStudio中创建新项目，包括项目目录结构、基本装饰器如@Entry、@Component和@State的用法，以及Text组件和build()、Row()、Column()函数的使用。通过实例展示了如何编写HelloCSDN组件并预览效果。

摘要由CSDN通过智能技术生成

1. 创建项目

打开开发工具 DevEco Studio
点击左侧菜单中的 Create Project
选择 Empty Ability 点击 Next
填写 项目名称，选择 项目保存目录，点击 Finish

等待项目创建完毕…

2. 初步认识项目目录及文件

我们会看到项目创建完毕后默认会打开一个 Index.ets 文件，此文件就是我们项目中的第一个页面 ~

项目目录结构
鸿蒙项目目录结构和其他框架的项目目录结构还是有错差异的，下面我们来简单的了解一下鸿蒙 ArkTS 项目 目录结构

|—— src
	|—— main
	| 	|—— ets // ArkTS 源码文件目录
	|	| 	|—— entryability // 应用入口
	|	| 	|—— pages // 存放项目的页面
	|	|	| 	|—— Index.ets // Index 页面的 ArkTS 文件
	| 	|—— resources // 存放音视频等项目所需的资源文件
	| 	|—— module.json5 // 模块配置文件

后续课程会有详细讲解其他目录及文件…

3. 初步认识装饰器

3.1 `@Entry` 装饰器

我们需要在每个页面的入口文件使用 @Entry 来进行装饰，说明此文件是该页面的入口文件

3.2 `@Component` 装饰器

我们每次要声明一个组件的时候，首先需要使用 struct 关键字来定义一个组件，然后通过 @Component 来进行装饰

3.3 `@State` 装饰器

声明变量的时候使用，如果我们用 @State 来装饰数据时，数据类型为boolean、string、number 类型时，可以观察到数值的变化，数值变化页面 UI 也会发生对应的渲染改变

4. 初步认识几个函数

4.1 `build()` 函数

渲染组件函数，组件内容都写在 build() 函数中

4.2 `Row()` 函数

水平方向布局的容器
类似 css flex 布局中的 flex-direction: row，里面的容器会水平方向进行排列

4.3 `Column()` 函数

垂直方向布局的容器
类似 css flex 布局中的 flex-direction: column，里面的容器会垂直方向进行排列

5. 初步认识 Text 文本组件

5.1 `Text()` 组件的使用

需要渲染文本时候使用，用法: Text(content?: string | Resource)

直接写入文本内容，Text('文本内容')
先声明变量，然后使用 Text() 组件来渲染
@State message: string = 'Hello CSDN !'
...
Text(this.message)

5.2 修改文本样式

修改文本样式其实也很简单，在 Text() 后面直接 .方法() 的方式来调用进行修改样式

修改文字大小
// 字号设置为 32
Text('文本内容').fontSize(32)
修改文字颜色
// 文字颜色设置为 #36d
Text('文本内容').fontColor('#36d')

6. 编写 Hello CSDN

在 src/main/ets/pages 目录新建一个 ArkTS 文件
在 pages 文件夹上鼠标右击 --> New --> ArkTS File

文件名输入 HelloCSDN 点击 Enter 键就可以新建 ArkTS 文件了

在 HelloCSDN.ets 文件中编写如下代码：

@Entry // 入口文件装饰器
@Component // 组件装饰器
  // Hello 组件
struct Hello {
  // 声明 message 变量，类型为 string
  @State message: string = 'Hello CSDN !'
  // 组件渲染函数
  build() {
    // 水平排列
    Row() {
      // 垂直排列
      Column() {
        // 渲染文本
        Text(this.message)
          // 设置文本样式
          .fontSize(50) // 字号
          .fontColor('#36d') // 字体颜色
      }
      // 设置列宽
      .width('100%')
    }
    // 设置行高
    .height('100%')
  }
}