星迎.png

分享人：星迎
视频地址：一键回放

一、组件开发介绍

一个组件有一个完整的业务功能，包含视图和逻辑。

开发流程概览

现在本地对组件进行开发，本地开发时首先创建插件，在开发者后台创建插件完成之后，可以选择DingTalk Design CLI进行组件的开发，然后上传组件，也可以选择在小程序IDE中进行组件开发及上传。
上传之后需要进行线上调试，对组件可以进行一些配置，配置完成之后可以在设计器中调试组件，当组件调试过程中发现有不符合预期的地方，可以返回本地开发重新进行开发并上传，并再次进入设计器中进行调试，直到符合预期之后。
可以将组件进行提交上架，通过商家审批之后，可以将组件进行提交发布。完成灰度发布之后，就可以进入到全量发布阶段，即正式上线。

开发约束

钉钉工作台的插件本质是小程序，钉钉工作台插件中的组件开发遵守钉钉小程序组件开发规范，同时需接受钉钉工作台插件的开发约束。只有遵守了以下开发约束，才能正式上架。

在开发组件前，开发者需要完成钉钉开发者注册和激活，详情请参考成为钉钉开发者。
不能在发开过程中使用钉钉小程序JSAPI ，即dd .开头的所有方法。
不能在组件中使用setInterval。
不能在组件中使用webview。
图片采用外链方式引入，不能在组件文件夹中直接包含图片，单张图片size在100k以内，像素比在2000* 2000以内，否则可能导致黑屏。
每个插件中组件数量不超过10个。
每个插件包的大小1M以内。

自建组件可见性

客户企业只能看到服务商为其创建的工作台中使用的自建组件。
例如：服务商企业有自建组件A 、B 、C 三个。给客户定制的工作台里包含了组件A 、B 。则客户企业管理员在设计器中编辑工作台时只能看到组件A 、B两个。

二、组件开发工具

IDE开发工具

https://open.dingtalk.com/document/resourcedownload/miniapp-tool
下载链接可以通过开放平台官方网站的文档中下载链接进行下载安装，打开之后效果如图：

IDE开发工具具有开发编辑器、应用模拟器、真机预览以及上传等功能，可以满足组件开发全生命周期的所有过程。

DingTalk Design CLI

钉钉前端应用研发命令行工具

功能

提供小程序、 H5微应用、工作台组件的初始化能力
组件开发过程中主要关注小程序和工作台组件的本地构建、开发调试、二维码预览、校验（是否满足插件约束或代码规范）和上传等能力
提供H5微应用和小程序本地模拟器开发的能力

安装

①首先命令行当中输入 node-v 去检查是否已经安装了 node.js.12.15 及以上的更高版本
②安装好 node 之后，通过 npm install 命令来安装CLI工具
③安装好之后，通过执行 ding-v 来查看是否已经成功安装。

组件专属SDK

钉钉工作台提供了专属SDK供组件使用，以加强组件能力，包括：

发送请求
调试能力
组件间通信
打开应用或链接
刷新组件数据

组件专属SDK无需额外下载安装，已经集成在组件中。

三、组件开发流程

创建组件

（1）登录开发者后台
（2）在开发者后台依次单击定制服务 > 插件管理，然后单击创建插件
（3）根据实际开发情况添加插件信息，插件信息在缺失的情况下可以会出现创建情况失败，所以需要将插件信息完全填写好之后进行下一步
（4）单击提交申请
（5）插件创建成功后，可以在插件列表的操作列中设置开发者
（6）设置了开发人员后，开发人员在小程序IDE的关联应用列表中可见到此插件并进行关联
插件是定制工作台组件的载体，一个插件里可以包含多个定制工作台组件。

定制服务→插件管理→创建插件→输入信息→组件类型选择“定制组件”→创建插件
提交成功之后，可以看到刚才已经创建的插件。

开发组件

前置条件

下载并安装小程序开发工具IDE
下载并安装DingTalk Design CLI
已创建组件

项目初始化

通过 ding init 命令来启动CLI，进行组件初始化
①选择应用类型：选择插件，回车

②选择模板：定制工作台组件默认模板，回车

③选择熟悉的开发语言

④克隆模板到本地
⑤提示模板复制成功，说明本地的初始化已经完成

开发组件IDE

（1）打开小程序开发者IDE ，单击右上角的打开项目。在打开本地项目页面，选择已下载的自定义脚手架文件，项目类型选择钉钉工作台插件。
（2）选择关联的小程序插件应用。
（3）打开项目工程后，找到plugin/components文件中，可以看到所有组件都在plugin/components路径下，在此路径下已有的示例组件可作参考。你可以修改plugin/components和plugin.json这两个文件下的内容。
建议通过复制plugin/components/component- template来快速创建组件模板，在模板代码基础上添加自己的组件代码。

开发组件CLI

①通过 ding dev 来启动开发

②通过updateConfig miniAppId 5000xx 及 updateConfig token xxx 来绑定对应的小程序插件，updateConfig miniAppId 5000xx 可以在插件管理列表的红框位置看到。

③本地开发的时候也可以通过输入 IDE 来启动小程序 IDE light 版。

④开发完成后，可以通过 lint 命令来对组件开发代码进行校验，最后会输入成校验报告，校验完成之后才会进行上架审核。

组件配置

完成组件开发之后，上传组件后，在本地可以更新 config 文件对应的属性名称来完善组件的配置，组件名称及对应说明如下图

设计器调试

配置完成之后，就可以在设计器中对组件进行调试。

调试前提条件
- 开发中的版本，代码已经使用DingTalk Design CLI完成本地校验。
- 插件已在小程序IDE中/CLI 中上传过版本。
注意事项
- 无论是在开发者设计器中，还是正式的定制工作台设计器中，每次上传新的组件版本后，都需要在设计器里把组件删除后，再重新拖入配置一遍，才能拉到最新的配置。
- 钉钉5.0.6以上的版本才支持插件，可能需要用户升级钉钉版本才能看到插件，在不支持插件的钉钉版本上，会有提示窗提示用户升级到钉钉最新版本。
操作流程
- 登录开发者后台。
- 在顶部菜单栏，依次选择定制服务 > 插件管理，最后单击版本管理。
- 在版本管理页面，单击去设计器调试。
- 从开发者设计器左侧自定义组件列表中找到正在开发中的组件，拖入右侧自定义工作台中。
- 单击右上角预览，预览工作台。
- 验证完成后，即可将定稿的版本在插件管理列表中提交审核，审核通过后即可发布。

发布组件

在版本管理页面，单击提交上架发起上架审批。

提交申请后，插件状态变为上架审批中。
插件将在1分钟内完成自动审核，并将审核结果同步到插件状态面板上，以及通过钉钉小秘书同步给开发者。

审核通过后，插件状态变为已上架时，单击提交发布。
提交发布后，插件状态变为灰度发布中。单击设置灰度，设置灰度范围。
通过灰度测试后，单击全量发布完成组件上线。

四、组件数据源开发

数据源归属于服务商企业，工作台和模板上的组件配置的数据源直接指向服务商企业数据源。因此数据源的任何变更会实时影响到所有组件的调用，需要谨慎修改。
在模板生成工作台和定制工作台时，系统会将模板或定制工作台里用到的服务商企业的数据源，自动授权给客户企业访问。
注册后的数据源，可以在服务商视角的设计器的数据源选择器中选择使用。也可以在 config.json中的dataSources字段中使用。

创建数据源

操作流程：
- 登录开发者后台。
- 然后依次单击定制服务 > 数据源管理 > 新建数据源。
- 在弹出的新建数据源页面中填写数据源基本信息。
- 数据源注册完成后，单击测试，测试数据源。
- 注册后的数据源，可以在服务商视角的设计器的数据源选择器中选到。也可以在config.json中的 dataSources字段中使用。
- 通过灰度测试后，单击全量发布完成组件上线。
字段说明
- apiKey：apiKey是这个数据源的唯一标识，可自定义，由英文大小写组成，作为系统中对数据源的唯一识别码。例如：组件中需要用到一个数据源，那么在config.json的配置信息中需要用到apiKey。
- apiSecret：apiSecret可以填写你和服务端同学约定的任意值，作为签名密钥，在获取用户身份时，供服务端接口识别这是来自钉钉的请求。
- 参数：请输入接口的所有参数名，多个参数名以英文逗号分隔，例如param1,param2。
- 无需设置userid和corpid参数，接口可以自动解析得到。

获取用户身份

钉钉目前只支持通过服务端获取用户身份，如果前端需要获取到用户身份，可以通过props.config.corpId获取到当前用户所在的企业的corpId，然后发请求到服务端获取用户信息。

官方组件数据格式

目前官方组件中，只有资讯组件支持自定义数据源，只要数据源对应的接口返回的数据结构如下，就能在资讯组件中展示出内容。

返回的数据结构请保证字段的完整性，如果没有值可以是空字符串。
返回内容的格式是JSON结构，不是一个字符串。
图片太大会导致工作台黑屏，图片大小需要在100K以内，像素建议在2000*2000以内。

五、组件稳定性保障

官方对组件提供监控和告警的平台。用户通过组件监控可以有效的了解钉钉组件各项指标运行情况，及时接收关键指标告警。包括 js 异常、API 请求异常、插件加载异常等等。

可以在插件管理中，插件中心，插件大盘，可以看到每一个组件都有一个监控中心，有告警群二维码以及可以查看对应的监控大盘，查询对应的监控指标等。

DingTalk「开发者说」从0到1教你自定义工作台组件开发

目录