分享人：单丹，钉钉工作台平台开放技术负责人

视频地址：一键回看

目录

一、关于钉钉工作台
二、自定义工作台
三、设计器的能力和组件类型
四、自定义工作台案例
五、Q&A

一、关于钉钉工作台

工作台简介

钉钉工作台作为企业数字化的门户，是组织用于提升管理效率、实现业务在线的平台。 钉钉工作台致力于打造极致体验、服务精准、管理可控的一站式工作台。

• 组织规模：钉钉工作台按照组织规模划分为：中小微、行业和大客户；

• 产品类型：工作台的产品类型主要有角色工作台、行业工作台和自定义工作台。针对不同类型工作台有不同的产品，如：

  • 角色工作台：提供了业财一体化、人事一体化、IT工作台、OA一体化等按角色划分的解决方案；
  • 行业工作台：根据不同行业特点提供工作台模板进行行业初始化，目前涵盖的行业包括：数字县域、数字社区、教育、法院、连锁经营店、新零售等；
  • 自定义工作台：提供了搭建自定义工作台的物料，包括：官方组件、三方组件、自建组件、数据源、设计器、开发工具等等。
• 运营策略：角色工作台和行业工作台主要是线索转化和商机的撮合；针对自定义工作台钉钉/行业线/专属钉/专业钉，则进行权益打包，同时与服务商进行生态合作，为组织开发自定义工作台。
• 产品角色：使用工作台的人员主要是员工、管理员、平台方的运营人员，在增加了行业工作台和自定义工作台以后，设计师和开发者也加入到工作台角色中。

角色/行业工作台

角色工作台

• 角色工作台是基于不同角色提供开箱即用的解决方案。其初始化方式是在创建组织时，根据新建组织问卷进行初始化。
  
• 角色工作台也有灵活丰富的管理能力，管理员在工作台页面点击“＋”进入工作台管理页面，进行各个角色工作台设置和管理。
  
• 角色工作台在未来将开放员工工作台，员工可以将自己经常使用的应用放到员工工作台上，实现更便捷的使用体验。

行业工作台

• 行业工作台是基于不同行业提供千行千面模板，根据行业模板进行工作台页面初始化。
  
• 与角色工作台一样，行业工作台的管理员也可以对各行业工作台进行灵活管理。
• 行业工作台未来将开放行业模板。目前工作台上的模板，是钉钉与行业合作提供的官方模板，未来将向第三方生态开放，让生态也可以开发行业模板并提供给行业组织使用。

二、自定义工作台

定位

自定义工作台可以助力企业品牌建设，定制化企业业务场景，以实现千企千面。

• 数据来源

  • 通过工作台设计器直接搭建；
  • 通过工作台设计器搭建模板，然后再进行分发；
  • 在移动端有灵活的管理能力，可以进行编辑和设置；

• 未来面向市场

  • 组件市场：自定义工作台页面主要以组件为单位，围绕组件进行定制化，因此在未来计划开放组件市场，以实现单组件价值最大化；
  • 模板市场：目前的自定义工作台模板只能为自己的组织使用，在未来开放模板市场以后，组织的模板也可以提供给其他组织使用，实现单模板价值最大化。

自定义工作台的平台能力

自定义工作台主要围绕开发、搭建、使用三个阶段，闭环支撑平台能力。

• 开发
  发阶段提供自建组件的接入能力，自建组件主要是保障服务商和开发者在垂直领域的竞争优势，提供开发接入链路、开放工具、开放文档和开放服务。
• 搭建
  在搭建阶段，平台提供统一的组件物料和搭建平台，包括：官方组件、自建组件、第三方应用组件、模板分发管理。同时还提供了定制化能力，以及一些基础能力。如一码多端，开发一套组件既可以在PC端工作台使用也可以在移动端使用；还支持多种类型工作台，比如行业版工作台、自定义工作台都可以使用同一套组件。
• 使用
  在使用层面，工作台有统一的基座，即PC端和移动端的基座都是统一由平台提供，保障基座的稳定性及性能。同时，平台会针对基座的稳定性和性能进行实时优化，开发者只需要关注组件的稳定性，平台为每一个组件提供稳定性监控大盘，开发者通过监控大盘中的异常上报对稳定性进行监控。

三、设计器的能力和组件类型

工作台设计器

工作台设计器主要分成四部分：

• ① 页面及发布管理区
  页面及发布管理区左侧是新建页面和页面排序，每个自定义工作台可以包含多个页面，每个页面可以根据人、部门或角色进行权限设置；区域右侧是发布管理区，包括预览机型选型、预览、保存及发布；
• ② 工作台组件集合区
  包括官方组件、自建组件和三方应用组件；
• ③ 设计预览区
• ④ 属性编辑区域
  包括页面属性编辑，组件属性编辑，编辑内容实时生效，并在中间预览区呈现。

设计器的组件

设计器组件分为：官方组件、自建组件和第三方企业应用组件。

• 官方组件
  由平台提供，开发者在设计器中通过拖拉拽的形式直接使用；
• 自建组件
  组织自主开发的用于自定义工作台的组件，实现更定制化的需求，只有当前组织可见；
• 第三方企业应用组件
  和第三方企业应用关联组件，在工作台上实现应用浅透出，即组织安装三方应用后才可见。

工作台官方组件

工作台官方组件无需开发，可在设计器中直接配置使用。常见的工作台官方组件包括：
搜索组件：可搜索组件和应用；

• Banner轮播组件：可自定义设置，也可配置为钉钉公告；
• 公告组件：实时展示公告应用中的公告，与钉钉公告打通；
• 宫格组件：支持1到5宫格及左1右2/左2右1等多种布局和多种跳转配置；
• Tab容器组件：支持更灵活多变的页面布局，按需要分类；
• 应用列表组件：可灵活配置多种属性，包括：图片、文字、颜色，等；
• 资讯组件：支持多种灵活布局和多种数据来源；

第三方企业应用组件

第三方企业应用组件是与三方企业应用相关联的组件。

• 需安装应用后方可使用；
• 和角色工作台是同一套组件；
• 在设计器中可直接使用，在PC端也可以正常展示；
• 一次性开发，多工作台复用。

工作台搭建

以一个正在开发中的项目为例，工作台搭建的具体步骤如下：

1. 新建页面

   • 进入设计器，点击新建页面
     
   • 填写新建页面信息，再点击新建；
     
   • 在预览区会看到新建的页面，页面默认有轮播图和其它应用两部分；
     
   • 如需添加轮播图，点击Banner图并在右侧Banner轮播属性中点击添加一项，然后设置图片链接；
     
   • 点击Banner图，在右侧栏中进行Banner轮播属性设置；
     

2. 添加组件：
   将需要添加的组件从左边的组件区拖拽到预览区适当的位置；

   • 添加搜索组件；
     
   • 添加应用列表组件；
     
   • 点击预览中的应用列表，在右侧的应用列表属性中点击添加应用，在应用列表中选择所需应用并点击确认;
     
   • 新添加的应用可以在右侧的属性中进行编辑和排序，所有修改都会在预览区实时生效；
     
   • 添加宫格组件，并在右侧宫格属性中进行编辑；
     
   • 宫格数据配置，在右侧数据配置中选择需要配置的宫格并点击编辑，配置好后点击确认；
     
   • 添加资讯卡片，并在右侧资讯卡片属性栏中配置属性；
     
   • 资讯卡片的数据配置，在右侧属性栏中点击数据配置，并配置相应内容；
     
   • 页面基本内容搭建完成，点击保存；
     

3. 预览

   • 切换多种移动端机型查看预览效果并进行微调；
     
   • 查看移动预览效果；
     
     

以上，完成工作台0码搭建。

组件的开发

针对有个性化定制工作台需求的组织，平台提供了开发自建组件的基础能力和支撑能力。

• 基础能力
  包括网关数据源、权限分层、API token、OAPI、WS、一码多端、啄木鸟监控等；

• 开发者支撑能力

  • 开放工具：CLI工具、物料库、IDE集成开发环境、稳定性建设等；
  • 开放文档：工作台/组件开发文档、解决方案接入文档及工具使用说明等；
  • 开放服务/机制：技术支持、培训、运营策略等；

• 生产链路支撑
  创建、开发/调试、上架、发布及运维全链路支撑；
  对于开发者来说，平台主要提供提效工具和稳定性能力：

  • 平台提效工具

    • CLI集成工作流；
    • 模板脚手架；
    • 真机调试；
    • 代码自动审核；
    • 一码多端；

  • 平台稳定性能力

    • 插件监控；
    • 告警群；
    • 日志上报；

组件的开发流程

1. 开发准备
   成为钉钉开发者，并获取自定义工作台开发权益；

2. 开发流程
   

   1. 创建：在开发者后台创建插件；
   2. 本地开发：推荐使用DingTalk Design CLI工具；
   3. 线上调试：在开发后台提供去设计器调试的能力，进行组件配置和预览；
   4. 上架审核：针对自建组件是自动审核，第三方应用组件需要平台方进行人工产品验收；
   5. 发布；

3. 开发约束

   • 不能使用小程序JSAPI，平台提供了SDK给组件使用；
   • 不能使用SETINTERVAL方法、WEBVIEW组件；
   • 不能包含图片资源，可使用图片链接，图片大小限制100K；
   • 每个插件包大小1M内，包含组件数量不超过10个。

操作演示：组件开发

初始化项目

• 安装DingTalk Design CLI之后，使用以下命令进行初始化：
  ding init
  

• 选择工作台组件类型、模板及开发语言；
  

  • 应用类型：选择自定义组件；
  • 模板：选择default；

  • 开发语言：选择JavaScript；

    • 在项目初始化的同时可以进行创建插件，进入开发者后台-定制管理-插件管理-创建插件；
      
    • 写插件名称、描述、功能；视觉设计稿建议上传真实图稿；组件类型如果是定制工作台组件选择定制组件，三方应用工作台组件则选择通用组件；填好后点击创建插件，并确认提交；
      
    • 插件创建成功后可以在列表中查看，对插件的操作有：版本管理、设置开发者、编辑以及监控中心，MiniAppID会在本地开发中使用；
      

开发工作台组件；

• 命令：ding dev
  可以使用的子命令：updateconfig, lint, ide, qrcode, upload, createPluginComponent;
  
  updateConfig：配置miniAppId和token，miniAppId在创建插件页面，token在开发者后台右边用户信息中；
  
  updateConfig miniAppId <字段>
  updateConfig token <字段>
  

本地代码编辑

1. 打开项目工程，找到src/plugin/components文件，所有组件都在components文件中；

2. 打开plugin/component/chart文件，其中Config.json文件是组件在定制工作台设计器上的描述文件；
   修改以下配置：

   • corpId：复制粘贴CorpId
     
   • icon: 设计器中组件列表区显示的图标，确保图标地址可访问；
   • previewUrl: 设计器里展示时用到的静态图片地址，用于在设计器预览区中静态图片占位；
   • previewHeight：图片高度；
   • setters：设计器需要用到的自定义配置属性，下图红色框就是根据setters产生的属性面板界面；

   钉钉官方平台提供了8种setterName；
   

预览

• 打开小程序模拟器，选择关联应用名称；
  
• 小程序预览效果：
  

• 假设需要在设计器中修改“我的图表”的颜色，钉钉官方提供了相应的代码：

  {
    "propName": "color",
    "setterName": "ColorSetter",
    "props": {
        "label": "颜色选择器"
  }

• 将代码添加到config.json文件中，修改propName名称，并为这个propName设置默认值；
  

  注意：在setters中，每个setter在props里都必须要有对应的默认值，config.json文件中定义的props可以从componentProps中获取；

• 设置完成后进行上传，上传完成进入开发者后台定制服务-插件管理-版本管理，在版本管理页面点击“去设计器调试”；
  
• 在开发者设计器左侧自定义组件列表中，找到正在开发中的组件，拖入中间的自定义工作台预览区，可以看到右侧的属性中的颜色选择器；
  
• 更改颜色后在移动端模拟器中显示；
  

提交上架

组件完成调试后即可提交上架，至此完成组件开发。

四、自定义工作台案例

钉钉自定义工作台的案例已覆盖众多行业和平台，诸如：政务协同平台、信息产业园区、新零售、消防救援、税务等各个行业，平台提供了组件和工作台开放的能力，让自定义工作台拥有更丰富的定制化能力，打造更好的工作台体验。

更多工作台开发文档可以通过以下渠道获取：

五、Q&A

Q：工作台一经启用是否还可以恢复成默认工作台？
A：开发者在设计器中搭建自定义工作台，工作台提交后组织（客户）的管理员将收到工作台验收通知，验收无误后管理员会将工作台发布到组织平台，这时工作台才在线生效，组织管理员可以在组织工作台管理后台将已发布的自定义工作台恢复成默认工作台。
管理员操作路径： https://open-dev.dingtalk.com/fe/app#/corp/list-bench

Q：如何删除不用的插件和组件？
A：如果是已经上架的插件是不允许删除的。在开发中的插件只需要在代码中将不需要的组件删除并重新提交插件，新版本的插件中就不存在已删除的组件了。

Q：自定义工作台开发的组件之间可以通信吗？
A：可以的。自定义工作台的SDK提供了组件之间通信的解决方案，大家可以在工作台开放文档中查看。
文档链接：https://open.dingtalk.com/document/dashboard/oe6xrp

Q：三方应用组件如何设置卡片样式？
A：三方应用组件的规范中需要设置卡片样式，整体卡片样式以及组件标题栏无需开发者开发，可通过quick setting设置实现，开发者只需要关注卡片内容区域。
文档链接：https://open.dingtalk.com/document/dashboard/development-specifications

Q：第一次提交版本时，配置中删除某个组件会被提示与之前组件数量不符合，但还未上架，是什么原因？
A：如果组件的历史版本从未上架过，是可以删除组件的，在本地开发环境中删除组件后再重新提交版本即可。
如果提示不能删除，确认下是否组件历史版本有上架操作过。

Q：发布应用到钉钉工作台需要调用哪个API？
A：如果是自建应用，在发布时自建应用会直接被安装到工作台，无需手动调用API；如果是第三方企业应用，发布提交后会被放到应用市场中，组织管理员在应用市场中搜索到这个应用并安装到自己的组织，在设置权限内的员工就可以在工作台上看到并使用该应用，无需调用API发布到工作台；针对自定义工作台，生成一个应用列表并编辑列表中的应用，就可以将应用发布到工作台。

Q：是否可以调用Web接口？
A：目前自定义工作台自建组件的开发不可以直接调用Web接口，可以通过工作台提供的SDK实现Web接口的调用。

• SDK文档：https://open.dingtalk.com/document/dashboard/lw6y3w
• 数据源文档：https://open.dingtalk.com/document/dashboard/xwgzq2

Q：自定义工作台组件中的“其它应用”组件如何隐藏？
A：如果当前组织的工作台上可见的应用，没有在其它任何应用列表组件中，这个应用则会归入其它应用组件。如果需要在自定义工作台上隐藏其它应用，可以在自定义工作台设计器右侧对其它应用进行删除，需要的时候再从左侧的组件中恢复。

Q：高级版工作台与定制工作台的区别？
A：高级版工作台与定制工作台是工作台的两种规格，它们的主要区别是定制工作台支持自建组件和自建数据源，而高级版工作台不支持，试用期和组织人数限制也有差异。未来，两种规格会逐渐趋于统一，二者之间的差异也会消除。
详情参见：https://open.dingtalk.com/document/dashboard/custom-console