一、HarmonyOS Next 开发者手册项目之项目架构设计原创

全栈若城

发布于 2025-5-28 09:31

浏览

0收藏

@[toc]

项目源码已开源（持续更新中~~）： https://gitcode.com/nutpi/HarmonyosNextCaseStudyTutorial

项目演示

注意：项目需要再真机或模拟器中运行，否则会出现部分图片无法展示的问题
一、HarmonyOS Next 开发者手册项目之项目架构设计-鸿蒙开发者社区

一、HarmonyOS Next 开发者手册项目之项目架构设计-鸿蒙开发者社区

项目介绍

本项目是一个基于HarmonyOS Next的开发者学习手册应用，旨在帮助开发者系统地学习HarmonyOS开发知识。项目采用分级学习的方式，从基础到高级，逐步深入讲解HarmonyOS的开发技术和实践案例。
前四章主要讲解的是应用架构及相关内容讲解，帮助开发者能够快速掌握当前这个应用

项目结构

├── AllCaseSource/           # 静态资源库目录
│   └── TestCase/            # 示例案例资源库
├── AppScope/                # 应用全局配置
├── entry/                   # 主入口模块
│   ├── src/
│   │   ├── main/           # 主要源代码
│   │   │   ├── blogs/      # 博客Markdown文件
│   │   │   ├── ets/        # ArkTS源代码
│   │   │   ├── module.json5 # 模块配置
│   │   │   └── resources/  # 资源文件
│   │   ├── mock/           # 模拟数据
│   │   ├── ohosTest/       # 测试代码
│   │   └── test/           # 单元测试
├── hvigor/                  # 构建工具配置
├── oh-package.json5         # 项目依赖配置
└── build-profile.json5      # 构建配置

主要目录说明

entry/src/main/ets/：应用的主要源代码目录
- Components/：公共组件
- common/：公共资源和工具
- entryability/：应用入口能力
- pages/：页面组件
- router/：路由配置
- type/：类型定义
- view/：视图组件
AllCaseSource/：静态资源库目录，每个子目录代表一个独立的案例或项目资源
- 目前包含 TestCase/ 作为示例案例资源库
- 未来将添加更多案例资源库

页面关系

页面导航结构

Index (主页)
├── BasicCaseList (萌新小白)
│   └── TestCase (案例详情)
├── AdvancedCaseList (登堂入室)
│   └── 案例详情页
├── HybridCaseList (进阶高手)
│   └── 案例详情页
└── BlogViewList (博客列表)
    └── BlogDetail (博客详情)

主要页面说明

Index：应用首页，展示三个学习阶段入口
- 萌新小白：基础入门阶段
- 登堂入室：进阶学习阶段
- 进阶高手：高级功能开发阶段
BasicCaseList/AdvancedCaseList/HybridCaseList：各阶段的案例列表页面
- 展示该阶段的学习案例
- 点击案例可进入详情页面
BlogViewList：博客列表页面
- 支持卡片视图和列表视图两种展示方式
- 可通过按钮切换视图模式
BlogDetail：博客详情页面
- 使用 @luvi/lv-markdown-in 插件解析展示Markdown内容

静态资源库说明

项目使用了静态资源库的设计模式，将案例内容封装为独立的模块：

每个案例/项目都作为一个独立的静态资源库存放在 /AllCaseSource/ 目录下
目前已有的 TestCase 是一个示例资源库
未来会在 /AllCaseSource/ 中创建更多静态资源库，每个代表一个案例或项目
主应用通过路由和依赖引用这些静态资源库中的内容

静态资源库引用方式

在 oh-package.json5 中声明依赖：

{
  "dependencies": {
     "testcase": "file:../AllCaseSource/TestCase"
  }
}

在路由配置中引用案例路径：

export const BasicCaseListRouter:CaseType[] = [
    {
        caseName: '演示数据',
        desc: '演示数据随着项目需求而改变',
        articlePath: "Components/TestCase"
    },
    // 更多案例...
];

Markdown解析功能

项目使用 @luvi/lv-markdown-in 插件解析和展示Markdown内容：

LvMarkdownIn({
    context: getContext(),  // 资源文件模式必填参数
    loadMode: "rawfile",
    rawfilePath: "blogs/test.md",
    loadCallBack: {
        success(r: LMICallBack) {
            console.log("luvi-markdown-in > " + r.code, r.message)
        },
        fail(r: LMICallBack) {
            console.error("luvi-markdown-in > " + r.code, r.message)
        }
    }
})

数据结构

项目定义了几个主要的数据类型：

RouterType：一级路由数据结构

export interface RouterType{
    stage: string;     // 阶段名称
    desc: string;      // 阶段描述
    icon: string;      // 阶段图标
    routePath: string; // 二级页面路由路径
}

CaseType：案例数据结构

export interface CaseType {
    caseName: string;   // 案例名称
    desc: string;       // 案例描述
    articlePath: string; // 博文页面路由路径
}

BlogItem：博客数据结构

export interface BlogItem {
    id: number;         // 博客ID
    title: string;      // 博客标题
    content?: string;   // 博客内容
    imageUrl: Resource | null; // 博客图片
    date?: string;      // 发布日期
}