钉钉全码组件实战（六）

一、开发组件

开发组件和开发小程序基本一致，无需额外的学习成本。

初始化后的项目文件，目录结构和文件名称不要修改，只修改 plugin/components 目录下的文件和 plugin.json，否则会造成组件运行失败的情况。

1.文件目录结构说明

项目目录

├── miniprogram // 本地预览入口，和组件实际运行无关
├── plugin // 组件代码目录
│   ├── components // 组件代码
│   │   ├── componentA
│   │   │   ├── config.json
│   │   │   ├── index.acss
│   │   │   ├── index.axml
│   │   │   ├── index.js
│   │   │   └── index.json
│   │   ├── componentB
│   │   │   ├── config.json
│   │   │   ├── index.acss
│   │   │   ├── index.axml
│   │   │   ├── index.js
│   │   │   └── index.json
│   │   └── plugin.json // 组件配置，插件根据plugin.json中的publicComponents来识别组件
└── otherUtil.js

单个组件目录

index.json  // 组件配置文件
index.acss  // 样式表
index.axml  // 布局
index.js    // 业务逻辑
config.json // 组件在定制工作台设计器里的描述文件，只有需要在设计器上展示的组件才需要这个文件

2.开发步骤

1.启动 IDE，本地开发组件

在小程序 IDE 右侧，可以预览组件，表示运行成功。

2.配置组件信息

config.json 是组件在定制工作台设计器上的描述文件。设计器上拖入和配置组件时，会从 config.json 中读取信息，拼装在整个页面的描述文件中，保存后供运行态加载，从而渲染出组件的运行态。

针对PC版本工作台，组件代码上传时，需要有pc.config.json文件，可与config.json文件保持一致。