鸿蒙应用开发系列文章：第二天 - 开发工具与基础组件

本文链接：https://blog.youkuaiyun.com/weixin_48845475/article/details/140866704

鸿蒙应用开发从入门到入行

第二天 - 开发工具与基础组件

导读：在本篇文章里，您将掌握鸿蒙开发工具DevEco的基本使用、ArkUI里的基础组件，并通过制作一个简单界面掌握使用

鸿蒙开发工具 - DevEco

工欲善其事，必先利其器。这节就让我们来看看以后会伴随我们鸿蒙开发的工具，如何下载使用

DevEco介绍

HUAWEI DevEco Studio（以下简称DevEco Studio）是基于IntelliJ IDEA Community开源版本打造（Java开发者狂喜，与idea基本一样），为运行在HarmonyOS系统上的应用和服务（以下简称应用/服务）提供一站式的开发平台。
作为一款开发工具，除了具有基本的代码开发、编译构建及调测等功能外，DevEco Studio还具有如下特点：
- 高效智能代码编辑：支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能，提升代码编写效率。
- 多端双向实时预览：支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览，便于快速查看代码运行效果。
- 多端设备模拟仿真：提供HarmonyOS本地模拟器，支持Phone等设备的模拟仿真，便捷获取调试环境。
- DevEco Profiler性能调优：提供实时监控能力和场景化调优模板，便于全方位的设备资源监测，采集数据覆盖多个维度，为开发者带来高效、直通代码行的调优体验
好的，上面内容太多太正式了，咱们提炼一下上面说的四点：
- 能写代码
- 能实时看代码效果
- 能用模拟器模拟真机来调试
- 提供了性能分析工具，帮助app性能调优

运行环境要求

为保证DevEco Studio正常运行，建议电脑配置满足如下要求：

操作系统：Windows10 64位、Windows11 64位
内存：16GB及以上
硬盘：100GB及以上
分辨率：1280*800像素及以上
操作系统：macOS(X86) 12/13/14 macOS(ARM) 12/13/14
内存：8GB及以上
硬盘：100GB及以上
分辨率：1280*800像素及以上
注意：windows版内存需16GB以上，mac需8GB以上，不满足的话可能开发过程会相对比较卡。

下载与安装

https://developer.huawei.com/consumer/cn/deveco-studio/
安装过程就不详细介绍了，总之Windows版就是下一步下一步直到完成（默认安装到C盘，若不愿意则自己改一下安装位置再下一步），Mac版只需要拖入应用程序（Applications）文件夹即可

切换为中文环境

DevEco安装后界面默认是英文的，如果更习惯看中文界面，可通过如下方式设置
windows版修改：
- 进入项目后，菜单栏选File -> Setting -> Plugins -> 搜索chinese -> 启用 -> 重启DevEcho后生效
mac版修改
- 与windows版区别仅在于第一步不是从菜单栏File进入，而是在菜单栏苹果图标后第一项进入

创建项目

若首次打开DevEco Studio，请点击Create Project（新建项目）创建工程。如果已经打开了一个工程，请在菜单栏选择File（文件） > New（新建） > **Create Project（新建项目）**来创建一个新工程。
选择Application应用开发（Application下面的Atomic Service是元服务开发，后面学），选择模板“Empty Ability”，点击Next进行下一步配置。

0000000000011111111.20240709121712.16381945366845903128567694875322:50001231000000:2800:559BEECAEEAD2BF93631633827765313F6B2593E39F0CF65CE811E85ABAADF6C.png

进入配置工程界面，Compatible SDK选择“5.0.0(12)”（默认就是它，这就是鼎鼎大名的纯血鸿蒙版），其他参数保持默认设置即可。

点击放大

点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

项目区域说明

如上图所示：
- 左侧的大区域为项目资源管理区，项目的一切资源都在这里展示
  - 早期我们只需要关注entry这个文件夹即可，我们早期的所有代码都在这个文件夹里编辑
  - 其中entry->src->main->ets->pages这个文件夹早期会成为我们写页面的地方
  - 其中entry->src->main->resource这个文件夹将来会作为我们放图片资源和国际化的地方
  - 其他的文件就不一一介绍，猫林老师不喜欢像其他教程一样上来就把所有文件功效列出来，没意义。看完也记不住，还不如咱们用到什么就介绍什么，然后这些文件自然而然就知道是啥意思了
- 中间是代码编辑区域，以后写代码就是在这里了，如果你觉得中间区域不够大，可以把左侧面板缩小甚至折叠
- 右侧是侧边工具栏，前期我们最常用的就是预览器，这个地方就是实时查看界面效果的地方，并且代码一改，预览器自动刷新
- 底部区域我们前期暂时用不上，将来可能需要在终端里输入命令下载一些三方包、日志里查看console.log的输出等。但目前无须过于关注

Tips：新建项目后，页面代码里默认就会有个Text，并且打开预览器会看到Hello World，尝试修改Text小括号里的内容，给它一个字符串，试试看预览器会否有变化呢？

ArkTS语法说明

ArkTS是HarmonyOS优选的主力应用开发语言，ArkTS是在TypeScript（简称TS）生态基础上做了进一步扩展，保持了TS的基本风格，同时通过规范定义强化开发期静态检查和分析，提升程序执行稳定性和性能。
这里做个简单说明：TypeScript相当于扩展了JavaScript，多了些语法。而ArkTS又相当于扩展了TypeScript，关系如下图

在这里插入图片描述

从上图可以看到JS、TS拥有的语法，ArkTS也有，甚至更多（主要添加了一些声明式UI语法）。
- 注：实际上出于稳定、安全的目的，有部分语法、接口在ArkTS里也不允许使用。但是大家都放心，这些语法、接口甚至在JS里大家也用的少，例如Object.getOwnPropertyDescriptor之类的这种方法。所以大家可以四舍五入默认TS的语法ArkTS都能用即可
最后，猫林老师要说明一点非常重要的事：本教程不会做基础语法讲解
- 猫林老师默认本文章的读者至少是懂：变量、常量、分支语句、循环语句、函数、数组、对象、类、接口这些内容的
- 纳尼？你毛都不会？那麻烦出门左转买包华子抽根烟冷静下。然后坐等猫林老师将来出语法教程。
- 如果你懂TS，那么可以说接下来的语法你毫无压力，只是随着学习了解一些ArkTS新增的语法（这个猫林老师会讲）
- 如果你仅仅只懂JS，其实问题也不大。TS本身在语法层面跟JS区别不大，而且语言是相通的，只要你明白变量、常量、分支语句等等这些概念，其实到时候一看猫林老师的代码，就知道是啥意思。
- 就好比下面这句代码
```
let age: number = 16
```
  - 你用屁股想都知道是声明了一个变量，变量类型是number，值是16
- 退一万步说，假设后面的教程里如果有某个语法你看不懂是什么意思，也可以搜一搜，或者利用AI解答一下，或者直接留言问猫林老师也可以的。绝对不会影响学习进度和体验。而且这样相当于在新知识中补全自己的TS水平，猫林老师觉得大赞呢！
好了，废话不多说。接下来，我们正式进入到鸿蒙开发的世界！

ArkUI - 基础组件

ArkUI（方舟UI框架）为应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发
- 上句是官网对ArkUI的说明
- 这里猫林老师提炼一下：ArkUI相当于是华为内置好的UI组件库，我们可以用这些不同的组件组合在一起构成精美的页面<