引言​

随着万物互联时代的到来，传统的单设备应用体验已难以满足用户需求。华为鸿蒙HarmonyOS通过其分布式技术和原子化服务理念，为开发者提供了构建跨设备、服务直达新体验的利器。本文将深入探讨如何使用官方IDE——DevEco Studio，从环境搭建到代码实现，开发一个具备“原子化服务”特性的鸿蒙应用，并解析其背后的核心技术。

​一、 环境配置与项目创建​

1. 1.

   ​安装DevEco Studio​

   访问HarmonyOS应用开发官网下载最新版IDE。安装过程需注意选择SDK存储路径，并确保网络通畅以下载必要的SDK和工具链（如Ohpm包管理器等）。

2. 2.

   ​创建新项目​

   • •

     启动DevEco Studio，选择 ​​"Create Project"​。

   • •

     模板选择至关重要。为了展示鸿蒙特性，我们选择 ​​"Empty Ability"​​ 并注意下方的 ​​"Model"​​ 选项：

     • •

       ​Stage模型: 推荐的新模型，提供了更好的生命周期管理和分布式能力。​​（本文选择此模型）​​

     • •

       ​FA模型: 传统的模型，目前仍兼容。

   • •

     在项目配置页面，Compile SDK选择最新的API版本（如API 9），Language选择 ​​"ArkTS"​。这是鸿蒙应用开发的首选语言，基于TypeScript，提供了更严格的类型检查和更好的运行时性能。

​二、 项目结构解析​

一个典型的Stage模型项目结构如下：

复制

MyApplication
├── entry          # 主模块
│   └── src
│       ├── main
│       │   ├── ets
│       │   │   ├── entryability
│       │   │   │   └── EntryAbility.ts  # 应用入口Ability
│       │   │   ├── pages
│       │   │   │   └── index.ets        # 首页页面组件
│       │   │   └── model
│       │   │       └── DataModel.ts     # 数据模型层（可选）
│       │   ├── resources                # 资源文件（图片、字符串等）
│       │   └── module.json5             # 当前模块的配置文件，核心！
│   ├── oh_modules # 第三方依赖库
│   ├── build-profile.json5
│   └── hvigorfile.ts
├── build-profile.json5
└── hvigorfile.ts

​核心文件解读：​​

• •

  module.json5: 定义了模块的基本信息、Ability组件、权限等。它是声明“原子化服务”的关键。

• •

  EntryAbility.ts: 应用能力的入口，负责AbilityStage和AbilityContext的生命周期管理。

• •

  index.ets: 使用ArkUI框架声明式描述的UI页面。

​三、 核心概念与代码实现：打造一个“服务卡片”​​

“原子化服务”是鸿蒙的核心特征之一，它允许应用的能力以FA（Feature Ability）形式或更轻量的服务卡片（FormExtension）形式，无需安装即可在其他设备上被发现和使用。服务卡片是其重要载体。

​目标：​​ 在应用首页实现一个按钮，点击后可将其当前内容发布为一个服务卡片到桌面。

​1. 定义卡片配置​

在 src/main/resources/base/profile/下创建 form_config.json文件，声明卡片信息。

json

复制

{
  "forms": [
    {
      "name": "widget",
      "description": "这是一个示例卡片",
      "src": "./ets/widget/pages/WidgetCard.ets", // 卡片的UI页面
      "window": {
        "designWidth": 720,
        "autoDesignWidth": true
      },
      "colorMode": "auto",
      "isDefault": true,
      "updateEnabled": true,
      "scheduledUpdateTime": 10,
      "defaultDimension": "2 * 2",
      "supportDimensions": ["2 * 2"]
    }
  ]
}

​2. 开发卡片UI页面​

在 src/main/ets/下创建 widget/pages/WidgetCard.ets文件。卡片UI使用ArkUI的轻量级组件。

arkts

复制

// WidgetCard.ets
@Entry
@Component
struct WidgetCard {
  @State message: string = 'Hello, HarmonyOS!'

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .fontColor(Color.Blue)
        .margin(10)
      Button('更新内容')
        .onClick(() => {
          // 处理卡片内部的点击事件
          this.message = '内容已更新!'
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

​3. 在module.json5中声明卡片Ability​

在 module.json5文件的 abilities数组下，为你的Entry Ability添加 forms属性，使其具备卡片能力。

json

复制

"abilities": [
  {
    "name": "EntryAbility",
    "srcEntry": "./ets/entryability/EntryAbility.ts",
    "description": "$string:EntryAbility_desc",
    // ... 其他配置
    "formsEnabled": true,           // 启用卡片功能
    "forms": [
      {
        "name": "widget",           // 与form_config.json中的name对应
        "description": "$string:widget_desc",
        "src": "./ets/widget/pages/WidgetCard.ets", // 源码路径
        "isDefault": true,
        "colorMode": "auto",
        "supportDimensions": ["2 * 2"],
        "defaultDimension": "2 * 2"
      }
    ]
  }
]

​4. 在主页面中实现卡片发布功能​

修改 index.ets，添加发布卡片的逻辑。

arkts

复制

// index.ets
import formInfo from '@ohos.app.form.formInfo';
import formProvider from '@ohos.app.form.formProvider';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .margin(20)
      TextInput({ placeholder: '输入要展示在卡片上的内容' })
        .onChange((value: string) => {
          this.message = value
        })
      Button('添加到桌面为服务卡片')
        .onClick(() => {
          // 获取当前卡片的标识
          let formName = 'widget' // 与配置名一致
          // 发起卡片添加请求
          let formBindInfo = {
            moduleName: "entry", // 模块名
            bundleName: "com.example.myapplication", // 包名
            abilityName: "EntryAbility", // Ability名
            formName: formName,
            formId: formInfo.DEFAULT_FORM_ID, // 使用默认ID
            tempForm: false
          };
          formProvider.addForm(formBindInfo, (err, data) => {
            if (err) {
              console.error(`Failed to add form. Code: ${err.code}, message: ${err.message}`);
              return;
            }
            console.info('Form added successfully. Form id: ' + data.formId);
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

​四、 构建与调试​

1. 1.

   ​连接设备: 使用真机（开启开发者模式）或模拟器。

2. 2.

   ​运行: 点击DevEco Studio的 ​运行按钮​ (▶)，应用将安装到设备上。

3. 3.

   ​查看卡片: 在设备桌面上，双指捏合进入桌面编辑模式，点击“服务卡片”，找到你的应用，即可将刚刚创建的卡片添加到桌面。你会发现，主页面输入的内容可以动态地体现在卡片上，这体现了跨端迁移的雏形。

​五、 进阶与思考​

• •

  ​分布式数据管理: 使用@ohos.data.distributedDataManager实现多设备间数据的自动同步，让你的服务卡片在任何设备上都能显示用户的最新信息。

• •

  ​跨设备启动: 使用@ohos.app.ability.featureAbility的startAbility方法，可以启动其他设备上的Ability，真正实现分布式体验。

• •

  ​性能优化: DevEco Studio提供了强大的ArkTS编译器和ArkUI Inspector调试工具，可用于分析UI性能和高耗能函数。

​结语​

通过构建一个简单的服务卡片，我们体验了DevEco Studio的开发流程和鸿蒙“原子化服务”的核心思想。这仅仅是开始。HarmonyOS强大的分布式能力、一次开发多端部署的特性，为开发者打开了全新的想象空间。深入学习和实践Stage模型、ArkTS语言以及分布式API，将帮助你构建出真正面向未来的全场景智慧应用。

希望这篇博客对你有帮助！欢迎在评论区交流更多技术细节。https://developer.huawei.com/consumer/cn/training/classDetail/0e5a7e7a9a324608848b1475d5c8ee1a?type=1?ha_source=hmosclass&ha_sourceId=89000248