HarmonyOS入门-环境及项目搭建

1,490 阅读6分钟

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

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

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

1. 搭建环境

1.1 DevEco Studio下载安装

DevEco Studio下载地址

1、打开DevEco Studio下载地址,点击立即下载,然后选择适合自己的版本进行下载

image.png

image.png

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

image.png

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

image.png

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进入下一步。

image.png

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

image.png

1.2.2 下载HarmonyOS SDK

该SDK开发工具包 包含

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

image.png

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

image.png

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

2. 创建并运行鸿蒙项目

2.1 创建

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

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

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

image.png

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

image.png

Model中的Stage和FA有啥区别?

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

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

2.2 运行

1、创建模拟器

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

image.png

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

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

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

image.png

3、启动模拟器成功后,点击运行即可

image.png

image.png

3. 分析第一个鸿蒙应用

1、AppScope > app.json5

应用的全局配置信息。

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

image.png

可以看到里面包含了

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

2、entry: 应用/服务模块

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

  • src > main > ets:用于存放ArkTS源码

  • src > main > ets > entryability:应用/服务的入口。

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

    默认会生成很多生命周期方法,注意看这个onWindowStageCreate()方法,在该方法内通过loadContent()加载了pages/index页面

image.png

  • src > main > ets > pages:应用/服务包含的页面

    这个就类似于Android的Compose项目中的layout布局

image.png

image.png

  • 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:字符串值

image.png

-   base>media 多媒体文件,如图形、视频、音频等文件,支持的文件格式包括: **.png****.gif****.mp3****.mp4**等。

    

image.png

-   base>profile和rawfile

    用于存储任意格式的原始资源文件

    **注意:实际发现,所有的页面page都需要在profile中的main_pages.json此文件内进行注册,否则页面路由跳转时会找不到该页面**

    

image.png

3、src > main > module.json5

大白话:类似于Android中的Manifest文件

包含:

image.png

4. 学习途径

通过以上内容,就能大概了解鸿蒙环境的搭建和鸿蒙项目的构成。其实,以上内容在官网上都有,下面我列出关于鸿蒙的官方学习资料,大家可以自己来学习。这些内容其实就够了,不建议去再买什么培训班的课程,都是智商税。(我按照自己的推荐重点先后列出)

途径1:

官方指南和API参考,各种内容的开发和API接口文档都能找到,可以重点看这个。

image.png

途径2:

HarmonyOS学堂

官方的这个学堂内容,规划的路径还是不错的,但是建议只看文档,别看视频,视频真的啥也不是还浪费时间。里面的案例Demo不错,但是有时会涉及其他内容没学到,搭配着指南和API文档最好。

image.png

途径3:

官方的Codelabs,里面有关于各部分内容的官方Demo,跟着项目学习最快,但是建议自己敲一遍而不是只是看一遍觉得看懂了就完事了。

image.png

途径4:

官方论坛,好多指南里没法找到的内容,在论坛里可以看到具体的解释,例如下面可以看到关于HAP、module等基本概念的解析。HarmonyOS开发体验官的好多内容写的很详细,像是官方的解释文档。遇到bug等问题在这里找准没错,毕竟互联网上关于鸿蒙的资料还很少。

image.png

途径5:

官网的学习路径,里面有一些关于各种业务模块的视频课程,这个我还没仔细看过,各位根据自己的需要来观看。

image.png

参考文档

配置开发环境

创建和运行Hello World

工程模板和开发语言介绍

HarmonyOS体验官#Stage模型与FA 模型的异同

华为论坛

工程介绍

应用模型开发指南上新介绍