手摸手教你HarmonyOS鸿蒙应用开辟

鸿蒙体系(HarmonyOS)是华为推出的一款面向万物互联的全场景分布式操作体系。鸿蒙支持手机、平板、智能穿戴、智慧屏和车机等多种终端设备，发展史如下：

01 HarmonyOS开辟简介

1.1 技术概念

在万物智联期间重要机遇期，鸿蒙体系结合移动生态发展的趋势，提出了三大技术理念：一次开辟，多端摆设；可分可合，自由流转；统一生态，原生智能。

1.1.1 一次开辟，多端摆设

一次开辟，多端摆设：指的是一个工程，一次开辟上架，多端按需摆设。目的是为了支撑开辟者高效的开辟多种终端设备上的应用。为了实现这一目的，鸿蒙体系提供了几个核心本领，包罗多端开辟环境，多端开辟本领及多端分发机制。
1.1.2 可分可合，自由流转
元服务是鸿蒙体系提供的一种全新的应用形态，具有独立入口，用户可以通过点击、碰一碰，扫一扫等方式直接触发，无需显式安装，由步伐框架后台静默安装利用，可为用户提供便捷服务。

可分可合：在开辟态，开辟者通过业务解耦，把差异的业务拆分为多个模块。在摆设态，开辟者可以将一个或多个模块自由组合，打包成一个 App Pack 统一上架。在分发运行态，每个 HAP 都可以单独分发满意用户单一利用场景，也可以多个 HAP 组合分发满意用户更加复杂的利用场景。

自由流转：传统应用只能在单个设备内运行，当用户有多个设备，且要完成多个任务时，则要在多个设备间来回切换。因此应用可以或许在设备之间流转，不间断给用户提供服务的本领就变得非常重要。鸿蒙体系提供了自由流转的本领，使得开辟者可以方便的开辟出超过多个设备的应用，用户也可以或许方便的利用这些功能。
1.1.3 统一生态，原生智能
统一生态：移动操作体系和桌面操作体系的跨平台应用开辟框架不尽相同，从渲染方式的角度可以归纳为 WebView 染原、原生渲染和自渲染这三类，鸿蒙体系对应的提供体系 WebView、ArkUI 框架和 XComponent 本领来支撑三种类型的跨平台框架的接入。

原生智能：鸿蒙体系内置强大的 AI 本领，面相鸿蒙生态应用的开辟，通过差异条理的 AI 本领开放，满意开辟者的差异开辟场景下的诉求，降低应用的开辟门槛，资助开辟者快速实现应用智能化。
1.2 开辟套件

鸿蒙开辟套件包含筹划、开辟、测试、运维套件以及 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框架

ArkUI框架提供开辟者两种开辟方式：基于ArkTS的声明式开辟范式和基于JS扩展的类Web开辟范式。声明式开辟范式更加简便，类 Web 开辟范式对 Web 及前端开辟者更友爱。
（1）ArkTS的声明式开辟范式：
接纳声明式开辟范式举行应用开辟，相同场景下，对比类 Web 开辟范式代码更为精简，而且在性能内存方面进一步优化提升。另外 ArkUI 框架还提供了 API 扩展机制，通过此种机制举行封装风格统一的 JS 接口。包罗状态管理、布局、组件化、装饰器、动效、事件交互、绘制本领、混合开辟、跨平台。

• 状态管理
  

声明式开辟范式的核心思想是数据驱动 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 开辟范式：

类 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/）并安装（如果看不到就继承往下拉...）
  

• 安装NodeJS
  
• 打开DevEco Studio，如果已经安装NodeJS会自动载入路径
  

△注意：最新LTS版本为18，但鸿蒙要求v14.I9.1~v17.0.0，官方IDE为v16.19.1。

• 手动安装NodeJS：
  

• 安装Ohpm（Open Harmony Pack Manager）鸿蒙包管理体系，安装第三库
  
• 安装Harmony SDK
  

注意的是如果不警惕关闭了，也不需要恐慌，因为再次打开也回不到开始的配置页面了。
此时可以打开 DevEco Studio -> Help -> Diagnose Development Environment 重新配置。

2.2 创建第一个鸿蒙应用

Create Project -> Application -> Empty Ability

Next

Mode：ArkTS的声明式开辟范式与类Web 开辟范式，官方主推Stage 声明式开辟范式。
2.3 项目结构 （有一点点像Android Studio!!）

上部左侧为工程目次，上部中间为代码区，上部右侧为预览区，下部为调试区。
2.3.1 工程目次

• AppScope -> app.json5：应用配置信息，包含报名、应用名、版本等
  

• entry为该工程下的Module应用包
  
• entryability -> EntryAbility.ts 为该Module的启动入口
  

• entry -> pages 存放页面文件
  

• entry -> resources 存放资源文件
  
• entry -> module.json5 配置页面信息，可以用与router跳转
  
• entry -> ohosTest 为测试模块
  

2.3.2 预览区
鸿蒙提供及时的页面预览，且Reload模式可以及时更新UI，终于可以不用Command+R了