[转载] 鸿蒙 Next 入门

原文作者：Dynamic48570
原文链接：https://juejin.cn/post/7444521944459165711


一、开篇

本文介绍鸿蒙next的概念以及开发入门的相关知识

二、鸿蒙 Next 基础认知

2.1 鸿蒙 Next 是什么

  -  鸿蒙 next 即 HarmonyOS NEXT，是华为技术有限公司于 2024 年正式发布的原生鸿蒙系统，也被称为 “纯血鸿蒙”：

特点

  -  全栈自研：实现了系统底座的全部自研，从内核、数据库到编程语言、AI 大模型等全面自研，不依赖国外编程语言和操作系统内核等核心技术，真正实现了国产操作系统的自主可控，标志着中国在操作系统领域取得突破性进展1.

  -  性能提升：可实现整机性能提升 30%，功耗下降 20%，系统的流畅度、性能、安全特性等提升显著 。比如在手机上，其系统流畅度相比前代有了大幅提升，应用的启动速度更快、多任务处理更加高效145.

  -  AI 融合：首次将 AI 能力融入系统，带来 AIGC 图像生成、AIGC 声音修复、AI 图像识别等功能，提升了小艺智能体和鸿蒙原生应用的智能体验，还把 AI 能力应用到了信息无障碍领域，其全新的声音修复功能可以帮助语言障碍人士识别语义、修复声音145.

还提出了一次开发多端部署和自由流转的概念


2.2 鸿蒙 Next 的应用场景

  -  多设备类型

  -  智能手机
  -  平板电脑
  -  智能穿戴设备
  -  智能家居设备

  -  一次开发多端部署和自由流转

邮件在手机上编辑一部分，走到二合一笔记本旁边边可以无缝把邮件应用拖到笔记本上继续编辑


三、开发环境搭建

3.1 准备工作

  -  电脑操作系统：

  -  Windows
  -  macOS

  -  在华为开发者联盟注册开发者


3.2 安装集成开发环境（IDE）

  -  下载DevEcoStuido

  -  下载地址https://developer.huawei.com/consumer/cn/download/


  -  安装流程（windows为例子）：

  -  下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEco Studio安装向导。在如下界面选择安装路径，默认安装于C:\Program Files路径下，也可以单击浏览（B）... 指定其他安装路径，然后单击Next。








  -  在如下安装选项界面勾选DevEco Studio后，单击Next，直至安装完成。








  -  安装完成后，单击Finish完成安装。






说明

  -  DevEco Studio提供开箱即用的开发体验，将HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化DevEco Studio安装配置流程。

  -  HarmonyOS SDK已嵌入DevEco Studio中，无需额外下载配置。HarmonyOS SDK可以在DevEco Studio安装位置下DevEco Studio\sdk目录中查看。如需进行OpenHarmony应用开发，可通过Settings > OpenHarmony SDK页签下载OpenHarmony SDK。





四、ArkTS 编程语言入门

4.1 ArkTS 概述

  -  ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，保持了TS的基本风格，同时通过规范定义强化开发期静态检查和分析，提升程序执行稳定性和性能。

  -  当前，在UI开发框架中，ArkTS主要扩展了如下能力：

  -  基本语法：ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。

  -  状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活地利用这些能力来实现数据和UI的联动。

  -  渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。



4.2 ArkTS 基本语法

  -  变量与数据类型

常见的类型是number、string、boolean、void、object

  -  函数

函数声明引入一个函数，包含其名称、参数列表、返回类型和函数体。

以下示例是一个简单的函数，包含两个string类型的参数，返回类型为string：

1. function add(x: string, y: string): string {  let z: string = `${x} ${y}`;  return z;}

复制代码

  -  接口

接口声明引入新类型。接口是定义代码协定的常见方式。

任何一个类的实例只要实现了特定接口，就可以通过该接口实现多态。

接口通常包含属性和方法的声明

示例：

1. interface Style {  color: string; // 属性}interface AreaSize {  calculateAreaSize(): number; // 方法的声明  someMethod(): void;     // 方法的声明}

复制代码

  -  类

类声明引入一个新类型，并定义其字段、方法和构造函数。

在以下示例中，定义了Person类，该类具有字段name和surname、构造函数和方法fullName：

1. class Person {  name: string = '';  surname: string = '';  constructor (n: string, sn: string) {    this.name = n;    this.surname = sn;  }  fullName(): string {    return this.name + ' ' + this.surname;  }}

复制代码

4.3 ArkUI(方舟UI框架)

  -  ArkTS 中UI组件可以当作构建应用界面的 “积木”，通过组合不同组件搭建形形色色的ui页面。

  -  系统内置的常用基础组件有很多，如文本组件（Text）、按钮组件（Button）、布局组件（Column、Row 等）

1. // xxx.ets
   
2. @Entry
   
3. @Component
   
4. struct RowExample {
   
5.   build() {
   
6.     Column({ space: 5 }) {
   
7.       // 设置子组件水平方向的间距为5
   
8.       Text('space').width('90%')
   
9.       Row({ space: 5 }) {
   
10.         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
    
11.         Row().width('30%').height(50).backgroundColor(0x00FFFF)
    
12.       }.width('90%').height(107).border({ width: 1 })
    
13. ​
    
14.       // 设置子元素垂直方向对齐方式
    
15.       Text('alignItems(Bottom)').width('90%')
    
16.       Row() {
    
17.         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
    
18.         Row().width('30%').height(50).backgroundColor(0x00FFFF)
    
19.       }.width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
    
20. ​
    
21.       Text('alignItems(Center)').width('90%')
    
22.       Row() {
    
23.         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
    
24.         Row().width('30%').height(50).backgroundColor(0x00FFFF)
    
25.       }.width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
    
26. ​
    
27.       // 设置子元素水平方向对齐方式
    
28.       Text('justifyContent(End)').width('90%')
    
29.       Row() {
    
30.         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
    
31.         Row().width('30%').height(50).backgroundColor(0x00FFFF)
    
32.       }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
    
33. ​
    
34.       Text('justifyContent(Center)').width('90%')
    
35.       Row() {
    
36.         Row().width('30%').height(50).backgroundColor(0xAFEEEE)
    
37.         Row().width('30%').height(50).backgroundColor(0x00FFFF)
    
38.       }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
    
39.     }.width('100%')
    
40.   }
    
41. }

复制代码

4.4 数据绑定与响应式编程实战

  -  声明式ui描述

ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。

1. Column() {
   
2.   Row() {
   
3.     Image('test1.jpg')
   
4.       .width(100)
   
5.       .height(100)
   
6.     Button('click +1')
   
7.       .onClick(() => {
   
8.         console.info('+1 clicked!');
   
9.       })
   
10.   }
    
11. }

复制代码

  -  状态管理

在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。

自定义组件拥有变量，变量必须被装饰器装饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新。如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。 下图展示了State和View（UI）之间的关系。






  -  View(UI)：UI渲染，指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。

  -  State：状态，指驱动UI更新的数据。用户通过触发组件的事件方法，改变状态数据。状态数据的改变，引起UI的重新渲染。

  -  状态变量：被状态装饰器装饰的变量，状态变量值的改变会引起UI的渲染更新。示例：@State num: number = 1,其中，@State是状态装饰器，num是状态变量。

  -  常规变量：没有被状态装饰器装饰的变量，通常应用于辅助计算。它的改变永远不会引起UI的刷新。以下示例中increaseBy变量为常规变量。

  -  数据源/同步源：状态变量的原始来源，可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。以下示例中数据源为count: 1。

  -  命名参数机制：父组件通过指定参数传递给子组件的状态变量，为父子传递同步参数的主要手段。示例：CompA({ aProp: this.aProp })。

  -  从父组件初始化：父组件使用命名参数机制，将指定参数传递给子组件。子组件初始化的默认值在有父组件传值的情况下，会被覆盖。