今年4月份的时候写了《MDVC框架：产品文档最优雅的结构》一文，一些人在询问是不是能给个具体的例子？今天来补充一下，根据这个实际的例子来剖析框架的使用。
以近期 App 中的 H5 为例，来具体讲解一下。
那么，我们这就开始吧！
飞行学院列表页
飞行学院（M）
飞行学院是为了解决应用内展示飞机以及 App 的说明书、飞行宝典、视频教程、快速手册等信息，辅助销售，更好的为用户服务而增加的。
数据来源（D）
包括类型、标题、缩略图以及标签，均通过后台配置。其中，类型、标题为必选项；缩略图和标签为非必选项。
UI 设计（V）
见设计图，以最终设计稿为准
交互（C）
- 飞行学院区分多语言，学院内容有中英文两种；
- 中文对应简体中文，英文对应英语、日语、法语、韩语以及香港、台湾繁体；
- 类型、标题、图片以及标签形成一个大卡片，点击卡片任意位置条转到对应内容的界面；
- 类型以及标签点击遵循1的交互效果；
- 因为后台上传的文件为 .pdf 格式，需要考虑将 pdf 转成 .html 格式进行展示；
- 转成 .html 格式浏览之后，能够将内容缓存到本地
- 进入飞行学院前，没有网络时，界面提示没有网络图标，与当前应用的提示一致；
- 进入飞行学院后，一段时间没有网络，界面给出文字提示，内容为“网络异常，请检查网络”，考虑多语言对应；
- 点击返回，返回到上一级界面——设备选择界面
D（数据）相关的部分，我再补充补一个后台的规划，也就是数据来源。
飞行学院后台
后台界面
内容管理界面
添加内容界面
类型管理界面
添加类型界面
以上，就是 MDVC 应用大致的过程了。
希望对你有帮助。
谢谢！
网友评论