在开发之前，我们需要先了解关于鸿蒙的一些基本概念：UI框架、应用模型

基本概念

UI框架

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

方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。

在介绍上面两种开发范式之前，我们再了解两个基本的概念：

• UI：即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。
• 组件：UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

开发范式

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

以下是两种开发范式的对比：

附图：方舟开发框架示意图

0000000000011111111.20240415144252.99562182254444988535830405075591.png

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

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

应用模型

上面提到了应用模型，那这个应用模型又是什么？应用模型是鸿蒙为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。

随着系统的演进发展，HarmonyOS先后提供了两种应用模型：

• FA（Feature Ability）模型： HarmonyOS API 7开始支持的模型，已经不再主推。
• Stage模型：HarmonyOS 3.1 Developer Preview版本开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

Stage模型之所以成为主推模型，源于其设计思想。Stage模型的设计基于如下出发点。

1. 为复杂应用而设计

   • 多个应用组件共享同一个ArkTS引擎（运行ArkTS语言的虚拟机）实例，应用组件之间可以方便的共享对象和状态，同时减少复杂应用运行对内存的占用。
   • 采用面向对象的开发方式，使得复杂应用代码可读性高、易维护性好、可扩展性强。

2. 支持多设备和多窗口形态

   应用组件管理和窗口管理在架构层面解耦：

   • 便于系统对应用组件进行裁剪（无屏设备可裁剪窗口）。
   • 便于系统扩展窗口形态。
   • 在多设备（如桌面设备和移动设备）上，应用组件可使用同一套生命周期。

3. 平衡应用能力和系统管控成本

   Stage模型重新定义应用能力的边界，平衡应用能力和系统管控成本。

   • 提供特定场景（如卡片、输入法）的应用组件，以便满足更多的使用场景。
   • 规范化后台进程管理：为保障用户体验，Stage模型对后台应用进程进行了有序治理，应用程序不能随意驻留在后台，同时应用后台行为受到严格管理，防止恶意应用行为。

FA模型与Stage模型对比

项目	FA模型	Stage模型
应用组件	1. 组件分类 0000000000011111111.20240415144235.67463682348765081471619435121310.png - PageAbility组件：包含UI界面，提供展示UI的能力。- ServiceAbility组件：提供后台服务的能力，无UI界面。- DataAbility组件：提供数据分享的能力，无UI界面。2. 开发方式通过导出匿名对象、固定入口文件的方式指定应用组件。开发者无法进行派生，不利于扩展能力。	1. 组件分类 0000000000011111111.20240415144235.38592509672050731842570022713040.png - UIAbility组件：包含UI界面，提供展示UI的能力，主要用于和用户交互。- ExtensionAbility组件：提供特定场景（如卡片、输入法）的扩展能力，满足更多的使用场景。2. 开发方式采用面向对象的方式，将应用组件以类接口的形式开放给开发者，可以进行派生，利于扩展能力。
进程模型	有两类进程：1. 主进程2. 渲染进程	有三类进程：1. 主进程2. ExtensionAbility进程3. 渲染进程
线程模型	1. ArkTS引擎实例的创建一个进程可以运行多个应用组件实例，每个应用组件实例运行在一个单独的ArkTS引擎实例中。2. 线程模型每个ArkTS引擎实例都在一个单独线程（非主线程）上创建，主线程没有ArkTS引擎实例。3. 进程内对象共享：不支持。	1. ArkTS引擎实例的创建一个进程可以运行多个应用组件实例，所有应用组件实例共享一个ArkTS引擎实例。2. 线程模型ArkTS引擎实例在主线程上创建。3. 进程内对象共享：支持。
应用配置文件	使用config.json描述应用信息、HAP信息和应用组件信息。	使用app.json5描述应用信息，module.json5描述HAP信息、应用组件信息。

开发前准备

1. 安装最新版DevEco Studio。

2. 开发环境配置（详细可参考：官网配置教程）

   • 开发之前肯定要搭建环境，做过Java开发的的都知道，安装开发环境，主要的是需要JDK的安装，鸿蒙开发环境比较简单，在安装开发工具的适合会自动安装jdk。

   • JDK安装过的不受影响，没有安装的在安装开发工具的时候会自动安装。

   • 有一点需要注意，鸿蒙开发需要安装Node.js，这个也是js技术栈开发的必备。

构建第一个鸿蒙应用（Stage模型）

既然Stage模型是主推，那么我们就来用Stage模型构建第一个鸿蒙应用。

创建工程

1. 若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。

2. 选择Application应用开发，选择模板“Empty Ability”，点击Next进行下一步配置。
   

   image-20240704205048063.png

3. 进入配置工程界面，Compile SDK选择“4.0.0(API 10)”,其他参数保持默认设置即可。
   

   image-20240704205458524.png

4. 点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

ArkTS工程目录结构（Stage模型）

image-20240704210132813.png

• AppScope > app.json5：应用的全局配置信息。
• entry：HarmonyOS工程模块，编译构建生成一个HAP包。
  • src > main > ets：用于存放ArkTS源码。
  • src > main > ets > entryability：应用/服务的入口。
  • src > main > ets > entrybackupability：应用提供扩展的备份恢复能力。
  • src > main > ets > pages：应用/服务包含的页面。
  • src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件。
  • src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
  • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
  • hvigorfile.ts：模块级编译构建任务脚本。
  • obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。
  • oh-package.json5：用来描述包名、版本、入口文件（类型声明文件）和依赖项等信息。
• oh_modules：用于存放三方库依赖信息。
• build-profile.json5：应用级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。
• hvigorfile.ts：应用级编译构建任务脚本。
• oh-package.json5：主要用来描述全局配置，如：依赖覆盖（overrides）、依赖关系重写（overrideDependencyMap）和参数化配置（parameterFile）等。

First Page

1. 使用文本组件。

   工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Text组件组成。“Index.ets”文件的示例如下：

   // Index.ets
   @Entry
   @Component
   struct Index {
     @State message: string = 'Hello World';
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

2. 添加按钮

   在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“Index.ets”文件的示例如下：

   // Index.ets
   @Entry
   @Component
   struct Index {
     @State message: string = 'Hello World'
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
           // 添加按钮，以响应用户点击
           Button() {
             Text('Next')
               .fontSize(30)
               .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           .backgroundColor('#0D9FFB')
           .width('40%')
           .height('5%')
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

3. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

   
   
   image-20240704211749033.png

Second Page

1. 创建第二个页面

   • 新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets ”，右键点击“pages”文件夹，选择“New > ArkTS File”，命名为“Second”，点击“Finish”。可以看到文件目录结构如下：
     
     image-20240704212219237.png
2. 1. • 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

      {
        "src": [
          "pages/Index",
          "pages/Second"
        ]
      }
      

   2. 添加文本及按钮

   参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“Second.ets”文件的示例如下：

   // Second.ets
   @Entry
   @Component
   struct Second {
     @State message: string = 'Hi there'
   
     build() {
       Row() {
         Column() {
           Text(this.message)
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
           Button() {
             Text('Back')
               .fontSize(25)
               .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           .backgroundColor('#0D9FFB')
           .width('40%')
           .height('5%')
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

实现页面间跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

1.第一个页面跳转到第二个页面。

在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“Index.ets”文件的示例如下：

// Index.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，点击时跳转到第二页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')
 
          }).catch((err: BusinessError) => {
            console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2. 第二个页面返回到第一个页面。

在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“Second.ets”文件的示例如下：

// Second.ets
// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
 
@Entry
@Component
struct Second {
  @State message: string = 'Hi there'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 返回按钮绑定onClick事件，点击按钮时返回到第一页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Back' button.`)
          try {
            // 返回第一页
            router.back()
            console.info('Succeeded in returning to the first page.')
          } catch (err) {
            let code = (err as BusinessError).code; 
            let message = (err as BusinessError).message; 
            console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3. 打开“Index.ets”文件，点击预览器中的
   refresh.png
   按钮进行刷新。效果如下图所示：
   
   image-20240705114801550.png

使用真机运行应用

1. 将搭载HarmonyOS系统的真机与电脑连接。具体指导及要求，可查看使用本地真机运行应用/服务。

2. 点击File > Project Structure... > Project > SigningConfigs界面勾选“Support HarmonyOS”和“Automatically generate signature”，点击界面提示的“Sign In”，使用华为帐号登录。等待自动签名完成后，点击“OK”即可。如下图所示：

   
   
   image-20240705120550000.png

3. 在编辑窗口右上角的工具栏，点击
   run.png

   按钮运行即可。

整体还是比较简单的，后续有机会在深入学习一下。