一、ArkUI (方舟开发框架) 概述

        ArkUI 为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。

1.1 基本概念

• UI：即用户界面。

• 组件：UI构建与显示的最小单位，形成了在界面中的样子。如文本、按钮、列表、单选框、复选框等。

• 布局：它定义了组件在界面中的位置。

1.2 两种开发范式

        针对不同的应用场景及技术背景，ArkUI 提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。

• 声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。

• 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成ArkUI应用。

官方推荐使用声明式开发范式来构建UI，主要基于以下几点考虑：

• 开发效率：声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁。

• 应用性能：如下图所示，两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。

• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力。

        这就类似 Android 开发时是使用 Java 还是 Kotlin 都支持。

​

1.3 不同应用类型支持的开发范式

        根据所选用HarmonyOS应用模型（Stage模型、FA模型）和页面形态（应用或服务的普通页面、卡片）的不同，对应支持的UI开发范式也有所差异。

 Stage模型

FA模型

​

二、ArkTS 声明式开发范式

        基于ArkTS的声明式开发范式的ArkUI是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建HarmonyOS应用UI所必需的能力。

2.1 开发能力

• ArkTS：在TypeScript（简称TS）生态基础上做了进一步扩展。扩展能力包含声明式UI描述、自定义组件、动态扩展UI元素、状态管理和渲染控制。

• 布局：它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式，除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外，也提供了相对复杂的列表、宫格、轮播。

• 组件：形成了在界面中的样子，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。

• 页面路由：应用可能包含多个页面，可通过页面路由实现页面间的跳转。

• 组件导航：一个页面内可能存在组件间的导航如典型的分栏，可通过导航组件实现组件间的导航。

• 图形：ArkUI 提供了多种类型图片的显示能力和多种自定义绘制的能力，以满足开发者的自定义绘图需求，支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。

• 动画：动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验，框架提供了丰富的动画能力，除了组件内置动画效果外，还包括属性动画、显式动画、自定义转场动画以及动画API等，开发者可以自定义动画轨迹。

• 交互事件：交互事件是UI和用户交互的必要元素。入园触摸事件、鼠标事件、键盘按键事件、焦点事件等事件。

2.2 整体架构

整体架构

• 声明式UI前端：提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。

• 语言运行时：选用ArkUI语言运行时，提供了针对UI范式语法的解析能力、跨语言调用支持的能力和TS语言高性能运行环境。

• 声明式UI后端引擎：后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。

• 渲染引擎：提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕的能力。

• 平台适配层：提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。

 三、ArkTS 基础类型

3.1 Any 类型

        声明为 any 的变量可以赋予任意类型的值。

let obj :any = "";//字符串类型
obj  = 1;//数字类型

3.2 数字类型

let decLiteral: number = 6;    // 十进制，默认情况下就是十进制
let binaryLiteral: number = 0b1010; // 二进制 0b开头
let octalLiteral: number = 0o744;    // 八进制 0o开头
let hexLiteral: number = 0xf00d;    // 十六进制 0x开头

3.3 字符串类型

        一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号来定义多行文本和内嵌表达式。

let name: string = "Scc";
let years: number = 18;
let words: string = ` ${name} 今年 ${years} 岁了`;

3.4 布尔类型

        表示逻辑值：true 和 false。

let flag: boolean = true;

3.5 联合类型

        可指定多个类型。如下，指定类型 string | boolean，可赋值"abc" 和 true。未指定 number 类型，所以赋值 1 报错。

let allType: string | boolean;
allType = "abc";
allType = true;
allType = 1;

3.6 数组类型

let arr: number[] = [1, 2];
let arrStr: string[] = ["1", "2"];
let arrList:Array<number> = [3,4];

3.7 元组类型

        类似 map ,已键值对的形式存储。

let x: [string, number];
x = ['张三', 18];    // 运行正常
x = ['李四', 21];    // 运行正常
x = [1, '王五'];    // 报错

3.8 枚举类型

        用于定义数值集合。

enum Number {Three, Four, Five};
let num: Number = Number.Three;

3.9 void

        用于标识方法返回值的类型，表示该方法没有返回值。​

function testFun(): void {
    //你看着写吧
}
function testFun2(): string {
  //你看着写吧
  return "哈哈哈";
}

四、基本语法

自定义变量不能与基础通用属性/事件名重复。

• 装饰器（Decorators）：装饰器用于修饰类、结构、方法以及变量，并赋予其特殊的含义。在 ArkTS 中，常见的装饰器有 @Entry、@Component 和 @State。例如:

  • @Component 用于标识自定义组件。如后面提到的自定义弹窗

  • @Entry 用于标识入口组件。

  • @State 用于标识组件中的状态变量。

• UI 描述：UI 是以声明式的方式来描述的，通常在组件的 build 方法中完成。使用系统组件（如 Column、Text、Button 等）来构建 UI 布局和展示内容。

• 自定义组件：自定义组件是可复用的 UI 单元，可以通过组合其他组件来创建。自定义组件使用 @Component 装饰器进行标识。

• 属性方法：组件的属性可以通过链式调用的方式配置，如 fontSize()、width()、height()、backgroundColor() 等。这些方法允许开发者以直观的方式设置组件的外观和行为。

• 事件方法：组件的事件响应逻辑可以通过链式调用的方式设置。例如，在 Button 组件后面跟随的 onClick() 方法用于处理按钮点击事件。

• 变量和类型:

  • 所有的状态装饰器变量（如 @State）需要显式声明变量类型，不允许声明为 any 类型，并且不支持 Date 数据类型。

  • 静态类型的使用增强了代码的可读性和可维护性。

上面一大堆废话，反正你参考下面这种格式来做就行。

@Entry
@Component
struct Index {
  //数据
  num :number = 3;
  build() {
    //UI
    Row() {
      Column() {
        Text('你好，开发者同学')
          .fontSize(24)

        ......
      }
      .width('100%')
    }
    .height('100%')
  }
}

​