HarmonyOS入门-环境及项目搭建

news2024/9/17 20:51:15

近来在学习HarmonyOS，虽然跟着入门项目敲了部分代码，但感觉还是有点云里雾里的，并且官方文档和视频课程只能说是一言难尽，所以打算通过写文章的方式记录下。

学习代码最好的方式是通过项目，官方提供的Demo还是挺不错的，但是没有讲解，且一些文件的命名让我不能见名知意，所以我打算按照自己的理解来重敲一下这部分代码，并写下注释，尽可能的以大白话的方式带大家入门。

所以接下来，我将搭配着文档解析+Demo解析的方式来学习鸿蒙。

1. 搭建环境

1.1 DevEco Studio下载安装

DevEco Studio下载地址

1、打开DevEco Studio下载地址，点击立即下载，然后选择适合自己的版本进行下载
在这里插入图片描述

在这里插入图片描述

2、下载完成后点击安装，一路点击Next

在这里插入图片描述

3、勾选添加环境变量，一路Next，直至安装完成。

在这里插入图片描述

1.2 配置环境

1.2.1 安装Node.js和Ohpm

Node.js。目前开发鸿蒙应用使用的是ArkTS语言，ArkTS是TypeScript的超集，是在TypeScript基础上做了扩展，而TypeScript又是JavaScript的超集。因为Node.js是开源跨平台的JavaScript的运行时环境，所以需要配置它。
Ohpm是HarmonyOS三方库的包管理工具（全名为OpenHarmony Package Manager）
（Node.js版本要求为v14.19.1及以上，且低于v17.0.0；对应的npm版本要求为6.14.16及以上）路径位置；如果本地没有合适的版本，可以选择Install按钮，选择下载源和存储路径后，进行在线下载，单击Next进入下一步。

在这里插入图片描述

后续可在Settings里查看这两个的安装位置

在这里插入图片描述

1.2.2 下载HarmonyOS SDK

该SDK开发工具包包含

Previewer：应用/服务预览器
System-image-phone：本地模拟器Phone设备镜像文件
Toolchains：SDK工具链
JS：JS语言SDK包
ArkTS：ArkTS语言SDK包
…

在这里插入图片描述

后续可以在Setting里查看SDK安装目录

在这里插入图片描述

经过以上步骤，我们的DevEco Studio安装完毕，接下来让我们开始创建第一个项目吧。

2. 创建并运行鸿蒙项目

2.1 创建

1、在欢迎页单击Create Project，创建一个新工程

2、选择创建Application应用，选择EmptyAbility模版，点击Next

由于才开始学习，用不着复杂的模版，创建一个空的Ability即可，看到这，像不像Android里的Activity，一切都那么熟悉，所以学起来别有太大压力。

在这里插入图片描述

3、填写项目名称、保存地址，点击Finish即可。

在这里插入图片描述

Model中的Stage和FA有啥区别？

FA是鸿蒙早期模型，适合简单应用，而有些开发场景FA模型无法解决，为了更方便的开发出分布式环境下的复杂应用，从而推出了Stage模型。

其实不用管这些，使用默认的Stage即可。

2.2 运行

1、创建模拟器

首次运行，需要先创建模拟器，点击Device Manager

在这里插入图片描述

2、点击New Emulator，然后选择相应的配置即可。

注意，这里有LocalEmulator本地模拟器和Remote Emulator远程模拟器，使用远程模拟器需要注册登录华为帐号。

创建完毕后点击Actions中的启动即可。

在这里插入图片描述

3、启动模拟器成功后，点击运行即可
在这里插入图片描述

3. 分析第一个鸿蒙应用

1、AppScope > app.json5

应用的全局配置信息。

大白话：类似于Android中app模块下的build.gralde文件，但是只包含其中的以下内容，不包含依赖等

在这里插入图片描述

可以看到里面包含了

bundleName：包名
vendor：应用程序供应商
versionCode：版本号
versionName：版本名
icon：应用图标
label：应用名称

2、**entry：**应用/服务模块

大白话：类似于Android的app模块目录

src > main > ets：用于存放ArkTS源码
src > main > ets > entryability：应用/服务的入口。

类似于Android中的Activity，是应用或者服务启动的入口

默认会生成很多生命周期方法，注意看这个onWindowStageCreate()方法，在该方法内通过loadContent()加载了pages/index页面
src > main > ets > pages：应用/服务包含的页面

这个就类似于Android的Compose项目中的layout布局
**src > main > resources：**用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等
- base>element
  
  存放字符串、整型数、颜色、样式等资源的json文件，每个资源均由json格式进行定义，例如：
  - boolean.json：布尔型
  - color.json：颜色
  - float.json：浮点型
  - intarray.json：整型数组
  - integer.json：整型
  - pattern.json：样式
  - plural.json：复数形式
  - strarray.json：字符串数组
  - string.json：字符串值
- base>media
  多媒体文件，如图形、视频、音频等文件，支持的文件格式包括：.png、.gif、.mp3、.mp4等。
- base>profile和rawfile
  
  用于存储任意格式的原始资源文件
  
  注意：实际发现，所有的页面page都需要在profile中的main_pages.json此文件内进行注册，否则页面路由跳转时会找不到该页面