声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。
类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成ArkUI应用。

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

开发效率：声明式开发范式更接近自然语义的编程方式，开发者可以直观地描述UI，无需关心如何实现UI绘制和渲染，开发高效简洁。
应用性能：如下图所示，两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无需JS框架进行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强大的能力。

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

ArkUI示意图

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

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

应用模型	页面形态	支持的UI开发范式
Stage模型（推荐）	应用或服务的页面	声明式开发范式（推荐）
	卡片	声明式开发范式（推荐）类Web开发范式
FA模型	应用或服务的页面	声明式开发范式类Web开发范式
	卡片	类Web开发范式

Stage模型

Stage模型

FA模型

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%')
  }
}

HarmonyOS ArkTS 开发基础/语言

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

1.1 基本概念

1.2 两种开发范式