手摸手教你HarmonyOS鸿蒙应用开辟
鸿蒙体系(HarmonyOS)是华为推出的一款面向万物互联的全场景分布式操作体系。鸿蒙支持手机、平板、智能穿戴、智慧屏和车机等多种终端设备，发展史如下：https://i-blog.csdnimg.cn/blog_migrate/5e41a1b27adadf9e45fd52984fd175d1.png
01 HarmonyOS开辟简介
1.1 技术概念
在万物智联期间重要机遇期，鸿蒙体系结合移动生态发展的趋势，提出了三大技术理念：一次开辟，多端摆设；可分可合，自由流转；统一生态，原生智能。
https://i-blog.csdnimg.cn/blog_migrate/8cc895e10ca565c7053eeb9b1ac8bc0e.png
1.1.1 一次开辟，多端摆设
https://i-blog.csdnimg.cn/blog_migrate/7c8bbfb328680c1a52434602d732e3d7.png
一次开辟，多端摆设：指的是一个工程，一次开辟上架，多端按需摆设。目的是为了支撑开辟者高效的开辟多种终端设备上的应用。为了实现这一目的，鸿蒙体系提供了几个核心本领，包罗多端开辟环境，多端开辟本领及多端分发机制。
1.1.2 可分可合，自由流转
元服务是鸿蒙体系提供的一种全新的应用形态，具有独立入口，用户可以通过点击、碰一碰，扫一扫等方式直接触发，无需显式安装，由步伐框架后台静默安装利用，可为用户提供便捷服务。
https://i-blog.csdnimg.cn/blog_migrate/689b943fb934bc24bd549b007117824f.png
可分可合：在开辟态，开辟者通过业务解耦，把差异的业务拆分为多个模块。在摆设态，开辟者可以将一个或多个模块自由组合，打包成一个 App Pack 统一上架。在分发运行态，每个 HAP 都可以单独分发满意用户单一利用场景，也可以多个 HAP 组合分发满意用户更加复杂的利用场景。
https://i-blog.csdnimg.cn/blog_migrate/20a0f6b1b64b06fb530620de06055004.png
自由流转：传统应用只能在单个设备内运行，当用户有多个设备，且要完成多个任务时，则要在多个设备间来回切换。因此应用可以或许在设备之间流转，不间断给用户提供服务的本领就变得非常重要。鸿蒙体系提供了自由流转的本领，使得开辟者可以方便的开辟出超过多个设备的应用，用户也可以或许方便的利用这些功能。
1.1.3 统一生态，原生智能
统一生态：移动操作体系和桌面操作体系的跨平台应用开辟框架不尽相同，从渲染方式的角度可以归纳为 WebView 染原、原生渲染和自渲染这三类，鸿蒙体系对应的提供体系 WebView、ArkUI 框架和 XComponent 本领来支撑三种类型的跨平台框架的接入。
https://i-blog.csdnimg.cn/blog_migrate/f5760945b849fbde693c4524ab3992e8.png
原生智能：鸿蒙体系内置强大的 AI 本领，面相鸿蒙生态应用的开辟，通过差异条理的 AI 本领开放，满意开辟者的差异开辟场景下的诉求，降低应用的开辟门槛，资助开辟者快速实现应用智能化。
1.2 开辟套件
https://i-blog.csdnimg.cn/blog_migrate/fda828d674dccb3c61ff29cdbb774bcd.png
鸿蒙开辟套件包含筹划、开辟、测试、运维套件以及 OS 开放本领集:
HarmonyOS Design：鸿蒙视觉筹划套件ArkTS：鸿蒙编程语言ArkUI：鸿蒙声明式UI框架ArkCompoler：鸿蒙方舟编译器DevEco Studio：鸿蒙开辟IDEDevEco Testing：鸿蒙测试套件AppGallery Connect：鸿蒙应用发布套件
1.2.1 开辟语言 - ArkTS
ArkTS基于TypeScript（简称TS）的超集，扩展名为.ets，继承了TS的全部特性（NEXT版本有阉割）。引入了静态类型，扩展了声明式UI、状态管理等本领，让开辟者以更简便、更自然的方式开辟高性能应用。
1.2.2 ArkUI框架
https://i-blog.csdnimg.cn/blog_migrate/ba4aa3460057dc66a7c7bee361df1f04.png
ArkUI框架提供开辟者两种开辟方式：基于ArkTS的声明式开辟范式和基于JS扩展的类Web开辟范式。声明式开辟范式更加简便，类 Web 开辟范式对 Web 及前端开辟者更友爱。
（1）ArkTS的声明式开辟范式：
接纳声明式开辟范式举行应用开辟，相同场景下，对比类 Web 开辟范式代码更为精简，而且在性能内存方面进一步优化提升。另外 ArkUI 框架还提供了 API 扩展机制，通过此种机制举行封装风格统一的 JS 接口。包罗状态管理、布局、组件化、装饰器、动效、事件交互、绘制本领、混合开辟、跨平台。
[*]状态管理
https://i-blog.csdnimg.cn/blog_migrate/b8c3da2e5eff2e4a20a63f9d7e47a00e.png
声明式开辟范式的核心思想是数据驱动 UI 厘革，通过提供的状态举行数据管理，这里状态管理指的是，管理数据发生厘革时，UI 组件更新的范围。
@State：组件拥有的状态属性，当@State 装饰的变量更改时，组件会重新渲染更新 UI。
@Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。
@Prop：类似@Link，但子组件所做的更改不会同步到父组件上，属于单向通报。
@Provide：作为数据的提供方，可以更新其子节点的数据，并触发页面渲染。
@Consume：在感知到@Provide 数据更新后，会触发当前自定义组件的重新渲染。
@StorageLink ：组件通过利用@StorageLink(key)装饰的状态变量，与AppStorage 创建双向数据绑定，key为 AppStorage 中的属性键值。当创建包含@StorageLink 的状态变量的组件时，该状态变量的值将利用AppStorage 中的值举行初始化。在 UI 组件中对@StorageLink 的状态变量所做的更改将同步到AppStorage ，并从 AppStorage 同步到任何其他绑定实例中。
@StorageProp ：组件通过利用@StorageProp(key)装饰的状态变量，将与 AppStorage 创建单向数据绑定，key 标识 AppStorage 中的属性键值。当创建包含@StoageProp 的状态变量的组件时，该状态变量的值将利用 AppStorage 中的值举行初始化。AppStorage 中的属性值的更改会导致绑定的 UI 组件举行状态更新。
[*]布局
用特定的组件或者属性来管理用户页面所放置 UI 组件的大小和位置。ArkUI 框架支持多种布局方式，如弹性布局、列表、宫格、栅格布局等。
[*]组件化
组件是 ArkUI 框架中的基础显示单元，统统 UI 显示的内容都是组件。ArkUI 框架提供多种开箱即用的 UI 组件，如文本显示Text、Button等，并提供了向多种设备形态的多态 UI 本领。开辟者可以直接利用预置组件或者自定义自己的组件。
[*]装饰器
自定义组件的场景中，通常会遇到要动态传入差异的 UI 元素的环境，为了满意该场景 ArkUI 框架同时提供了动态构建 UI 元素的本领。
@Builder：可通过 @Builder 装器举行形貌，该装器可以修饰函数，此函数可以在 build() 函数之外声明，并在 build() 函数中或其他 @Builder 修的函数中利用，在一个自定义组件内快速生成多个布局内容。
@Style：声明式范式为了避免开辟者对重复样式的设置，通过@Styles 装器可以将多条样式设置提炼成一个方法，直接在组件声明的位置利用。
@Extend：@Extend 装饰器可以将新的属性函数添加到内置组件上，如Text、Column、Button 等，快速扩展原生组件。
[*]动效
与传统开辟方式差异，ArkUI动画是由数据厘革驱动动画启动，而不再是直接控制动画的播放。
1、属性动画：组件的某些通用属性厘革时，可以通过属性动画实现渐变效果，比如设置组件size。
2、显式动画：全局 animateTo 显式动画接口，指定由于闭包代码导致的状态厘革插入过渡动效，比如组件的显示与隐藏。
3、转场动画：转场动画包罗间转场、组件内过渡转场和共享元素转场三种，比如页面跳转。
[*]事件交互
ArkUI 框架提供了很多交互事件，这些事件提供了差异的信息用于处理相干步伐交互逻辑，大抵分位两类：
1、UI 组件事件：比如 TextInput 输入框产生的 onEditChange 输入文本变更事件，List 列表组件产生的 onScrollIndex 列表滚动事件。
2、交互事件：点击事件，拖拽事件，焦点事件，触摸事件，按键事件，鼠标事件，手势事件等
[*]绘制本领
ArkUI 框架提供两种 2D 自定义绘制本领。一种是通过图形组合的方式，利用布局、绝对定位和各种图形举行组合实现；另种是通过绘制 API 在 Canvas 画布上举行绘制。
[*]混合开辟
ArkUI 框架提供了XComponent 组件，支持加载应用动态库、NAPI 跨语言调用，举行 C++绘制本领的开辟。
[*]跨平台
鸿蒙生态构建了 ArkUI 跨平台框架的核心办法，将相应的本领扩展到 iOS 和 Android平台上。开辟者可以通过一份代码，结合相应的工具链，同时生成多个 OS 平台的应用工程，并可编译出相应的应用步伐，在相应的平台运行。
(2)类Web 开辟范式：
https://i-blog.csdnimg.cn/blog_migrate/6e088a7f53408b52e109bab407ff4a94.png
类 Web 范式的整体接口接纳与传统 Web 开辟相似的筹划理念，接纳 HML、CSS与 JS 三种类型的文件举行页面开辟，开辟者可以基于此范式方便地举行 UI 构建，同时提供数据绑定机制，支持通过 JS 举行数据更新，进而更新UI。
02 第一个鸿蒙版Hello World
2.1 开辟环境搭建
[*]安装DevEco Studio（最新版为3.3.1）
[*]下载DevEco Studio（https://developer.huawei.com/consumer/cn/deveco-studio/）并安装（如果看不到就继承往下拉...）
https://i-blog.csdnimg.cn/blog_migrate/05575c3569deb8013a626bb84389e58d.png
[*]安装NodeJS
[*]打开DevEco Studio，如果已经安装NodeJS会自动载入路径
https://i-blog.csdnimg.cn/blog_migrate/465aa0d9686256afc3ee3e6ea6489888.png
△注意：最新LTS版本为18，但鸿蒙要求v14.I9.1~v17.0.0，官方IDE为v16.19.1。
[*]手动安装NodeJS：
https://i-blog.csdnimg.cn/blog_migrate/7ad0448010655f5eb2a6535df1d9cb32.png
[*]安装Ohpm（Open Harmony Pack Manager）鸿蒙包管理体系，安装第三库
[*]安装Harmony SDK
注意的是如果不警惕关闭了，也不需要恐慌，因为再次打开也回不到开始的配置页面了。
此时可以打开 DevEco Studio -> Help -> Diagnose Development Environment 重新配置。
https://i-blog.csdnimg.cn/blog_migrate/eac2330d7b95f213ce3972b84005d4d5.png
2.2 创建第一个鸿蒙应用
Create Project -> Application -> Empty Ability
https://i-blog.csdnimg.cn/blog_migrate/a4cb90ce1f22f6a3ad55bcf66799caf3.png
Next
https://i-blog.csdnimg.cn/blog_migrate/6fb3fe57874b29d3c0dae21ee20424d2.png
Mode：ArkTS的声明式开辟范式与类Web 开辟范式，官方主推Stage 声明式开辟范式。
2.3 项目结构 （有一点点像Android Studio!!）
https://i-blog.csdnimg.cn/blog_migrate/d2ea0e66d20eacaa6b7ec41443c972bd.png
上部左侧为工程目次，上部中间为代码区，上部右侧为预览区，下部为调试区。
2.3.1 工程目次
[*]AppScope -> app.json5：应用配置信息，包含报名、应用名、版本等
https://i-blog.csdnimg.cn/blog_migrate/fecc0e58cbe3374a8fa39072aa1964c1.png
[*]entry为该工程下的Module应用包
[*]entryability -> EntryAbility.ts 为该Module的启动入口
https://i-blog.csdnimg.cn/blog_migrate/0c9a17d4bc4abcdc1df2d8fc012cdbb0.png
[*]entry -> pages 存放页面文件
https://i-blog.csdnimg.cn/blog_migrate/d197c8b2482e6ee3133195f3984b9646.png
[*]entry -> resources 存放资源文件
[*]entry -> module.json5 配置页面信息，可以用与router跳转
[*]entry -> ohosTest 为测试模块
2.3.2 预览区
鸿蒙提供及时的页面预览，且Reload模式可以及时更新UI，终于可以不用Command+R了
页:
[1]