鸿蒙原生开发手记：徒步迹 - 自定义组件开发规范

鸿蒙原生开发手记：徒步迹 - 自定义组件开发规范

掌握自定义组件的设计与封装规范

前言

组件化开发是 ArkUI 的核心思想。徒步迹项目中大量使用自定义组件来复用 UI 逻辑、提升代码可维护性。本文总结自定义组件的设计原则、通信方式和最佳实践。

一、组件设计原则

typescript 复制代码

// 1. 单一职责：每个组件只负责一个功能
// 2. 高内聚低耦合：组件内部逻辑紧密，对外依赖最小
// 3. 可复用性：通过 @Prop 参数化实现复用

// 坏的实践：一个组件做太多事
@Component
struct BadComponent {
  @Prop user: any;
  @Prop routes: any[];
  @Prop weather: any;
  // 三个不相关的功能耦合在一起
}

// 好的实践：拆分为独立组件
@Component
struct UserProfile { @Prop user: User; }
@Component
struct RouteCard { @Prop route: Route; }
@Component
struct WeatherWidget { @Prop weather: Weather; }

二、组件通信规范

typescript 复制代码

// 1. 父传子：@Prop
@Component
struct ChildComponent {
  @Prop data: string = '';
}

// 2. 子传父：回调函数
@Component
struct ChildWithCallback {
  @Prop onAction: (result: string) => void = () => {};

  private handleClick(): void {
    this.onAction('点击了按钮');
  }
}

// 3. 跨组件：@Provide / @Consume
@Component
struct GrandParent {
  @Provide('theme') theme: string = 'dark';

  build() {
    Child();
  }
}

@Component
struct Child {
  @Consume('theme') theme: string;

  build() {
    Text(`当前主题: ${this.theme}`);
  }
}

通信方式	装饰器	方向	适用场景
父传子	@Prop	单向	基础数据传递
子传父	回调函数	单向	事件通知
跨层级	@Provide/@Consume	单向	主题/配置共享
全局	AppStorage	双向	全局状态

三、总结

自定义组件是 ArkUI 应用开发的基础。通过遵循单一职责、合理使用通信装饰器，徒步迹的组件库保持了良好的可维护性和可扩展性。

总结

本文围绕"徒步迹"应用的实际开发场景，系统讲解了相关技术的实现要点。通过代码实战 +原理剖析的方式，帮助开发者快速掌握 HarmonyOS NEXT 的核心开发能力。

总结要点

理解 HarmonyOS NEXT 应用架构与 Ability 生命周期
掌握 ArkUI 声明式 UI 的状态管理与组件化开发
熟悉常用 Kit 能力（Map Kit、Location Kit、Camera Kit 等）的接入方式
学会性能优化、内存管理、并发编程等进阶技巧
具备从 0 到 1 构建完整 HarmonyOS 应用工程的能力

核心特性回顾

声明式 UI：ArkUI 提供简洁高效的声明式开发范式
状态管理：@State、@Prop、@Link、@Provide、@Consume 等装饰器
跨组件通信：通过 Provide/Consume 实现跨层级数据传递
原生能力：通过 Kit 接入系统能力（地图、定位、相机等）
性能优化：LazyForEach、虚拟列表、Skeleton 骨架屏等

学习建议 ：技术学习重在实践，建议结合项目源码同步动手操作，遇到问题多查阅HarmonyOS 官方文档。

下一篇预告：鸿蒙原生开发手记：徒步迹 - 持续更新中

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

开源鸿蒙跨平台社区 ：https://openharmonycrossplatform.csdn.net
HarmonyOS 官方文档 ：https://developer.huawei.com/consumer/cn//
OpenHarmony 开源项目 ：https://www.openharmony.cn/
ArkUI 组件参考 ：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development
徒步迹项目源码 ：GitHub - hiking-trail-harmonyos
DevEco Studio 下载 ：https://developer.huawei.com/consumer/cn/deveco-studio/
ArkTS 语言指南 ：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-overview
系列文章导航 ：CSDN 博客 - 鸿蒙原生开发手记