【2024技能洞察评比文章】HarmonyOS 5.0（NEXT）实战体验—“慢小圈“应用 ...

前言：2024年基于CSDN平台的成长与感悟

2024年对我而言，是在CSDN平台上深入探索与学习鸿蒙技能的一年，这一年不仅让我对鸿蒙操纵系统的理解更加深刻，也让我在实际项目开辟中积聚了名贵的履历。通过CSDN这一平台，我不断与行业内的开辟者、技能专家进行交流与分享，不仅掌握了鸿蒙技能的核心概念，还可以或许迅速将这些知识应用到实际的开辟中，从而实现了个人技能的快速成长。
取得CSDN HarmonyOS社区卓越贡献奖（TOP2）

下图是1024在长沙，线下CSDN&华为团结颁发的荣誉证书。感谢CSDN社区与华为官方，感谢各位工作人员，感谢运营姐姐，感谢技能专家的引导，感谢大佬的资助。
特别感谢以下CSDN博主对我的资助（部分名单）：
   三掌柜
李游Leo
轻口胃
愚公搬代码
周道-Althen
灵芸小骏的狸花苏
一行诗人
山河已无恙
  

从初学者到实践者的蜕变

刚打仗鸿蒙技能时，我对其体系结构、开辟环境和应用场景有着许多狐疑和疑问。幸运的是，CSDN上有大量的鸿蒙技能相干资源，包罗教程、技能文章、视频课程等，为我的学习提供了充分的支持。通过系统化地学习这些资源，我逐渐掌握了鸿蒙的核心概念，比方元服务、跨设备协同、分布式技能等。在这一过程中，我特别感受到了鸿蒙生态下“全场景”协同的魅力，跨设备的无缝连接与智能化体验让我意识到，鸿蒙技能不仅仅是一个操纵系统，它更是面向将来的智能生态系统。
深入探索鸿蒙的应用开辟

学习鸿蒙技能的过程中，最具挑战性也是最有成就感的部分，便是应用开辟。在CSDN的学习过程中，我通过实践操纵，不仅理解了如安在鸿蒙中创建原生应用，还学会了如何结合鸿蒙平台特性开辟出具有创新性的服务。特别是在“慢小圈”应用的开辟过程中，我深入探讨了元服务的开辟与实现，学会了如何使用鸿蒙操纵系统提供的工具与API来实现智能设备之间的协同与数据共享。通过不断调试、优化和改进，我逐步提升了自己的开辟本领。
对鸿蒙技能的深刻感悟

通过一年的学习与实践，我逐渐形成了对鸿蒙技能的深刻理解。鸿蒙不仅在技能架构上具有先进性，它还注重用户体验的极致优化。流畅的操纵体验、极致的续航、智能化的应用场景设计，这些特点让我感受到技能与生活的精密结合。特别是鸿蒙的元服务和跨设备协同的特性，让我更加坚信，在将来的数字化转型过程中，鸿蒙操纵系统将会是一个至关重要的推动力。
从分享中成长

CSDN不仅是一个学习的平台，也是一个交流与分享的平台。在这里，我遇到了一群同样热衷于鸿蒙技能的开辟者，我们共同讨论技能难点，分享开辟履历，也资助我不断拓宽了视野。通过撰写与鸿蒙相干的技能文章与实践履历分享，我不仅巩固了自己的技能理解，还能资助更多的开辟者共同成长。从技能探讨到履历分享，每一次与社区的互动，都让我受益匪浅。
2024年的学习与成长只是我鸿蒙技能路程的开始，随着鸿蒙5.0的发布，鸿蒙生态进入了新的发展阶段。将来，我计划将更多精力投入到鸿蒙平台的深入研究中，特别是在智能家居、汽车信息娱乐、工业互联网等领域的应用开辟中，探索更多的创新点。我盼望可以或许通过自己的不断学习和实践，到场到鸿蒙生态的建设中，为推动智能化、全场景的数字期间贡献一份力量。
2024年是我技能成长的一年，是我通过CSDN平台与鸿蒙技能精密接洽、学习、实践和分享的一年。将来，我将继续秉持着不断学习、勇于实践、分享履历的原则，迈向更高的技能高峰。
技能洞察：HarmonyOS 5.0（NEXT）实战体验—"慢小圈"应用开辟实战体验全流程

在智能化、全场景的数字期间，HarmonyOS作为华为自主研发的操纵系统，正逐渐改变着我们的生活方式与工作环境。随着HarmonyOS 5.0（NEXT）的发布，鸿蒙生态迎来了更多创新与突破，尤其是在元服务的开辟与应用上。元服务作为鸿蒙生态的核心构成部分，依附其跨设备、跨平台的特点，为用户提供了更加智能化、个性化的服务体验。
本篇文章将深入探讨HarmonyOS 5.0（NEXT）版本中，如何进行“慢小圈”元服务的开辟与应用。从底子的开辟环境搭建到元服务的实际构建，我们将全面先容整个开辟流程，资助开辟者更好地理解鸿蒙生态下的服务创新与技能实现。无论是鸿蒙开辟的新手，还是已有一定履历的开辟者，都能通过本文的实战体验，快速掌握开辟技巧，并为将来的数字化转型打下坚实的底子。
"慢小圈"应用的部分截图如下：

一、共码将来，待到山花绚丽时

在2024年10月22日的原生鸿蒙之夜暨华为全场景新品发布会上，华为常务董事、终端BG董事长、智能汽车解决方案BU董事长余承东公布了鸿蒙生态的最新进展。HarmonyOS的代码行数已超过1.1亿行，成为数字底座中最具生命力的系统之一。在中国市场，鸿蒙的市场份额位居第二，品牌认知度和开辟者数量也实现了显著增长。现在，已有超过15,000个鸿蒙原生应用和元服务上架，且部分原生应用的迭代速度靠近每天一个版本。同时，鸿蒙生态设备数量突破10亿台，标志着历史性突破的到来。这些成就充分表现了鸿蒙生态的强大潜力和发展动力。

二、什么是HarmonyOS 5.0（NEXT）？

HarmonyOS 5.0，也称为HarmonyOS NEXT或“纯血鸿蒙”，是华为公司自主研发的全新一代操纵系统。

[list
]

2024年10月22日，华为在深圳举行“原生鸿蒙之夜暨华为全场景新品发布会”，正式发布了HarmonyOS 5.0。

HarmonyOS 5.0的发布标志着华为在操纵系统领域的又一庞大突破，它与苹果iOS系统和谷歌安卓系统共同构成了环球移动操纵系统的三大鼎足之势。
[/list
] 2.1 设计理念

HarmonyOS 5.0（NEXT）以“调和美学”为核心理念，重新定义了用户界面的美学和交互体验。它运用“光构建出天下的万物”的哲学进行界面设计，将光的元素引入到操纵系统的设计中，使用算法模仿按钮的光照结果，提升了界面的视觉打击力和动态交互感。
2.2 核心特点

HarmonyOS 5.0（NEXT）在多个方面实现了显著提升。首先，流畅度相比前一版本提高了30%，续航也增加了56分钟，得益于系统架构和性能优化的连续努力。该系统还支持跨设备协同，可以或许实现智能手机、智能家居设备、汽车信息娱乐系统等多设备间的无缝连接与数据共享，极大提升了用户体验。、
此外，HarmonyOS 5.0（NEXT）搭载了全新的小艺助手，基于盘古大模子打造的系统级AI，为用户提供更加智能的应用场景和服务，如快速天生论文摘要、思维导图等。安全方面，系统采用了全新的安全架构，低落了隐私泄露的风险，同时支持文件加密分享和分布式安全架构，确保用户数据安全。
HarmonyOS 5.0（NEXT）还注重个性化与定制化，提供了丰富的主题、动态壁纸和重力感应动效，让用户可以或许根据个人需求进行定制设置，享受更加个性化的视觉与操纵体验。

2.3 应用场景

HarmonyOS 5.0（NEXT）的应用场景非常广泛，不仅实用于智能手机宁静板电脑等移动设备，还实用于智能家居、汽车信息娱乐系统等。它可以或许实现设备之间的无缝连接和协同工作，让用户在差别场景下都能享受到便捷和智能的体验。
智能家居场景
在智能家居场景中，HarmonyOS 5.0（NEXT）可以实现智能家居设备的无缝连接和智能控制。用户可以通过智能手机或平板电脑上的HarmonyOS应用，轻松管理家中的智能灯泡、智能插座、智能空调、智能门锁等设备。比方，当用户离家还有一段距离时，可以通过手机提前开启家中的空调，调节到舒适的温度；或者当用户忘记锁门时，可以通过手机长途锁定智能门锁，确保家庭安全。此外，HarmonyOS 5.0（NEXT）还支持智能家居设备的场景联动，如设置“回家模式”自动开启灯光和空调，设置“离家模式”自动关闭家中所有电源等，让家居生活更加智能化和便捷化。
汽车信息娱乐系统场景
在汽车信息娱乐系统场景中，HarmonyOS 5.0（NEXT）可以实现智能手机与汽车信息娱乐系统的无缝连接和协同工作。用户可以通过手机将导航信息、音乐列表等同步到汽车信息娱乐系统上，实现无缝切换和共享。比方，当用户驾车前往某个目标地时，可以将手机上的导航信息直接投射到汽车信息娱乐系统的屏幕上，方便用户查察蹊径和导航信息；或者当用户想要听某首音乐时，可以通过手机将音乐列表发送到汽车信息娱乐系统上，享受高品质的音乐播放体验。此外，HarmonyOS 5.0（NEXT）还支持语音助手功能，用户可以通过语音指令控制汽车信息娱乐系统的各项功能，提高驾驶安全性和便利性。

办公场景
在办公场景中，HarmonyOS 5.0（NEXT）可以实现多设备之间的协同办公，提高工作效率。用户可以通过智能手机、平板电脑和电脑等设备之间的无缝连接和协同工作，实现文件共享、集会协同等功能。比方，当用户必要在差别设备之间传输文件时，可以通过HarmonyOS的分布式文件系统实现文件的快速共享和同步；或者当用户必要参加视频集会时，可以通过HarmonyOS的视频通话功能实现多设备之间的视频协同和屏幕共享，提高集会效率和沟通结果。

教育场景
在教育场景中，HarmonyOS 5.0（NEXT）可以为学习者提供更加智能化和个性化的学习体验。通过智能手机、平板电脑等设备，学习者可以轻松获取各种学习资源，如在线课程、电子书、习题等。同时，HarmonyOS 5.0（NEXT）还支持智能保举功能，根据学习者的学习环境和兴趣爱好保举相干的学习资源和学习路径。此外，学习者还可以通过HarmonyOS的协同功能与其他学习者或教师进行交流和互动，共同解决问题和提高学习结果。
三、鸿蒙应用创建过程全流程

在本章中，我们将详细先容如何从零开始创建一个鸿蒙应用，涵盖从环境搭建、项目创建到终极应用运行的整个过程。通过本章的学习，将掌握鸿蒙应用开辟的底子步骤，并可以或许自主进行应用的开辟与调试。
在开始开辟鸿蒙应用之前，首先必要确保开辟环境的设置完成。以下是必要的环境准备工作：

[list
]

安装 DevEco Studio：DevEco Studio是华为官方保举的开辟工具，支持鸿蒙应用的开辟与调试。请确保从官网或其他正规渠道下载并安装最新版本的DevEco Studio。

华为开辟者账号：创建鸿蒙应用并发布到华为应用市场，必要有一个华为开辟者账号。假如尚未注册，可以访问华为开辟者官网完成注册。

设置开辟设备或模仿器：确保设备或模仿器可以用于调试和运行鸿蒙应用。可以使用真实设备，也可以使用DevEco Studio自带的模仿器。
[/list
] 3.1 项目目标

本项目旨在资助开辟者掌握从环境搭建到应用发布的完整鸿蒙应用开辟流程。通过学习项目创建、功能开辟、调试测试、打包发布等步骤，开辟者将可以或许独立完成鸿蒙应用的开辟、调试与上线，并具备连续维护与更新的本领。通过本项目标实践，开辟者将深入理解鸿蒙系统的架构和开辟工具，为构建高质量的鸿蒙应用打下坚实的底子。

3.2 项目创建

首先，打开 DevEco Studio，点击 New -> Create Project，然后在模板选择页面中选择 Application。首次创建项目时，系统会提示你登录华为账号。此时，请点击 登录，并留意，这里必要登录的是开辟者账号，即用于应用上架的账号。假如你是企业用户，建议使用公司的开辟者账号进行登录。

完成模板选择后，进行项目设置，并创建项目。待工程代码自动天生完成后，项目创建过程将如图所示。

在完成项目创建并乐成设置后，我们就可以进入开辟阶段，开始舒畅地进行元服务的开辟工作了。这一步标志着项目标正式启动，接下来可以使用HarmonyOS的强大功能，进行元服务的设计与实现，探索更多创新的应用场景，为用户提供更加流畅和智能的体验。
3.3拓展阅读：理解鸿蒙万能卡片的概念

虽然本项目不是元服务，但作为HarmonyOS 应用开辟的特色之一，我们必须有所了解。鸿蒙万能卡片是一种将元服务的关键重要信息以卡片的情势展示出来的界面组件。它秉承了HarmonyOS系统一次开辟多端部署、可分可合自由流转、统一生态原生智能的三大应用与服务开辟理念，支持运行在多种HarmonyOS终端设备上。
好比在之前开辟的元服务中，我们可以直接使用使用卡片来展示地貌风景。

对于开辟者而言，鸿蒙万能卡片的开辟相对简朴且高效。HarmonyOS系统提供了丰富的组件、接口与流量入口，开辟者只需开辟与上架一次，便可以部署在各种HarmonyOS终端设备上。同时，基于常驻桌面的卡片入口和更丰富的场景保举，开辟者可以或许获得更多的天然流量，从而低落后期运营成本。
用户在使用鸿蒙万能卡片时，可以通过滑动、点击等操纵与卡片进行交互。卡片可以根据用户的操纵进行展开、收缩或跳转至相干服务。此外，用户还可以自定义卡片的大小、位置以及显示内容，以满足个性化的需求。
四、Harmony Next 实战—“慢小圈”鸿蒙应用

在本章中，我们将通过实际案例开辟一个基于HarmonyOS Next的应用——“慢小圈”应用，资助大家深入理解如何使用鸿蒙系统的最新技能和功能来创建一个高效、智能的跨设备应用。通过本章的学习，您将掌握鸿蒙应用开辟的关键流程和技能要点。
编辑器版本：DevEco Studio 5.0.1 Beta3 面向HarmonyOS应用及元服务开辟者提供的集成开辟环境（IDE），助力高效开辟。
API版本：13
4.1 项目背景

“慢小圈”是一款旨在资助用户提高生活效率、进行信息管理和任务协作的应用。通过创新的功能设计和鸿蒙系统的跨设备本领，它可以在智能手机、平板、智能家居等设备之间实现无缝协同。使用HarmonyOS 5.0（NEXT）的优势，我们可以为用户提供流畅、高效的多设备互动体验。
4.2 应用架构

“慢小圈”应用的架构基于鸿蒙系统的多层次分布式本领。它通过多个模块和Ability的协作，确保用户可以在差别设备间流畅地同步任务、管理数据和执行操纵。该应用由以下几个核心部分构成：

[list
]

主界面Ability：展示用户的任务和日程信息，并提供便捷的操纵入口。

任务管理Ability：负责创建、编辑和同步任务，确保任务在差别设备间实时更新。

智能助手模块：集成了鸿蒙的智能助手，通过语音和智能保举系统，资助用户自动化管理任务和提醒。
[/list
] 4.3 创建应用项目

[list
=1]

初始化项目：在DevEco Studio中选择 New -> Create Project，选择 Empty Ability 模板进行项目初始化。根据项目需求设置应用的根本信息和模块结构，创建一个底子的鸿蒙应用框架。

设置项目环境：在项目标设置文件中，设置所需的权限和API，以便实现任务同步、跨设备协作等功能。
[/list
]

4.4 功能开辟

在“慢小圈”鸿蒙应用的开辟过程中，功能开辟是关键环节之一。本节将详细先容几个主要页面的开辟流程，包罗登录页面、个人中心页面、个人计划TODO表页面和“慢小圈”页面。每个页面都将展示如何使用HarmonyOS的技能来实现流畅的用户体验，并集成鸿蒙的核心功能。
4.4.1 登录页面开辟

登录页面是应用的第一步入口，用户通过该页面进行身份验证并进入应用。

上图是“慢小圈”的登录页面，着实现代码如下：

1. @Entry
2. @Component
3. struct Page {
4.   @State
5. message: string = 'Hello World'
6.   build() {
7.     Column() {
8.       Column() {
9.         Row
10. () {
11.           Image($r("app.media.logo"))
12.             .width("100vp")
13.             .height("100vp")
14.         }
15.         .width("100%")
16.         .height("100vp")
17.         .position({ x: "0", y: "95vp" })
18.         .justifyContent(FlexAlign.Center)
19.         Text("慢小圈")
20.           .width("100%")
21.           .height("50vp")
22.           .position({ x: "0", y: "200vp" })
23.           .textAlign(TextAlign.Center)
24.           .fontSize("26fp")
25.         Text("登录账号以使用更多服务")
26.           .width("100%")
27.           .height("30vp")
28.           .position({ x: "0", y: "250vp" })
29.           .fontColor("#808080")
30.           .textAlign(TextAlign.Center)
31.           .fontSize("14fp")
32.         Text("忘记密码")
33.           .width("150vp")
34.           .height("40vp")
35.           .offset({ x: "105vp", y: "99.68vp" })
36.           .fontSize("14fp")
37.         Text("短信验证码登录")
38.           .width("150vp")
39.           .height("40vp")
40.           .offset({ x: "-87.68vp", y: "59.2vp" })
41.           .fontSize("14fp")
42.         Text("注册账号")
43.           .width("150vp")
44.           .height("40vp")
45.           .offset({ x: "0vp", y: "214.86vp" })
46.           .textAlign(TextAlign.Center)
47.           .fontSize("14fp")
48.         TextInput
49. ({ placeholder: "密码" })
50.           .width("100%")
51.           .height("50vp")
52.           .position({ x: "0vp", y: "350.52vp" })
53.           .type(InputType.Password)
54.         TextInput
55. ({ placeholder: "用户名" })
56.           .width("100%")
57.           .height("50vp")
58.           .position({ x: "0vp", y: "288.5vp" })
59.         Button("登录")
60.           .width("90%")
61.           .height("40vp")
62.           .offset({ x: "0vp", y: "129.43vp" })
63.           .fontSize("20fp")
64.         Grid() {
65.           GridItem() {
66.           }
67.           .width("33.3%")
68.           .height("100%")
69.           .offset({ x: "0vp", y: "0vp" })
70.         }
71.         .width("98%")
72.         .height("76.01vp")
73.         .position({ x: "4.2vp", y: "90%" })
74.       }
75.       .width("100%")
76.       .height("100%")
77.       .justifyContent(FlexAlign.Center)
78.     }
79.     .width("100%")
80.     .height("100%")
81.   }
82. }

复制代码

下面是对代码每个部分的剖析
[list
=1]

@Entry 和 @Component 注解
[/list
]
[list
]

@Entry 和 @Component 是装饰器（decorators），这表明 Page 组件是应用的入口（@Entry）并且是一个UI组件（@Component）。这在某些UI框架中常见，比方React、Flutter等。
[/list
] [list
=1]

struct Page 和 @State

[/list
]
[list
]

struct Page 定义了一个页面组件，雷同于React中的class或者function。

@State
注解标识了 message 变量作为组件的状态，并初始化为 'Hello World'。
[/list
] [list
=1]

build() 方法
[/list
]
[list
]

build() 是一个函数，负责构建页面的结构。返回的内容形貌了整个页面的结构。
[/list
] 页面结构的层次结构
页面使用的是雷同于 Flexbox 结构的方式，包含了多层 Column 和 Row
组件，它们将其他组件组织成垂直或水中分列。具体结构如下：
第一层 Column

[list
]

最外层的 Column() 组件占据整个页面 (width: "100%" 和 height: "100%")。

它包含一个子 Column()，这个子列也占据页面的全部空间。
[/list
] 第二层 Column 组件

[list
]

这里是实际构建页面的部分，包含了多个子组件：[list
=1]

Row
和 Image：
[list
]

一个 Row
()，用于水中分列内容。

其中包含了一个 Image 组件，用于显示应用的 logo，$r("app.media.logo") 表现获取资源。

图片设置了 100vp 的宽度和高度，并被放置在页面的 95vp 处，靠近底部。
[/list
]

Text 组件：
[list
]

"慢小圈" 文本显示在页面中心，字体大小 26fp，占据100%宽度并且居中。

"登录账号以使用更多服务" 是页面中的提示文本，字体大小 14fp，颜色为灰色（#808080），也居中显示。

"忘记暗码"、"短信验证码登录"、"注册账号" 是页面中的链接或按钮文本，设置了差别的坐标偏移和字体大小。
[/list
]

TextInput
组件：
[list
]

"暗码" 和 "用户名" 输入框被设置了占满100%宽度，并分别定位在特定的 y 坐标上。

"暗码" 输入框的范例被设置为 InputType.Password，这意味着它是暗码输入框。
[/list
]

Button 组件：
[list
]

"登录" 按钮被设置为 90% 宽度，字体大小 20fp，也有一定的偏移量（y: "129.43vp"）。
[/list
]
[/list
]
[/list
] 其他结构组件

[list
]

Grid 和 GridItem：
[list
]

使用了 Grid() 来分配空间。它包含一个 GridItem，宽度是 33.3%，高度为100%。

Grid 的大小占用了页面的 98% 宽度和约 76% 的高度。
[/list
]
[/list
] 结构细节

[list
]

页面使用了 position、width、height、offset、justifyContent 和 textAlign 等结构属性来控制各个组件的显示位置和样式。

使用 FlexAlign.Center 和 TextAlign.Center 来确保内容居中对齐。
[/list
] 这段代码通过声明式的方式构建了一个登录页面的UI，包含了应用logo、文本信息、输入框和按钮等根本UI组件，结构上使用了 Column 和 Row
组件来实现垂直和水中分列。每个组件都被精细定位和调整以实现所需的界面结果。
本节先容了“慢小圈”登录页面的开辟，使用声明式语法构建了一套简洁而高效的结构，包罗应用 logo、提示文本、输入框及功能按钮等根本组件。通过使用 Column 和 Row
实现灵活的垂直与水中分列，结合 vp 和 fp 单元保障了相应式适配，并采用 @State
管理组件状态，为后续功能扩展奠定了底子。这种模块化和精细化设计确保了页面的雅观性与可维护性。
4.4.2 个人中心页面开辟

个人中心页面是用户管理个人信息和应用设置的核心页面。

上图是“慢小圈”的个人中心页面，着实现代码如下：

1. interface MenuToType{
2.   title:string;
3.   url:Resource;
4. }
5. @Entry
6. @Component
7. export struct TabUser {
8.   @State
9. nickname: string = '慢小圈';
10.   @State
11. signature: string = '00001';
13.   @State
14. menuTopList
15. :MenuToType[] = [
16.     {
17.       title:"我的动态",
18.       url:$r("app.media.t1")
19.     },
20.     {
21.       title:"我的主页",
22.       url:$r('app.media.t2')
23.     },
24.     {
25.       title:"我的粉丝",
26.       url:$r('app.media.t3')
27.     },
28.     {
29.       title:"我的段位",
30.       url:$r('app.media.t4')
31.     }
32.   ];
33.   @State
34. MenuList
35. : MenuToType[] = [
36.     {
37.       title: "我的任务",
38.       url: $r('app.media.tasks') // 任务页面的链接
39.     },
40.     {
41.       title: "任务统计",
42.       url: $r('app.media.statistics') // 任务统计页面
43.     },
44.     {
45.       title: "团队协作",
46.       url: $r('app.media.team') // 团队协作页面
47.     },
48.     {
49.       title: "个人资料",
50.       url: $r('app.media.profile') // 个人资料页面
51.     },
52.     {
53.       title: "设置",
54.       url: $r('app.media.settings') // 设置页面
55.     },
56.     {
57.       title: "帮助与反馈",
58.       url: $r('app.media.help') // 帮助与反馈页面
59.     }
60.   ];
62.   build() {
63.     Column() {
64.       // 顶部
65.       Column(){
66.         Flex({justifyContent:FlexAlign.Start,alignItems:ItemAlign.Center}){
67.           Image($r('app.media.jiji'))
68.             .width(50)
69.             .height(50)
70.             .borderRadius(60)
71.             .margin({right:10})
72.           Column(){
73.             Text(this.nickname)
74.               .fontSize(16)
75.               .width('100%')
76.               .textAlign(TextAlign.Start)
77.             Text('ID: '+this.signature)
78.               .fontSize(12)
79.               .margin({top:5})
80.               .textAlign(TextAlign.Start)
81.               .width('100%')
82.           }
83.         }
84.         .width('100%')
85.         Flex({justifyContent:FlexAlign.SpaceAround}){
86.           Column(){
87.             Text('10')
88.               .fontSize(16)
89.             Text('关注')
90.               .fontSize(14)
91.           }
92.           Column(){
93.             Text('100')
94.               .fontSize(16)
95.             Text('收藏')
96.               .fontSize(14)
97.           }
98.           Column(){
99.             Text('300')
100.               .fontSize(16)
101.             Text('访客')
102.               .fontSize(14)
103.           }
104.           Column(){
105.             Text('90')
106.               .fontSize(16)
107.             Text('点赞')
108.               .fontSize(14)
109.           }
110.         }.margin({top:30})
112.       }.width('100%')
113.       .padding(20)
114.       .height(200)
115.       .backgroundImage($r('app.media.bgg'))
117.       //主体内容
118.       Column(){
119.         Row
120. (){
121.           ForEach
122. (this.menuTopList
123. , (item:MenuToType) => {
124.             Column()
125.             {
126.               Image(item.url)
127.                 .width(40)
128.               Text(item.title)
129.                 .width('100%')
130.                 .fontSize(14)
131.                 .margin({top:10})
132.                 .textAlign(TextAlign.Center)
133.             }.width('25%')
134.           })
135.         }.width('100%')
136.         .backgroundColor('#ffffff')
137.         .borderRadius(15)
138.         .padding(15)
140.         Column(){
141.           ForEach
142. (this.MenuList
143. , (item:MenuToType) => {
144.             Row
145. (){
146.               Row
147. (){
148.                 Image(item.url)
149.                   .width(20)
150.                   .margin({right:10})
151.                 Text(item.title)
152.                   .fontSize(14)
153.               }
154.               Image($r('app.media.g1'))
155.                 .width(15)
157.             }.width('100%')
158.             .justifyContent(FlexAlign.SpaceBetween)
159.             .borderWidth({bottom:1})
160.             .borderColor('#f7f7f7')
161.             .padding({top:12,bottom:12})
162.           })
163.         }
164.         .backgroundColor('#ffffff')
165.         .borderRadius(15)
166.         .padding(15)
167.         .width('100%')
168.         .margin({top:10})
169.       }
170.       .width('100%')
171.       .padding(15)
172.       .margin({top:-40})
175.     }
176.     .backgroundColor('#f7f7f7')
177.     .height('100%')
178.     .width('100%')
179.   }
180. }

复制代码

下面是对代码每个部分的剖析
这段代码定义了一个用户界面组件 TabUser，它主要用于展示用户的个人信息以及一些与用户相干的菜单项。该组件使用声明式语法来构建UI，并且借助了状态管理和结构系统来组织界面内容。以下是代码的详细剖析：
[list
=1]

组件装饰器和定义
[/list
] TabUser 是一个组件，使用了 @Entry 和 @Component 装饰器：

[list
]

@Entry 表现该组件是一个入口点或主页面。

@Component 表现这是一个组件，可能是框架中的一个UI组件，负责渲染用户界面。
[/list
] [list
=1]

组件的状态管理 (@State
)
[/list
] 组件内部使用了多个状态变量来存储用户的根本信息和菜单项：

[list
]

nickname 和 signature 分别存储了用户的昵称和个性签名。

menuTopList
和 MenuList
分别存储了顶部和底部的菜单项。每个菜单项有一个标题和关联的资源URL。
[/list
] [list
=1]

UI结构结构
[/list
] 组件的UI是通过 Column、Row
、ForEach
等结构组件嵌套来实现的。团体界面可以分为几个主要部分：

[list
]

顶部区域：显示用户的头像、昵称和签名。头像是一个圆形图像，昵称和签名显示在头像旁边。

统计数据：显示用户的一些统计数据，如关注、收藏、访客、点赞等，每个统计项通过 Column 结构显示，并与相应的文本标签一起出现。

菜单区：分为两部分：
[list
]

顶部菜单（menuTopList
）：使用 ForEach
遍历列表，动态渲染每个菜单项的图标和标题。

底部菜单（MenuList
）：显示任务、统计、团队协作等内容，同样使用 ForEach
遍历，展示每个菜单项的图标和标题，同时还有一个小图标表现操纵按钮。
[/list
]
[/list
] [list
=1]

样式和结构
[/list
]
[list
]

使用了 Flex 结构来进行灵活的对齐（如 FlexAlign.Start 和 ItemAlign.Center）和空间分配（如 FlexAlign.SpaceAround）。

使用了 margin, padding, width, height 等属性来控制结构间距和尺寸。

各个区域之间使用了 backgroundImage 和 backgroundColor 来设置背景图和背景色。
[/list
] [list
=1]

动态数据渲染
[/list
]
[list
]

ForEach
用于遍历 menuTopList
和 MenuList
，并根据每个列表项动态渲染UI元素（如菜单项的图标和标题）。这表现界面的内容可以根据数据的变革而自动更新。
[/list
] [list
=1]

团体结构结构
[/list
] 团体结构是嵌套的 Column 和 Row
结构：

[list
]

外层 Column 包含了顶部区域和主体内容。

顶部区域和菜单区域的结构是通过 Column 和 Row
混合使用来实现的，确保内容的分列方式符合预期的视觉结果。
[/list
] 该组件构建了一个雷同个人主页的UI，展示了用户的个人信息、统计数据和菜单项。结构结构采用了灵活的相应式设计，通过 ForEach
动态渲染菜单项，确保UI根据数据的变革可以或许自动更新。
本节先容了“慢小圈”个人中心页面的开辟，其设计结合了灵活的结构和状态管理，实现了用户信息展示和功能导航。页面包含头像、昵称、统计数据及菜单项等模块，使用 @State
动态绑定用户数据，通过 ForEach
遍历实现菜单内容的动态渲染。结构采用 Column 和 Row
共同 Flex 实现灵活分列，样式设计上使用了圆形头像、背景图及圆角边框等元素，确保页面的视觉雅观与可维护性，是个人中心页面的完整解决方案。
4.4.3 个人计划TODO表页面开辟

TODO表页面是应用中的核心功能之一，答应用户管理和记录自己的任务和计划。

上图是“慢小圈”的TODO页面，着实现代码如下：

1. @Component
2. export default struct Item {
3.   private content?: string;
4.   @State
5. isComplete: boolean = false;
7.   @Builder
8.   labelIcon(icon: Resource) {
9.     Image(icon)
10.       .objectFit(ImageFit.Contain)
11.       .width(28)
12.       .height(28)
13.       .margin(20)
14.   }
15.   build() {
16.     Row
17. () {
18.       if (this.isComplete) {
19.         this.labelIcon($r('app.media.no'));
20.       } else {
21.         this.labelIcon($r('app.media.yes'));
22.       }
23.       Text(this.content)
24.         .fontSize(20)
25.         .fontWeight(500)
26.         .opacity(this.isComplete ? 0.4 : 1.0)
27.         .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })
28.     }
29.     .borderRadius(12)
30.     .backgroundColor("#FFFFFF")
31.     .width("100%")
32.     .height("64vp")
33.     .onClick(() => {
34.       this.isComplete = !this.isComplete;
35.     })
36.   }
37. }

复制代码

这段代码是一个使用装饰器和组件化结构编写的UI组件，用于展示一条带图标和笔墨的项目项（Item），并支持切换完成状态。以下是代码的功能剖析：
[list
=1]

状态管理：
[list
]

isComplete: 表现项目是否已完成的状态，初始值为 false，由 @State
装饰器标注以支持组件状态管理。

切换 isComplete 状态后，UI 会自动更新，显示差别的图标和笔墨样式。
[/list
]

动态渲染：
[list
]

图标和笔墨样式会根据 isComplete 状态动态调整。

假如 isComplete 为 true，显示特定图标（no）和带删除线的笔墨。

假如 isComplete 为 false，显示另一个图标（yes）和正常的笔墨样式。
[/list
]

点击交互：
[list
]

整个项目项是可点击的。点击后，通过 onClick 回调函数切换 isComplete 状态，并实时更新UI。
[/list
]
[/list
] 各部分功能详细剖析
[list
=1]

组件定义：
[list
]

通过 @Component 声明一个名为 Item 的组件。

组件包含一个可选的 content 属性用于显示笔墨内容。
[/list
]

labelIcon 方法：
[list
]

使用 @Builder 装饰器定义，负责创建一个图标的样式。

参数是资源范例（Resource），通过方法链设置图标的大小、边距和适配方式。
[/list
]

build 方法：
[list
]

定义组件的团体结构，使用一个水平排布的

1. Row

复制代码

容器来组织内容：
[list
]

图标：
[list
]

动态调用 labelIcon 方法，根据 isComplete 状态选择合适的图标资源（yes 或 no）。
[/list
]

笔墨：
[list
]

使用笔墨内容 content，动态设置其透明度、字体大小、加粗以及装饰结果（删除线或无装饰）。
[/list
]
[/list
]

容器本身样式包罗圆角、背景色、宽高等。

添加了点击事件处置惩罚器（onClick），切换 isComplete 状态。
[/list
]
[/list
] UI结果说明
[list
=1]

初始状态：
[list
]

显示图标（yes），文本为正常样式（无删除线、不透明）。
[/list
]

状态切换：
[list
]

点击容器：
[list
]

图标切换为 no。

文本样式更新为带删除线且透明度低落。
[/list
]

再次点击恢复原始状态。
[/list
]

交互性：
[list
]

图标和笔墨样式的切换均为实时动态更新，表现出良好的交互结果。
[/list
]
[/list
] 实用场景

[list
]

实用于待服务项列表（To-Do List
）或雷同的任务管理场景。

提供直观的状态反馈和便捷的状态切换功能。
[/list
]

1. import Item from './Item'
2. @Entry
3. @Component
4. struct Index {
5.   @State
6. todo: string = '';
7.   @State
8. list
9. : Array<string> = [
10.     "学习鸿蒙开发",
11.     "阅读技术书籍",
12.     "参加线上会议",
13.     "练习编程",
14.     "听音乐放松",
15.     "锻炼身体",
16.     "开发个人项目",
17.   ];
18.   build() {
19.     Flex({ direction: FlexDirection.Column, }) {
20.       Text("待办事项")
21.         .width("100%")
22.         .fontSize(28)
23.         .fontWeight(FontWeight.Bold)
24.         .textAlign(TextAlign.Start)
25.         .margin({ bottom: 20 })
26.       TextInput
27. ({ text: this.todo, placeholder: "请输入" })
28.         .width("100%")
29.         .height(45)
30.         .enterKeyType(EnterKeyType.Done)
31.         .placeholderColor(Color.Gray)
32.         .margin({ bottom: 20 })
33.         .onChange((value) => {
34.           this.todo = value;
35.         })
36.         .onSubmit((value) => {
37.           console.log(String(value))
38.           this.list
39. .push(this.todo)
40.           this.todo = ''
41.         })
42.       List
43. ({ space: 20 }) {
44.         ForEach
45. (this.list
46. , (item: string) => {
47.           List
48. Item() {
49.             Item({ content: item })
50.           }.width('100%')
51.         }, (item: string, i) => i + item)
52.       }
53.       .flexGrow(1)
54.       .edgeEffect(EdgeEffect.None)
55.     }
56.     .padding(18)
57.     .width('100%')
58.     .height('100%')
59.     .backgroundColor('#dddddd')
60.   }
61. }

复制代码

这段代码定义了一个待服务项应用的主界面组件 Index，基于组件化结构，通过动态状态管理和输入输出的交互，实现了添加和展示待服务项的功能。以下是详细剖析：
[list
=1]

初始状态与数据：
[list
]

使用两个

1. @State

复制代码

变量管理数据：
[list
]

todo：存储用户当前输入的待服务项。

list
：初始化为一个包含多个待服务项的数组，用于存储所有事项。
[/list
]
[/list
]

用户交互：
[list
]

用户可以通过输入框输入新任务，并通过提交事件（onSubmit）将其添加到列表中。

新的待服务项会即时更新到UI，整个过程流畅天然。
[/list
]

结构与展示：
[list
]

标题文本（“待服务项”）居上，设置了醒目标样式。

输入框居中，用于添加新事项。

待服务项列表展示在页面下方，使用自定义的 Item 组件渲染每一项。
[/list
]
[/list
] 关键部分剖析
[list
=1]

组件结构：
[list
]

使用 @Entry 标记组件为应用的入口点。

通过 @Component 声明 Index 为组件。
[/list
]

标题部分：
[list
]

通过 Text 渲染标题，设置了加粗、较大字体的样式，并添加底部边距使结构更雅观。
[/list
]

输入框功能：
[list
]

通过

1. TextInput

复制代码

组件实现用户输入功能：
[list
]

text：绑定到 this.todo，实现双向数据绑定，实时更新输入内容。

placeholder：占位符提示用户输入。

onChange：监听用户输入的每一个变革，更新 todo。

onSubmit：监听用户提交事件，将输入值添加到 list
，并清空 todo。
[/list
]

提交后，新的待服务项会立即渲染到界面中。
[/list
]

待服务项列表：
[list
]

使用

1. List

复制代码

组件结构，并通过

1. ForEach

复制代码

遍历

1. list

复制代码

数组：
[list
]

每个待服务项渲染为一个 List
Item，并通报到自定义的 Item 组件中。

为每一项绑定唯一的 key（i + item）以确保列表更新的高效性。
[/list
]
[/list
]

团体结构：
[list
]

使用 Flex 容器设置为纵向结构（FlexDirection.Column），确保标题、输入框和列表按顺序堆叠。

列表区域通过 flexGrow(1) 占据剩余空间，确保在内容较少时仍旧填满页面。

设置背景色为浅灰（#dddddd），增加视觉分层结果。
[/list
]
[/list
] 用户交互流程
[list
=1]

初始显示：
[list
]

显示标题、空输入框和初始化的待服务项列表。
[/list
]

添加新事项：
[list
]

用户在输入框输入笔墨，点击键盘的提交键触发 onSubmit。

新事项被加入 list
，同时清空输入框。
[/list
]

展示待服务项：
[list
]

列表实时更新，展示所有事项。

每一项通过 Item 渲染，包罗状态切换功能（isComplete）。
[/list
]
[/list
] UI结果
[list
=1]

页面顶部显示标题。

居中显示输入框，带有占位提示。

下方为待服务项的垂直列表，每一项显示笔墨和状态切换按钮。

页面团体简洁，互动流畅。
[/list
] 实用场景

[list
]

个人任务管理（To-Do List
）。

简朴的学习记录或任务跟踪应用。

作为入门鸿蒙应用开辟的示例项目。
[/list
] 潜在扩展方向
[list
=1]

删除事项：为列表项添加删除按钮，实现事项的移除。

恒久化存储：将 list
数据存储到当地或云端，实现数据的恒久化。

多状态管理：支持事项优先级或分类管理功能，增强可用性。
[/list
] 在本节中，我们开辟了一个简洁且功能齐备的TODO任务管理页面，使用鸿蒙框架的组件化特性，实现了待服务项的动态渲染、状态切换以及用户输入的交互处置惩罚。页面通过标题、输入框和任务列表的层次化结构，为用户提供了直观的任务添加和管理体验，同时支持实时状态更新和界面渲染。代码的高可扩展性还为后续功能的优化和美满奠定了底子，比方任务分类、优先级设置和数据恒久化存储等。
4.4.4 圈子页面开辟

“慢小圈”页面是应用的核心功能页面，专注于任务协作和信息共享。

上图是“慢小圈”的圈子页面，着实现代码如下：

1. import navController from '@ohos.router';class PostClass {  public userAlias: string; // 用户昵称  public postContent: string; // 贴文内容  public imageGallery: ResourceStr[]; // 图片列表  constructor(userAlias: string, postContent: string, imageGallery: ResourceStr[]) {    this.userAlias = userAlias;    this.postContent = postContent;    this.imageGallery = imageGallery;  }}@Entry@Componentstruct GalleryPage {  @State
2. postList
3. : PostClass[] = [    new PostClass('每日感悟', '教育的四大支柱，即学会求知，学会服务，学会共处，学会生存。', []),    new PostClass('今日分享', '甫昔少年日，早充观国宾。读书破万卷，下笔如有神。', [$r("app.media.bg2")]),    new PostClass('生活真相', '长风破浪会偶然，直挂云帆济沧海。', [$r("app.media.bg3"), $r("app.media.bg4")]),    new PostClass('每日思索', '妈妈看着我们慢慢长大，奔向出息；我们却只能看着妈妈逐渐老去，走向暮年。相同的岁月，却有差别的滋味。孩子在最懵懂的岁月里得到最多的庇护，把伴随视为理所当然，等到懂得珍惜时，总是懊悔错过了许多时光。', [$r("app.media.icon"), $r("app.media.icon"), $r("app.media.icon")]),    new PostClass('人生哲理', '人生如逆旅，我亦是行人。在岁月的长河中，我们都是匆匆过客，经历着风雨，也沐浴着阳光。每一次挑战都是成长的契机，每一次挫败都是灵魂的磨砺。', [$r("app.media.icon"), $r("app.media.icon"), $r("app.media.icon"), $r("app.media.icon")]),  ];  // 盘算行数  computeRow
4. sTemplate(index) {    let result: string = '1fr';    let length: number = this.postList
5. [index].imageGallery.length || 0;    if (length == 1) {      result = '1fr';    } else if (length >= 2 && length <= 6 && length != 3) {      result = '1fr 1fr';    } else {      result = '1fr 1fr 1fr';    }    return result;  }  // 盘算列数  computeColumnsTemplate
6. (index) {    let result: string = '1fr';    let length: number = this.postList
7. [ilery.length || 0;    if (length == 1) {      result = '1fr';    } else if (length == 2 || length == 4) {      result = '1fr 1fr';    } else {      result = '1fr 1fr 1fr';    }    return result;  }  // 盘算高度  computeGridHeight
8. (index) {    let result: number = 0;    let length: number = this.postList
9. [indeeGallery.length || 0;    if (length <= 3) {      result = 70;    } else if (length > 3 && length <= 6) {      result = 145;    } else {      result = 220;    }    return result;  }  // 盘算宽度  computeGridWidth
10. (index) {    let result: number = 0;    let length: number = this.postList
11. [indry.length || 0;    if (length == 1) {      result = 70;    } else if (length == 2 || length == 4) {      result = 145;    } else {      result = 220;    }    return result;  }  build() {    Column() {      List
12. ({ space: 20 }) {        List
13. Item() {          Stack({ alignContent}) {            Column() {              Image($r("app.media.back1"))                .objesctFit(ImadgeFit.ver);            }            .width('100%')            .height(300);            Row
14. ({ space: 10 }) {              Text('慢小圈')                .fontSize(20)                .fontColor(0xffffff)                .margin({ bottom: 10 });              Image($r("app.media.back2"))                .width(80)                .height(80)                .borderRadius(8)                .objesctFit(ImageFit.Cover);            }            .height(80)            .justifyContent(FlexAlign.End)            .padding(14);          }          .width('100%')          .height(300);        }        ForEach
15. (this.postList
16. , (item: PostClass, index: number) => {          List
17. Item() {            Row
18. ({ space: 10 }) {                .obsectFit(ImwgeFit.Cover);              Column({ space: 10 }) {                Text(`${item.userAlias}`)                  .fontSize(16)                  .fontColor('#409EFF');                Text(item.postContent)                  .fontSize(16)                  .lineHeight(22);                if (item.imageGallery && item.imageGallery.length > 0) {                  Grid() {                        Image(img)                          .height(70)                          .width(70)                          .objectFit(ImageFit.Cover)                          .borderRadius(2)                      }                    });                  }                  .columnsTemplate(this.computeColumnsTemplate
19. (index))                  .rowsTemplate(this.computeRow
20. sTemplate(index))                  .columnsGap(5)this.computeGridWidth
21. (index))                  .height(this.computeGridHeight
22. (index));                }              }              .layoutWeight(1)              .alignItems(HorizontalAlign.Start)              .justifyContent(FlexAlign.Start);            }            .width('100%')            .alignItems(VerticalAlign.Top);          }          .width('100%')          .paddin;        });      }      .divider({ strokeWidth: 1 })      .width('100%');    }    .width('100%')    .height('100%');  }}

复制代码

上述代码是一个用于鸿蒙OS开辟的页面组件，展示了一个动态内容列表，其中每项可以包罗用户昵称、贴文内容，以及图片列表。以下是代码剖析：
核心结构
[list
=1]

PostClass类：
[list
]

定义了每个贴文的数据结构，包罗：
[list
]

userAlias: 用户昵称。

postContent: 贴文内容。

imageGallery: 贴文关联的图片列表。
[/list
]
[/list
]

GalleryPage组件：
[list
]

组件使用了@State
来管理动态数据postList
，即多个PostClass对象。

build函数定义了组件的页面结构。
[/list
]
[/list
] 关键功能
[list
=1]

动态图片结构：
[list
]

1. computeRow
2. sTemplate

复制代码

1. computeColumnsTemplate

复制代码

[list
]

根据图片数量动态盘算网格的行列结构模板。
[/list
]

1. computeGridHeight

复制代码

1. computeGridWidth

复制代码

[list
]

根据图片数量动态设置图片网格的宽高。
[/list
]
[/list
]

结构绘制：
[list
]

使用Column和Row
组件实现垂直与水平结构。

每个列表项

1. List
2. Item

复制代码

内容包罗：
[list
]

用户头像与昵称。

贴文内容。

图片列表（用Grid结构）。
[/list
]
[/list
]

图片展示：
[list
]

当图片存在时，采用Grid组件动态天生网格结构，并通过ForEach
逐一插入图片。
[/list
]
[/list
] 界面特点
[list
=1]

顶部背景区域：
[list
]

使用Image组件设置顶部的背景图，以及右下角的头像与笔墨信息。
[/list
]

动态内容列表：
[list
]

通过ForEach
迭代postList
，为每个贴文天生独立的列表项。
[/list
]

图片网格：
[list
]

根据图片数量，自动调整行列数与结构，包管显示结果适配内容。
[/list
]
[/list
] 样式与优化

[list
]

自适应设计：
[list
]

动态宽高盘算以及网格设置，包管差别图片数量下的显示结果同等。
[/list
]

视觉层次感：
[list
]

使用边距与对齐方式，如justifyContent、alignItems，保持内容排布整齐雅观。
[/list
]

代码扩展性：
[list
]

贴文与图片列表的数据结构清晰易扩展，可以轻松增加或修改字段。
[/list
]
[/list
] 实用场景
该组件实用于社交类应用的内容展示页面，如朋友圈、动态列表等，通过图片与笔墨的结合，提供良好的用户体验。
本节展示了“慢小圈”页面的开辟，通过动态数据绑定和网格结构的自适应设计，出现了一个内容丰富、结构灵活的任务协作与信息共享界面。代码实现涵盖了用户贴文数据的动态渲染、图片网格结构的自动适配，以及简洁雅观的界面风格，为社交类应用提供了一个高效实用的实现方案。
4.5 结果截图

“慢小圈”核心页面截图如下：

五、总结

本文详细先容了在HarmonyOS 5.0（NEXT）版本下进行“慢小圈”元服务开辟的全过程。从底子的开辟环境搭建到元服务的实际构建，全面解说了如何使用华为的鸿蒙生态进行高效的应用开辟，资助开辟者理解和掌握鸿蒙平台的创新技能和开辟流程。
HarmonyOS 5.0（NEXT）基于华为方舟引擎，通过软硬云生态的深度整合，HarmonyOS NEXT实现从系统到应用的全面流畅升级，整机流畅度提升30% ，续航增加约56分钟 ，运行内存平均节省1.5GB 。

文章首先回首了HarmonyOS 5.0的最新进展和核心特点，包罗其跨设备协同、智能化服务和系统性能的显著提升。随后，深入探讨了HarmonyOS的设计理念、核心功能及其广泛的应用场景，涵盖了智能家居、汽车信息娱乐、办公与教育等多个领域，展示了HarmonyOS如何改变传统的数字体验。文章具体解说了鸿蒙应用的开辟流程，涵盖了从环境设置、项目创建到应用调试和发布的每一个环节，资助开辟者可以或许独立完成应用的开辟与上线。同时，还先容了鸿蒙系统中的“万能卡片”概念，它为开辟者提供了一种便捷的方式来展示元服务的关键信息，并支持跨终端设备的部署和展示。
通过本文，开辟者可以全面了解鸿蒙操纵系统的最新功能和开辟流程，为将来的数字化转型奠定技能底子。同时，鸿蒙生态的强大潜力和创新特性也为开辟者提供了更多的应用开辟时机，推动智能化和全场景的技能应用发展。
附录


[list
]

HarmonyOS NEXT：https://developer.huawei.com/consumer/cn/next

元服务： https://developer.huawei.com/consumer/cn/harmonyos/fa

ArkTS： https://developer.huawei.com/consumer/cn/next/arkts

HUAWEI DevEco Studio：https://developer.huawei.com/consumer/cn/download/

DevEco Service：https://developer.huawei.com/consumer/cn/next/deveco-service/

ArkUI：https://developer.huawei.com/consumer/cn/next/arkui
[/list
]
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。