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

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

项目演示

注意： 项目需要再真机或模拟器中运行， 否则会出现部分图片无法展示的问题

项目介绍

本项目是一个基于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 (博客详情)

主要页面说明

1. Index：应用首页，展示三个学习阶段入口

   • 萌新小白：基础入门阶段
   • 登堂入室：进阶学习阶段
   • 进阶高手：高级功能开发阶段

2. BasicCaseList/AdvancedCaseList/HybridCaseList：各阶段的案例列表页面

   • 展示该阶段的学习案例
   • 点击案例可进入详情页面

3. BlogViewList：博客列表页面

   • 支持卡片视图和列表视图两种展示方式
   • 可通过按钮切换视图模式

4. BlogDetail：博客详情页面

   • 使用 @luvi/lv-markdown-in 插件解析展示Markdown内容

静态资源库说明

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

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

静态资源库引用方式

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

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

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

   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)
        }
    }
})

数据结构

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

1. RouterType：一级路由数据结构

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

2. CaseType：案例数据结构

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

3. BlogItem：博客数据结构

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

注意事项

1. 目前项目中的数据均为演示数据，将来会根据实际需求进行更新
2. 静态资源库的设计允许灵活添加新的案例和项目，无需修改主应用的核心代码
3. 使用 @luvi/lv-markdown-in 插件需要确保Markdown文件放置在正确的资源目录中
   4.对于博客资源及详情的数据结构目前还在准备中