「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 應用大致的過程了。

希望對你有幫助。

謝謝！