最近鼓捣了一下鸿蒙应用研发，想着也简单的记录一下。
一、准备工作
1. DevEco Studio下载安装
通过鸿蒙构建使用的是DevEco Studio，能够直接官网下载：https://developer.huawei.com/consumer/cn/download/
安装过程基本“下一步”即可。
2. 配置SDK
首次启动DevEco Studio时，IDE会引导你下载和配置所需的HarmonyOS SDK。按照向导提示结束即可。
二、创建新项目
如果使用过JetBrains家族的IDE，那么恭喜你，当你打开DevEco Studio的时候，你会有一种亲切感。
因为DevEco Studio就是基于IntelliJ IDEA Community开源版本打造的。
在这个IDE里面，跟你使用JetBrains其他产品一样。他提供了从工程创建、编码、编译、调试到发布的全流程支持。
左边是IntelliJ IDEA、右边是DevEco Studio。
2.1. 项目创建
话不多说，在欢迎页面点击"Create Project"直接创建一个新项目。
2.2. 选择模版
在选择模版的时候，我们选选择"Empty Ability"，这是一个最简单的单页面应用模版。点击Next。
2.3. 配置项目信息
Project name：项目名称。
Bundle name：应用的包名，一般采用反向域名格式，跟Java的包名差不多。
Save location：方案文件的存储路径。
Compile SDK：编译时使用的SDK版本，选择一个新的稳定版本就可以了。
Module name：模块名称，使用默认的entry。
Device type：面向哪个设备类型的，大家先选Phone吧。就是选择这个应用主要
部署完，点Finish。IDE会自动生成计划结构同步需要的依赖。
三、工程结构
项目创建成功之后，左侧会展示出项目的目录结构：
3.1. 工程层
.idea：这是IDE的项目配置，版本控制的时候主要都忽略。
.hvigor：这里面的东西是自动生产的，是构建平台Hvigor的缓存和生成物。
hvigor/、hvigorfile.ts：Hvigor构建脚本和任务定义。根脚本负责全局构建，模块里的脚本负责当前模块的构建。所以你看到根目录和模块里都有。
oh_modules/：这是依赖仓，行看成是Harmony的node_modules，里面放的都是引入的HAR依赖和编译期产物。
oh-package.json5/oh-package-lock.json5：工程依赖清单与锁定文件，类似package.json/lock。
build-profile.json5：工程级构建部署（签名配置集合、构建模式等），模块也有自己的同名材料。
code-linter.json5：代码规范/校验配置。
local.properties：本机SDK路径、签名文件路径等本地化配置，注意不要提交到仓库里去了。
AppScope/：应用级资源与配置范围（对所有模块可见）。
3.2. 模块层
entry/：模块目录，这就是之前配置任务信息时的默认模块。
build-profile.json5：这个模块的构建配置，产物类型（HAP/HAR）、签名引用、编译开关等。
entry/src/main/：真正的业务代码与资源在这里面。
在这里用ArkTS代码进行描述的。就是ets目录：ets目录在entry中，这个目录下是ArkTS源码。比如src/main/ets/pages/Index.ets就是默认创建的UI页面文件，应用的界面就
resources目录：这是资源目录，比如src/main/resources/base/element/string.json就是字符串资源。图片、颜色、样式、布局等都可以放在这个目录。
模块清单，moduleName、abilities、路由表（pages）、设备类型、请求权限等。跨模块启动Ability时会用到 moduleName。就是module.json5：这
mock/：本地Mock数据或接口模拟。
test/：单元测试（ETS/TS 层面的逻辑测试）。
有些目录还是比较熟悉的，当前我们把重心放到模块层的目录上，毕竟业务逻辑在这上面。
四、业务代码
我们找到src/main/ets/pages/Index.ets看一下，默认的代码长什么样子。
@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%')
}
}我们把这份代码拆分成几个部分来看。
4.1. 组件和状态
@Entry：用来标记应用或者模块的入口组件，这样会被EntryAbility首屏加载。
@Component：这是在声明一个UI组件（基于结构体Index）。
@State message：这是响应式状态。初始值'Hello World'。如果被修改了（this.message = 'Welcome'），框架会触发局部重绘，Text(this.message) 会自动显示新值。
4.2. UI树和容器
build()：这是必须实现的渲染函数，返回这个组件的UI树。
RelativeContainer()：相对布局容器，子组件可以借助对齐规则相对容器或其他子组件定位。
.height('100%').width('100%')：就是让容器把父布局占满。
4.3. 文本和样式
Text(this.message)：渲染一段文本，内容绑定到状态message上。
.id('HelloWorld')：给该子节点起一个 id（在相对布局规则、动画、测试等场景就许可引用了）。
.fontSize($r('app.float.page_text_font_size'))：使用资源系统里的float资源（从resources里面读取），便于按设备密度/主题统一管理字号。
.fontWeight(FontWeight.Bold)：加粗。
4.4. 相对布局对齐
.alignRules({...})：给当前子节点设置相对定位规则。
anchor: 'container'：对齐参照物是容器本身（RelativeContainer供应的内置锚点）。
center: { ..., align: VerticalAlign.Center }：垂直方向居中到容器中心。
middle: { ..., align: HorizontalAlign.Center }：水平方向居中到容器中心。
这里的键名center/middle是相对容器支持的规则位（垂直中心/水平中心）。如果要相对另外一个子组件对齐，可以把anchor换成对方的id。
4.5. 交互和重绘
.onClick(() => { this.message = 'Welcome'; })：点击文本之后，把状态改成 'Welcome'。
由于message是@State，修改会触发增量重绘（diff 渲染）：只更新受影响的Text，容器和其它节点不会重复创建。
五、运行应用
5.1. 启动模拟器
在DevEco Studio的顶部菜单栏找到并点击Tools > Device Manager。
在弹出的窗口中，选择Emulator。如果你是第一次使用，需先点击New Emulator，选择一个手机设备镜像，然后点击Download下载系统镜像。
下载完成后，点击你创建好的模拟器右侧的“启动”按钮（一个三角形图标）。稍等一会，一个虚拟手机就会出现在你的电脑屏幕上。
5.2. 运行应用
在DevEco Studio的主界面顶部，确保运行设备已经选中了刚刚启动的模拟器。
点击旁边的绿色三角运行按钮 (Run 'entry')。
DevEco Studio会开始编译、打包并将应用安装到模拟器上。
都完成之后，应用会在模拟器上启动。就能在屏幕上显示'Hello World'。
点击Hello World之后，会表明'Welcome'。
至此，这个简单的'Hello World'示例，搞定了鸿蒙应用开发环境的搭建验证，熟悉了方案创建、代码修改和模拟器运行的全过程。
浙公网安备 33010602011771号