title:
order: 5

category: 物料

飞冰设计思路

在了解飞冰物料数据规范之前，我们先来大概了解一下飞冰的设计思路；在飞冰使用过程中，大多数开发者只需要下载 GUI 工具 Iceworks，然后按照文档教程进行项目开发即可。目前飞冰提供的物料数据源有 React 和 Vue 版本，然而，在飞冰开发群里常见的问题是有没有计划支持 AngularJS 版本，有没有移动端的支持计划等等。实际上，对飞冰来说，本质上一套通用的模式，只需要按照相应的数据规范生产物料、生成数据源，最后通过 Iceworks 接入即可。如果你计划接入一套新的框架物料，可以参考下面的步骤进行：

  1. 选定物料类型和开发规范
  2. 物料初始化模板
  3. 物料开发
  4. 生成物料数据
  5. 接入 Iceworks

物料类型和开发规范

前面讲到，对飞冰来讲本质上是通过一套通用的数据规范结合 Iceworks 运作的，因此，选定物料类型你可以基于 React、Vue、Angular 甚至是 Bootstrap 等进行开发。

开发规范主要是指开发物料时的编码规范，比如 HTML、CSS、 JavaScript 等基础规范。

物料初始化模板

物料主要包括组件、区块、布局、模板等，在开发物料时，我们需要按照一定的初始化模板进行开发，因此需要先规划好物料类型以及通用的初始化模板。

物料开发

物料开发即根据实际的业务场景进行组件、区块、模板的抽象进行沉淀，开发一套基于业务的专属物料。

同时我们为开发物料提供了配套的物料开发工具，物料开发工具提供的能力主要是根据预设好的物料脚手架模板进行初始化，生成模板文件方便开发，同时提供预览，热加载等服务。详细可参考 飞冰物料开发工具 ice-devtools

生成物料数据源

在物料开发完成时，需要生成对应的物料元数据，为 Iceworks 提供数据源。数据源本质上是一份 JSON 文件。如:

飞冰官网物料源地址： http://ice.alicdn.com/assets/react-materials.json
Fusion.design 物料源地址：https://fusion.design/api/v1/sites/1/materials

接入 Iceworks

生成好物料数据源，只需要对应的数据源地址提供给 Iceworks, 在设置面板中添加即完成了完整链路的闭环。

物料数据规范

飞冰物料数据规范是一套通用的描述物料的元数据的标准格式，规范约定了物料的类型、名称、物料数据、存储位置等信息。目前基于飞冰物料数据规范实现了 react-materials 和 vue-materials 两个版本的物料数据源。

数据规范

  1. {
  2.   "name": "react-materials",        // 名称
  3.   "type": "react",                  // 类型(vue、react、angular、bootstrap、etc）
  4.   "components": [<ComponetDesc>],   // 组件数据
  5.   "blocks": [<BlockDesc>],          // 区块数据
  6.   "layouts": [<LayoutDesc>],        // 布局数据
  7.   "pages": [<PageDesc>],            // 页面数据
  8.   "scaffolds": [<ScaffoldDesc>]     // 模板脚手架数据
  9. }

区块数据规范

  1. {
  2.   // (必)英文名
  3.   "name": "foo-block",
  5.   // (必)中文描述
  6.   "title": "示例区块",
  8.   // (可)区块详细说明
  9.   "description": "",
  11.   // (必) 区块的预览地址
  12.   "homepage": ""
  14.   // (必) 区块代码地址
  15.   repository: ""
  17.   // (必) source 字段描述区块下载方式
  18.   "source": {
  19.     "type": "npm",
  20.     "npm": "@icedesign/foo-block",
  21.     "registry": "http://registry.npmjs.com"
  22.     "version": "0.1.0",
  23.     "sourceCodeDirectory": "src",
  24.   },
  26.   // (必) 分类
  27.   "categories": [""],
  29.   // (必) 截图
  30.   "screenshot": "https://img.alicdn.com/tfs/TB1I67ih3vD8KJjy0FlXXagBFXa-947-929.png",
  32.   // (必) 发布时间
  33.   "publishTime": "2018-03-13 22:19",
  35.   // (必) 最后修改时间
  36.   "updateTime": "2018-03-13 22:19",
  38.   // (必) 用于说明组件依赖关系
  39.   "components": {
  40.     "@icedesign/base": "^x.x.x",
  41.   },
  43.   // (必) features
  44.   "features": {
  45.     // 分词, 用于搜索
  46.     "participle": { /* ... */ },
  48.     // 区块使用的组件
  49.     "useComponents": [{
  50.         "basePackage": "@icedesign/base",
  51.         "className": "Grid"
  52.     },{
  53.         "basePackage": "@icedesign/container",
  54.         "className": "Container"
  55.     }]
  56.   }
  57. }

模板数据规范

模板数据规范相对区块数据规范不同的是不需要指定 sourceCodeDirectory 字段：

  1. {
  2.   // (必)英文名
  3.   "name": "ice-design-pro",
  5.   // (必)中文描述
  6.   "title": "pro 模板",
  8.   // (可)区块详细说明
  9.   "description": "",
  11.   // (可)模板预览地址
  12.   "homepage": "https://alibaba.github.io/ice/scaffold-preview/ice-design-pro.html"
  14.   // (必) source 字段描述下载方式
  15.   "source": {
  16.     "type": "npm",
  17.     "npm": "@icedesign/pro",
  18.     "version": "0.1.0"
  19.   },
  21.   // (必) 分类
  22.   "categories": [],
  24.   // (必) 截图
  25.   "screenshot": "https://img.alicdn.com/tfs/TB1I67ih3vD8KJjy0FlXXagBFXa-947-929.png",
  27.   // (必) 发布时间
  28.   "publishTime": "2018-03-13 22:19",
  30.   // (必) 最后修改时间
  31.   "updateTime": "2018-03-13 22:19",
  33.   // (必) 用于说明组件依赖关系 (dependencies 字段)
  34.   "features": {},
  36.   // (可) features
  37.   "features": {}
  38. }

至此，我们对飞冰的设计思想和物料数据规范有了大概的了解，如何自定义一套物料接入 Iceworks 的流程。如果你看完还是不知道如何开始动手，可以通过飞冰钉钉群联系我们。