网站导航
> 技术文档 > 精讲鸿蒙元服务

精讲鸿蒙元服务

网友: 技术文档 2025-08-08 12:26:32

1 基本概念

官方介绍：元服务（原名为原子化服务）是HarmonyOS提供的一种面向未来的服务提供方式，是有独立入口的（用户可通过点击服务卡片打开元服务）、免安装的（无需显式安装，由系统程序框架后台安装后即可使用）用户应用程序。

例如：一个传统新闻类应用A，在按照元服务理念调整设计后，将“新闻排行”独立为一个元服务A*，使用户无需安装应用A即可通过桌面服务卡片快速浏览热点新闻。

元服务基于HarmonyOS API开发，支持运行在1+8+N设备上，供用户在合适的场景、合适的设备上便捷使用。元服务相对于传统应用形态更加轻量，同时提供更丰富的入口、更精准的分发。

简而言之，元服务就是一个用户手动无需安装的应用程序，和小程序有点类似，但是并不一样：

  1. 小程序：需要依赖于某个应用程序（比如微信，支付宝，抖音…等等）才可以运行
  2. 元服务：直接系统层面支持，无需额外的安装应用

下面附上官方的对比：

项目 元服务 传统应用 软件包形态 App Pack
（.app） App Pack
（.app） 分发平台 由应用市场（AppGallery）管理和分发 由应用市场（AppGallery）管理和分发 安装后有无桌面icon 无桌面icon，但可手动添加到桌面，显示形式为服务卡片 有桌面icon HAP免安装要求 所有HAP（包括Entry HAP和Feature HAP）
均需满足免安装
要求 所有HAP（包括Entry HAP和Feature HAP）均为非免安装的

精讲鸿蒙元服务

结合上述内容，咱们学习元服务，核心点主要有2个：

**元服务开发（应用核心功能） **

  • 页面开发
  • 功能开发

卡片开发

  • 卡片页面
  • 卡片事件
  • 卡片数据

2 创建元服务

  1. 若首次打开DevEco Studio，请选择Create Project开始创建一个新工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。选择Atomic Service元服务开发，选择“Empty Ability”模板，单击Next进行下一步配置。

精讲鸿蒙元服务

  1. 进入配置工程界面，修改“Project name”，Compile SDK选择“3.1.0(API 9)”，其他参数保持默认设置即可。

精讲鸿蒙元服务

📌**说明 **:
支持使用ArkTS低代码开发方式。
低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。

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

3 项目结构

📌创建完毕的项目结构之前的应用类似，目前主要关注3个不同点即可：

  1. 卡片生命周期管理文件（EntryFormAbility.ts）

  2. 卡片页面文件（WidgetCard.ets）

  3. 卡片配置文件（form_config.json）

其他的和之前创建的应用是一致的，直接套用之前的理解即可，详细的说明如下：

  • AppScope > app.json5：元服务的全局配置信息。
  • entry：HarmonyOS工程模块，编译构建生成一个HAP。
    • src > main > ets：用于存放ArkTS源码。
    • src > main > ets > entryability：元服务的入口。
    • src > main > ets > entryformability：卡片生命周期管理文件。
    • src > main > ets > pages：元服务包含的页面。
    • src > main > ets > widget > pages：元服务工程创建时，会自动生成一个服务卡片页面，在本示例中作为元服务的默认卡片。
    • src > main > resources：用于存放元服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
    • src > main > resources > base > profile > form_config.json：元服务卡片配置文件**。 **
    • src > main > module.json5：模块配置文件。主要包含HAP的配置信息、元服务在具体设备上的配置信息以及元服务的全局配置信息。具体的配置文件说明，详见module.json5。
    • build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
    • hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
  • oh_modules：用于存放三方库依赖信息。关于原npm工程适配ohpm操作，请参考历史工程手动迁移。
  • build-profile.json5：元服务级配置信息，包括签名signingConfigs、产品配置products等。其中products中可配置当前运行环境，默认为HarmonyOS。
  • hvigorfile.ts：元服务级编译构建任务脚本。
  • EntryCard：元服务卡片快照图片存放目录。

4 元服务页面开发

咱们先从熟悉的页面开发入手，因为元服务的页面开发和之前学习的应用开发没有差异，之前学习的所有内容都可以直接在这里使用，接下来咱们来实现一个简单的效果：

  1. 页面Index 点击**Next **跳转 页面Second
  2. 页面Second 点击**Back **返回 页面Index

4.1 页面结构开发

咱们首先来实现2个页面的基本结构，然后再去实现页面跳转

精讲鸿蒙元服务

  1. 调整Index.ets代码为：
// Index.ets@Entry@Componentstruct 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%\') }}
  1. 在pages目录下继续添加页面 Second.ets ,并编写代码

精讲鸿蒙元服务

// Second.ets@Entry@Componentstruct 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%\') }}

4.2 增加跳转逻辑

接下来实现页面Index.ets和页面Second之间互相跳转

  1. Index.ets 给按钮增加 跳转逻辑
// Index.ets// 导入页面路由模块import router from \'@ohos.router\';@Entry@Componentstruct 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(() => { router.pushUrl({ url: \'pages/Second\' }) }) } .width(\'100%\') } .height(\'100%\') }}
  1. Second.ets 给按钮增加返回逻辑
// Second.ets// 导入页面路由模块import router from \'@ohos.router\';@Entry@Componentstruct 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(() => { router.back() }) } .width(\'100%\') } .height(\'100%\') }}
  1. 打开Index.ets文件，单击预览器中的刷新按钮进行刷新。效果如下图所示
    精讲鸿蒙元服务

📌划重点：元服务中界面的开发和之前应用界面的开发基本一致，直接套用即可

5 默认卡片WidgetCard.ets

因为元服务不提供桌面应用图标，我们可以通过用户手动的方式在桌面上添加一张卡片，通过点击卡片来唤起元服务。

卡片特点：

  1. 卡片可以承载少量的内容显示和交互
  2. 卡片可以充当元服务的入口，点击卡片可以唤起元服务

📌注意！！

  1. 普通应用中也可以添加服务卡片并进行服务卡片开发，但是默认并没有添加卡片
  1. 元服务因为没有icon作为入口，所以默认提供了一张服务卡片作为入口

上一节咱们了解了一下元服务页面的开发，和之前的应用开发是基本一样的。

接下来咱们来看元服务中另外一个非常重要的部分-服务卡片。

5.1 默认卡片文件

在项目的如下路径有一个ets文件，此文件就是默认卡片文件，我们可以在里面定制属于自己的显示内容src/main/ets/widget/pages/WidgetCard.ets

咱们先将默认卡片调整为如下效果：

  1. 页面结构
  2. 点击动画

精讲鸿蒙元服务

5.2 卡片结构

  1. 删掉默认内容，使用如下内容进行替换
  2. 使用预览器测试效果

源码

// WidgetCard.ets@Entry @Component struct WidgetCard { @State x: number = 1 @State y: number = 1 build() { Column() { Button(\'Click to enlarge\') .onClick(() => { this.x = 1.1 this.y = 1.1 }) .scale({ x: this.x, y: this.y }) .animation({ curve: Curve.Linear, duration: 200, onFinish: () => {  this.x = 1  this.y = 1 } }) } .padding(10) .width(\'100%\') .height(\'100%\') .justifyContent(FlexAlign.Center) } }

从编写的代码来看，和之前应用开发中的基本一致，但是支持的能力并没有应用中多，这里附上官方说明链接：

  1. 卡片页面能力说明
  2. 卡片使用动效能力

5.3 服务卡片跳转元服务

通过在服务卡片的最外层容器添加点击事件，然后通过postCardAction方式可以拉起它的元服务。

更为深入的内容之后有专门的章节进行讲解，这里先演示看看：

  1. 调整代码
  2. 添加卡片到桌面（模拟器 or 真机调试）
  3. 测试跳转

📌注： 跳转元服务的功能无法通过预览器调试，需要借助模拟器 或 真机

  1. 调整代码：最外层容器增加点击事件，实现点击跳转元服务
@Entry@Componentstruct WidgetCard { @State x: number = 1 @State y: number = 1 build() { Column() { Button(\'Click to enlarge\') .onClick(() => { this.x = 1.1 this.y = 1.1 }) .scale({ x: this.x, y: this.y }) .animation({ curve: Curve.Linear, duration: 200, onFinish: () => {  this.x = 1  this.y = 1 } }) } .padding(\'10vp\') .width(\'100%\') .height(\'100%\') .justifyContent(FlexAlign.Center) .onClick(() => { // 通过postCardAction 实现跳转 // 代码细节之后展开 postCardAction(this, { \"action\": \'router\', \"abilityName\": \'EntryAbility\', \"params\": { \"message\": \'router test\' } }); }) }}
  1. 模拟器 or 真机：添加卡片到桌面
    1. 启动之后切换到桌面
    2. 捏合两指
    3. 模拟器 windows: ctrl + 鼠标左键
    4. 模拟器 mac: command + 鼠标左键
    5. 点击服务卡片
    6. 拉到底部，选择其他服务卡片
    7. 选择刚刚的元应用（这里是 MyApplication）
    8. 找到卡片，点击添加到桌面

精讲鸿蒙元服务

精讲鸿蒙元服务

  1. 测试跳转：点击按钮以外的空白区域，即可实现跳转

精讲鸿蒙元服务

至此，咱们已经体验了元服务的核心内容

  1. 元服务创建：选择Atomic Service
  2. 页面开发：和应用中的页面开发一样，直接套用之前的经验即可
  3. 卡片开发：界面开发类似应用开发，通过postCardAction可以与主应用通信。
 postCardAction(this, { \"action\": \'router\', \"abilityName\": \'EntryAbility\', \"params\": { \"message\": \'router test\' } });

卡片和元服务（应用）更加丰富的通讯有特定语法（之后章节深入学习）
在这里插入图片描述

网络标签：

相关问题