“MDVC框架”应用实例以及简单了解

今年4月份的时候写了《MDVC框架：产品文档最优雅的结构》一文，一些人在询问是不是能给个具体的例子？今天来补充一下，根据这个实际的例子来剖析框架的使用。

以近期 App 中的 H5 为例，来具体讲解一下。

那么，我们这就开始吧！

飞行学院列表页

飞行学院（M）
飞行学院是为了解决应用内展示飞机以及 App 的说明书、飞行宝典、视频教程、快速手册等信息，辅助销售，更好的为用户服务而增加的。

数据来源（D）
包括类型、标题、缩略图以及标签，均通过后台配置。其中，类型、标题为必选项；缩略图和标签为非必选项。

UI 设计（V）
见设计图，以最终设计稿为准

交互（C）

1. 飞行学院区分多语言，学院内容有中英文两种；
2. 中文对应简体中文，英文对应英语、日语、法语、韩语以及香港、台湾繁体；
3. 类型、标题、图片以及标签形成一个大卡片，点击卡片任意位置条转到对应内容的界面；
4. 类型以及标签点击遵循1的交互效果；
5. 因为后台上传的文件为 .pdf 格式，需要考虑将 pdf 转成 .html 格式进行展示；
6. 转成 .html 格式浏览之后，能够将内容缓存到本地
7. 进入飞行学院前，没有网络时，界面提示没有网络图标，与当前应用的提示一致；
8. 进入飞行学院后，一段时间没有网络，界面给出文字提示，内容为“网络异常，请检查网络”，考虑多语言对应；
9. 点击返回，返回到上一级界面——设备选择界面

D（数据）相关的部分，我再补充补一个后台的规划，也就是数据来源。

飞行学院后台

后台界面

内容管理界面

添加内容界面

类型管理界面

添加类型界面

以上，就是 MDVC 应用大致的过程了。

希望对你有帮助。

谢谢！