项目源码已开源（持续更新中~~）： 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 (博客详情)
主要页面说明
- 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; // 发布日期 }
注意事项
- 目前项目中的数据均为演示数据，将来会根据实际需求进行更新
- 静态资源库的设计允许灵活添加新的案例和项目，无需修改主应用的核心代码
- 使用
@luvi/lv-markdown-in插件需要确保Markdown文件放置在正确的资源目录中
4.对于博客资源及详情的数据结构目前还在准备中
