[鸿蒙开发] 1 - 初识鸿蒙,Hello World!

1,094 阅读6分钟

1. 为什么要学习鸿蒙开发

自2019年HarmonyOS面世以来,至今已4年有余。鸿蒙生态设备数量超过7亿台,鸿蒙系统已迅速成为Android、iOS之后的第三大手机操作系统,目前已有多家互联网公司发布多个和鸿蒙有关的岗位,据估计,鸿蒙开发的人才缺口将达到百万规模。

预计今年第四季度,鸿蒙系统会推出商用版本:HarmonyOS Next,只能安装鸿蒙应用。公司的项目目前也准备开发鸿蒙版本了,所以需要投入精力去研究和学习。另外,当下移动端开发的岗位越来越少,针对个人而言,感觉学习鸿蒙开发可能会给自己的程序员生涯续命一波,所以努力学习吧!

2.学习资源汇总

这里会持续记录学习鸿蒙所用到的一些资源。

来源描述
华为开发者官网首推
华为开发者社区
华为官方在线入门课程如果要快速了解并上手鸿蒙开发的话,推荐官方的在线课程

3.鸿蒙开发套件

面向鸿蒙生态的声明式开发套件,包含了鸿蒙生态应用从设计、开发、测试、上架所需的关键技术和产品。

截屏2024-03-14 18.55.34.png

可以先来了解下每个模块的用途,有个大概了解:

名称作用
AppGallery Connect(AGC)为应用的创意、开发、分发、运营等环节提供一站式服务.
DevEco Studio面向全场景多设备的应用开发平台。对比Android Studio、XCode、VSCode
DevEco Testing提供鸿蒙应用及元服务的兼容性、稳定性、安全、性能等测试标准和服务
HarmonyOS Design为 HarmonyOS 应用开发提供一致的体验设计规范及高效设计工具;设计资源免费开放,支持开发者快速调用
ArkTS鸿蒙应用的声明式开发语言,基于TypeScript的扩展
ArkUI声明式UI开发框架,提供了多种组件、布局、动画等能力
ArkCompiler华为自研的统一编程平台,包括编译器、工具链、运行时等,支持高级语言在多种芯片平台的编译和运行

在对鸿蒙开发有了大概认知之后,我们就直接准备开发环境吧,先弄个Hello world出来,这就成功一半了,哈哈😄

3. 搭建开发环境

主要的环境配置流程如下:

image.png

下面会依次进行配置,直到运行出Hello world!

3.1 安装DevEco Studio

使用DevEco Studio,只需要按照如下几步,就可以轻松开发并上架一个应用/服务到华为应用市场:

image.png

安装包下载地址:developer.harmonyos.com/cn/develop/…

选择对应的系统进行安装: 截屏2024-03-14 19.15.56.png

我这里使用的是Mac(ARM),安装包接近1个G,还可以接受。需要注意⚠️:ARM架构芯片系列处理器的Mac仅支持创建API 9及以上版本的工程。

下载.dmg文件之后,双击打开,拖到Applications文件夹即可:

image.png

至此,DevEco Studio安装完成。

3.2 配置开发环境

打开我们刚安装的DevEco Studio,会提示我们是否导入配置,不导入就行:

截屏2024-03-14 19.23.48.png

安装Node.js与ohpm。可以指定本地已安装的Node.js或ohpm路径位置;如果本地没有合适的版本,可以选择Install按钮,选择下载源和存储路径后,进行在线下载,单击Next进入下一步:

image.png

然后点击Next根据提示,同意协议,确认安装项完成安装即可。

ohpm (OpenHarmony Package Manager): 鸿蒙的包管理工具,支持OpenHarmony共享包的发布、安装和依赖管理。

3.3 配置HDC工具环境变量

HDC:Harmony Device Connector,是为开发者提供HarmonyOS应用/服务的调试工具。

这里以Mac为例: 输入下面的命令查看当前shell的类型:

$ echo $SHELL
/bin/zsh

使用vim命令打开.zshrc文件:

vi ~/.zshrc

单击字母“i”,进入Insert模式,并输入以下内容:

export HDC_SERVER_PORT=7035

然后单击Esc键退出编辑模式,输入:wq保存并退出。

然后执行以下命令,使配置的环境变量生效:

source ~/.zshrc

环境变量配置完成后,关闭并重启DevEco Studio.

3.4 诊断开发环境

DevEco Studio提供了开发环境诊断功能,可以在欢迎界面单击Help > Diagnose Development Environment进行诊断。如果您已经打开了工程开发界面,也可以在菜单栏单击Help > Diagnostic Tools > Diagnose Development Environment进行诊断:

image.png

DevEco Studio开发环境诊断项包括电脑的配置、网络、SDK配置等,如果检测未通过,可以根据提示进行修复: 截屏2024-03-14 19.41.05.png

4. Hello world!

4.1 创建项目

打开DevEco Studio,点击Create Project,创建一个新工程,选择Application应用,然后选择“Empty Ability”模板:

image.png

填写工程相关的信息和存储位置,其它的可以先保持默认值,点击Finish完成创建:

image.png

工程创建完成后,DevEco Studio会自动进行工程的同步。

这个项目会有基础代码,就是在屏幕上展示了Hello World,可以直接在工具中预览页面样式。点击开发工具最右边的previewer选项卡即可,如下所示:

截屏2024-03-14 19.51.31.png

4.2 下载模拟器

可以在模拟器和真机中运行项目,如果选择在真机上运行,需要先对工程进行签名(这个跟iOS开发一样哈),然后才能运行在真机设备中,这里先以模拟器运行为例。

模拟器居然分为远程模拟器和本地模拟器,我们就先用本地模拟器吧。

点击左上角DevEco Studio -> Preferences进入设置页面,如果是window,那就是File -> Setting: 截屏2024-03-14 19.57.10.png

勾选Platforms下面的System-image: 截屏2024-03-14 19.59.36.png

勾选Tools下面的Emulator:

然后点击OK进行下载和安装。

4.3 创建模拟器

点击菜单栏的Tools -> Device Manager,在Local Emulator下,可以点击下面的Edit按钮,更改模拟器的存放位置。现在可以点击右下角的New Emulator按钮创建一个新的设备:

截屏2024-03-14 20.10.10.png

在创建模拟器界面,可以选择一个默认的设备;同时也可以单击New Hardware或默认设备后的克隆图标,添加一个新设备,以便自定义设备的相关参数,如尺寸、分辨率、内存等参数:

截屏2024-03-14 20.11.14.png

选择刚下载的System Image,右方可以看到API、Version、CUP/ABI等信息: 截屏2024-03-14 20.20.18.png

点击Next,创建New Device时可以修改设备的名称、尺寸、分辨率、内存等参数,点击Finish即可完成创建: 截屏2024-03-14 20.19.03.png

然后在设备管理页面,点击启动按钮启动模拟器: 截屏2024-03-14 20.22.12.png

4.4 运行

模拟器启动还有音效,属实没有想到,就长下面这个样子: 截屏2024-03-14 20.23.19.png

启动之后,在项目的右上角的设备列表中死活看不到刚创建的这个设备,找了20分钟,尝试了重新添加、重启DevEco Studio、重启电脑,还是无法解决。

终于在网上找到了一个解决方案: 先打开项目,开启模拟器,然后退出DevEco Studio,再打开项目就识别到模拟器了:

截屏2024-03-14 20.39.31.png

终于可以运行起来了:

截屏2024-03-14 20.40.42.png

到这里,已经在鸿蒙开发的路上前进了50%了。从今天的体验来看,鸿蒙的开发文档还是非常细致的,点个赞👍!