鸿蒙原子化服务与元服务卡片开发指南
鸿蒙原子化服务是一种无需安装、即点即用的应用形态,支持跨设备运行。元服务卡片则提供桌面快捷访问核心功能的能力。原子化服务的架构设计,包括单 Ability 模式及页面展示。通过示例展示了商品搜索与购物车场景的原子化服务实现,以及商品推荐和购物车数量元服务卡片的开发流程。涉及代码结构搭建、Ability 生命周期管理、Widget 组件构建及 module.json5 配置文件修改。最终实现数据动态更新与手势交互,完成轻量化应用的开发与部署。

鸿蒙原子化服务是一种无需安装、即点即用的应用形态,支持跨设备运行。元服务卡片则提供桌面快捷访问核心功能的能力。原子化服务的架构设计,包括单 Ability 模式及页面展示。通过示例展示了商品搜索与购物车场景的原子化服务实现,以及商品推荐和购物车数量元服务卡片的开发流程。涉及代码结构搭建、Ability 生命周期管理、Widget 组件构建及 module.json5 配置文件修改。最终实现数据动态更新与手势交互,完成轻量化应用的开发与部署。

本文承接页面路由与组件跳转知识,为后续电商购物车全栈项目铺垫原子化服务和元服务卡片的核心技术。
学习目标:
学习重点:
原子化服务是 HarmonyOS Next 推出的一种全新的应用形态,具有以下特点:
原子化服务采用单 Ability 架构,由以下部分组成:
基于 MyFirstHarmonyApp 项目架构,实现以下功能:
在 entry/src/main/ets 目录下创建以下文件夹:
atomic:存放原子化服务相关代码;widgets:存放元服务卡片相关代码。entry/src/main/ets/atomic/SearchAbility.ets
import hilog from '@ohos.hilog';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import type AbilityConstant from '@ohos.ability.abilityConstant';
import type Want from '@ohos.app.ability.Want';
import BaseAbility from '../entryability/BaseAbility';
export default class SearchAbility extends BaseAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'SEARCH_ABILITY', '%{public}s', 'SearchAbility onCreate');
}
onDestroy(): void {
hilog.info(0x0000, 'SEARCH_ABILITY', '%{public}s', 'SearchAbility onDestroy');
}
onWindowStageCreate(windowStage: window.WindowStage): void {
hilog.info(0x0000, 'SEARCH_ABILITY', '%{public}s', 'SearchAbility onWindowStageCreate');
windowStage.loadContent('pages/SearchPage', (err, data) => {
if (err.code) {
hilog.error(0x0000, 'SEARCH_ABILITY', 'Failed to load content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x0000, 'SEARCH_ABILITY', 'Succeeded in loading content. Data: %{public}s', JSON.stringify(data) ?? '');
});
}
onWindowStageDestroy(): void {
hilog.info(0x0000, 'SEARCH_ABILITY', '%{public}s', 'SearchAbility onWindowStageDestroy');
}
onForeground(): void {
hilog.info(0x0000, 'SEARCH_ABILITY', '%{public}s', 'SearchAbility onForeground');
}
onBackground(): void {
hilog.info(0x0000, 'SEARCH_ABILITY', '%{public}s', 'SearchAbility onBackground');
}
}
entry/src/main/ets/entryability/BaseAbility.ets
import hilog from '@ohos.hilog';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import type AbilityConstant from '@ohos.ability.abilityConstant';
import type Want from '@ohos.app.ability.Want';
import UIAbility from '@ohos.app.ability.UIAbility';
import type Window from '@ohos.window';
export default class BaseAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'BASE_ABILITY', '%{public}s', 'BaseAbility onCreate');
}
onDestroy(): void {
hilog.info(0x0000, 'BASE_ABILITY', '%{public}s', 'BaseAbility onDestroy');
}
onWindowStageCreate(windowStage: Window.): {
hilog.(, , , );
}
(): {
hilog.(, , , );
}
(): {
hilog.(, , , );
}
(): {
hilog.(, , , );
}
}
entry/src/main/ets/widgets/ProductRecommendWidget.ets
import { GoodsModel } from '../models/HomeModel';
import { goodsData } from '../models/HomeData';
import { RouterUtils } from '../utils/RouterUtils';
@Entry
@Component
struct ProductRecommendWidget {
@State goodsList: Array<GoodsModel> = goodsData.slice(0, 3);
build() {
Grid() {
ForEach(this.goodsList, (item: GoodsModel) => {
GridItem() {
Column({ space: 8 }) {
Image(item.imageUrl).width('100%').height(120).objectFit(ImageFit.Cover).borderRadius(8);
Text(item.name).fontSize(14).fontWeight(FontWeight.Bold).textColor('#000000').maxLines().({ : . });
().().(.).();
}.().().().().().( {
.(, { : item. });
});
}.().();
}, item..());
}.().().().().().();
}
}
entry/src/main/ets/widgets/CartCountWidget.ets
import { GlobalStateManager } from '../utils/GlobalState';
import { RouterUtils } from '../utils/RouterUtils';
@Entry
@Component
struct CartCountWidget {
@State cartCount: number = GlobalStateManager.getInstance().getState().cartCount;
build() {
Row({ space: 16 }) {
Image($r('app.media.cart')).width(24).height(24).objectFit(ImageFit.Contain);
Text(`购物车:${this.cartCount}`).fontSize(14).textColor('#000000');
if (this.cartCount > 0) {
Text(`${this.cartCount}`).fontSize(12).textColor('#FFFFFF').backgroundColor('#FF0000').width(20).().(.).();
}
}.().().().().().( {
.();
});
}
() {
.(, {
. = .().().;
});
}
}
在 entry/src/main/module.json5 中添加原子化服务与元服务卡片配置:
{
"module": {
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": ["entity.system.home"],
"actions": ["action.system.home"
在 entry/src/main/resources/base/element/string.json 中添加原子化服务与元服务卡片的描述信息:
{
"string": [
{ "name": "EntryAbility_label", "value": "MyFirstHarmonyApp" },
{ "name": "EntryAbility_desc", "value": "我的第一个鸿蒙应用" },
{ "name": "SearchAbility_label", "value": "商品搜索" },
{ "name": "SearchAbility_desc", "value": "商品搜索原子化服务" },
{ "name": "CartAbility_label", "value": "购物车" },
{ "name": "CartAbility_desc"
在 DevEco Studio 中点击 Build → Build HAP,编译项目。
将编译后的 HAP 文件部署到鸿蒙设备上。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online
将JSON字符串修饰为友好的可读格式。 在线工具,JSON美化和格式化在线工具,online