钉钉工作台从了解价值到学会开发.pdf

封面页（待分享）卷首语 钉钉工作台不仅集成了考勤、审批、日志、视频会议等钉钉官方工具，还提供了丰富的第三方应用供企业选择，同时还能支持企业通过 API 接入自建应用。钉钉工作台分为标准工作台和自定义工作台，标准工作台面向中小企业，针对不同行业角色，打造普惠、规模化覆盖的工作台，实现即开即用；自定义工作台面向没有门户或已有门户且希望快速与钉钉集成的企业，通过钉钉提供的低代码设计器，简单的托拉拽即可快速搭建属于企业自己的工作台。本册电子书将从什么是钉钉工作台为开篇，带你从了解钉钉工作台到学会开发工作台全方位讲解。同钉钉一起，以“数字化”为业务思想，打造服务匹配精准、管理灵活可控、使用简单高效的一站式组织工作台。目录 第一章：业务数字化转型第一门户.5 一、什么是钉钉工作台.5 二、自定义工作台的优势与价值.7 三、自定义工作台的场景与案例.9 四、自定义工作台能力.12 第二章：如何打造企业自己的工作台.14 一、自定义工作台的定位.14 二、自定义能力 1：设计器搭建.15 三、自定义能力 2：底座开放 H5.20 四、5 分钟搭建一个自定义工作台.22 五、演示搭建.23 第三章：自定义工作台组件开发.31 一、组件开发介绍.31 二、组件开发工具.32 三、组件开发流程.34 四、组件数据源开发.43 五、组件稳定性保障.46 第四章：自定义 H5 工作台.47 一、5 个工作台定义.47 二、如何替换一个 H5 工作台.48 三、总结.52 四、实操演练.52 第五章：常见 Q&A.57 第一章：业务数字化转型第一门户 5 第一章：业务数字化转型第一门户一、什么是钉钉工作台 钉钉工作台，在移动端是手机中间的一个 tab，在 pc 端是第三个 tab。从工作台来讲，可以分为两类：标准工作台和自定义工作台。1.标准工作台1)定义标准工作台：给中小企业提供即开即用的工作台版本，很多企业及用户在第一次接触到钉钉时，使用的都是标准工作台。针对不同行业、不同角色，打造普惠、规模化覆盖的工作台，实现用户的即开即用。2)使用在工作台布局上分成了几个部分：第一部分是公告部分：很多企业组织信息的上传下达，包括企业文化的内容，都没有一个很好的“阵地”去承载，特别是面向数字化进程，很多企业对于信息的宣传还依赖于宣传栏。其实在标准工作台当中，已经给组织中关键角色的人员准备了公告这个功能，通过这个功能可以很快的把想要传递的信息通过图片、链接、通知文字等，非常高效的完成信息的上传下达。第二部分是应用部分：这一部分用户使用较多，包括钉钉官方提供的产品，如考勤打卡、OA 审批、智能财务等应用。钉钉也在联合服务商，在行业领域方面提供更多、更深层次的应用，如制造业当中的生产管理等。PC 端及移动端都有此模块。钉钉希望提供即开即用的能力，所以组织当中的管理员也可以通过管理，去调整使用的模块，添加或删除新的应用。目前对于整个钉钉用户群，使用最多的还是标准工作台。第一章：业务数字化转型第一门户 6 2.设计器-自定义工作台1)定义设计器自定义，钉钉提供强大的低代码设计器，让企业用户通过简单托拉拽即可定制移动端工作台，目前也正在做 pc 端的建设，很快就可以看到两端对齐后的自定义设计器。2)使用有自定义的、个性化的或门户定义的诉求，但是在研发或内容储备上还不太强的企业，可以通过设计器自定义很快的去打造出自己企业的版本。3.H5 自定义工作台1)定义H5 自定义工作台，更多的面向中大型企业，包括阿里巴巴及阿里巴巴下自有单元。这些企业目前大多数已有门户，此时为了降低企业升级自定义的成本，同时首先利用好这些企业线下已有的 H5 门户能力，所以底座全开放，移动和桌面端均支持将工作台导航直接内嵌 H5 门户地址，目前仅开放给钉钉专属版+专有版客户。第一章：业务数字化转型第一门户 7 下面是适用于不同企业规模工作台的示例。二、自定义工作台的优势与价值 1.组织业务数字化痛点 1)企业组织文化运营无高效载体 特别是目前智能手机普及的情况下，企业的员工很难再去适应去宣传栏、小黑板去汲取信息。如果没有类似钉钉这样的门户，确实没有一个很好的信息传递的载体。2)组织业务流程工具分散，多端跳转 目前很多企业业务复杂，如果是一些小企业，用标准工作台即开即用就可以实现此功能，而对于中大型企业来讲，业务相对复杂，企业经营会有非常多的流程交织，存在多端跳转的问题。3)应用数据权限管理和使用效率难平衡 企业复杂，人员的录转调离总会涉及到应用和数据权限管理的问题，以及此问题怎么和员工使用这些应用去做平衡的问题。举个例子，如何让这个企业的员工在离职的那一刻开始，就不能再登录到企业的应用，去修改数据，或避免一些风险问题。第一章：业务数字化转型第一门户 8 4)组织信息上传下达方式传统，效率低 目前任何一个面向未来的高效组织，都需要做到组织信息的上传下达，而不是信息一层一层的传递，从而导致信息衰减。基于以上痛点，钉钉工作台想要达成服务精准匹配，也就是说把用户最需要的功能能力给到用户，同时达到管理灵活可控。2.自定义工作台价值 1)决策者 决策者通常都是企业内关键角色。此类人群希望打造能宣导企业文化、提高员工效率、降本增效的一站式组织工作台。提供给此类人群一个企业文化发运营的阵地，让其可以及时的发布一些想让员工迅速看到的内容，同时通过自定义工作台能力去集成企业的业务流程，快速的让企业员工在门户上找到自己的应用进而开展工作。第一章：业务数字化转型第一门户 9 2)管理者为企业工作台负责的管理者来讲，既要去实现组织应用和文化打造的门户，同时需要上下沟通。管理者一定会关心员工在使用门户时在使用哪些应用，哪些应用好。这些数据会被提供给工作台管理者。管理者可以通过这样的数据，把使用者的反馈和决策者的目的结合起来。通过整合组织应用和文化打造专属门户，实现向上有交代，向下有口碑。3)使用者针对于使用者，员工诉求简单，希望能够快速的找到应用，节约时间。同时员工可以把其当作自己的阵地去使用。目前在新的钉钉标准工作台版本中，除了满足管理者的需要，也对员工提供了一个常用 tab 的编辑。后台也支持多态的能力，让不同的用户看到千人千面的工作台。解决找应用、用应用的便利性问题，满足角色、员工的个性化使用诉求。三、自定义工作台的场景与案例 1.县域：传统办公方式升级，全面组织在线这个案例为一个县域组织，之前存在的非常大的问题是很多的业务办公流程为纸质化办公，随着时代发展，有非常强烈的组织数字化的诉求，同时需要有一个阵地去转化区域的文化信息，同时能够把在线化的流程集成到一个业务模块，让不同的员工能够找到自己的应用，快速的去完成自己的工作。首先打造了专属化的 logo，能够渗透自己的企业文化，需要完成底层设计；组织可以根据自己需求的特性去分层，如根据政务需求分层分类，有层次的让用户更高效的使用，还可以把待办收藏等需要员工重点关注的内容也可以在工作台当中重点突出，提高效率。第一章：业务数字化转型第一门户 10 根据政务需求分层分类，仅两三个月时间就完成了全县全面组织在线的数字化基建工作；满足了政府深层次的办公需求，提高工作人员的工作效率和使用频率。2.连锁酒店：整合企业应用至统一门户，提升办公管理效率 钉钉提供的 API 可以通过自定义工作台整合企业内部应用；同时很多企业应用都存在权限管控（登陆时都需要输入账号密码），分配权限会消耗太多精力。钉钉可以快速分配权限，如某一个应用只能由某一个特定的部门去打开，登录体系可以和钉钉认证体系打通，大大提高了效率。第一章：业务数字化转型第一门户 11 通过钉钉提供的 API 接口整合企业内部各个系统应用，无需登录 PC 端，就能在统一办公入口处理工作，内部信息传递速度提高了一倍。CEO 陈总称赞：“钉钉解决了公司的管理难题，是非常棒的企业级移动办公产品！”3.消防支队：打造团队专属门户，强化文化建设 消防组织内部其实有很多流程需要消防员花费大量的工作时间去完成，而且流程与常见企业流程不同，比如车辆管理，喝酒报备等。之前此类流程都是纸质化办公，非常低效。这个案例使流程在线化以后，还需要非常明确的门户去让消防员快速使用，节省时间到更重要的事情上。自定义工作台可以通过一些三方的功能直接把数据呈现出来，此处因为数据敏感问题，不做展示。通过钉钉打造了专属消防门户，不仅实现了支队和大队千人千面、信息一触即达，让协同更高效，还成功加强了队伍文化建设，凝聚了团队的向心力。第一章：业务数字化转型第一门户 12 四、自定义工作台能力 1.支持基于组件和应用图标，以及分组能力灵活编排门户 在页面上可以看到，工作台上既可以集成应用图标放置进入应用，也可以支持组件形态。应用入口也可以按照需求进行重点 highlight 或者是一般展示。非常灵活多变。2.支持页面级和组件级别的权限管理能力 也就是说，可以为企业打造多个工作台页面，基于不同的企业诉求给到不同的员工不同的权限，且这些权限都为页面级或组件级别。例如像“咨询头条”组件，可以设置部分人看到。3.支持移动端和桌面端多端管理能力 移动端目前大家已经可以体验，后续会逐渐上新 PC 端的使用。第一章：业务数字化转型第一门户 13 4.数十款基础官方组件和数百款三方生态应用组件 钉钉有很多如考勤、OA 审批等官方应用，这些应用可以率先开始提供更细的组件，如一键打卡、一件审批等。用户目前已经可以在自定义工作台的看到这些组件，同时钉钉还有很多服务商去开发一些领域级别的服务，供用户去做选择。5.提供全码、低码和 0 代码自建组件开发能力 也就是说，用户可以基于自身诉求，通过 0 代码的拖拉拽、低代码的开发或自建组件的能力，把企业自己的应用通过重新开发组件的形式放置到工作台上。第二章：如何打造企业自己的工作台 14 第二章：如何打造企业自己的工作台 一、自定义工作台的定位 目前面向中小、中大以及超大企业，提供了三大能力：针对中小企业：以密集型行业和角色特征，初始化了即开即用的模板化工作台，以便客户可以高效方便的使用工作台。面向中大企业：支持自建或委托定制服务商，基于设计器低门槛搭建一个企业自己的个性化门户。第二章：如何打造企业自己的工作台 15 针对超大企业：底座化完全开放，支持企业替换已有的 H5 地址放在钉钉导航栏。总体来说，可以分为两种类型：标准工作台（面向中小企业的即开即用的门户）自定义工作台（为中大、超大企业提供自定义能力）二、自定义能力 1：设计器搭建 1.应用场景 第二章：如何打造企业自己的工作台 16 目前中大客户定制专属门户时，提供统一的办公入口，以及支持把企业已有的各种业务系统统一集成到一个门户页面内，帮助客户去打造一个自己的文化阵地，以及千人千面能力。2.产品能力 1)定制 支持客户定制自己的门户页面。客户可以基于开发能力，自建一个定制的页面，同时也可以委托一个定制的服务商去帮助定制专属门户。支持多端定制，目前移动端定制已成熟，PC 端定制会在稍后面客。分层能力，提供页面级、组件级以及应用级别的定制能力。定制完页面之后，可以沉淀为模板进行分发。2)分发 可分发门户页面。可以分发给单个组织或其他上下游，或上下级集团门户。支持单个客户自建门户页面，分发给集团内部所有员工，大家可以使用定制页面。支持通过一个模板分发给多个组织，典型的场景有：教育、社区、区县，强管控的教育局组织，教育局定制一个门户页面模板后，可以分发给下辖的几百所高校，以便所有的组织看到的都是一个统一的门户页面，方便统一集成和管理。第二章：如何打造企业自己的工作台 17 分发权限支持面向全员及千人千面的分发效果，举例来说，可以支持针对销售部、行政部、财务部分发不同的自定义页面，这样每个部门看到的就是差异化的门户内容，方便更高效的处理工作内容。3)使用 使用门户。针对普通 C 端的员工以及所有的使用者。面向管理者，可以提供高效的管理能力，针对自定义工作台的门户，可以在手机端的工作台页面可以支持管理自定义工作台的名称、使用范围、门户的内容以及可见性。同时门户内的内容，如组件、应用和权限也可以在手机端的工作台页面里管理。面向普通员工，定制完工作台后发布，可以通过手机和 PC 端去找到和使用应用。4)维护 维护和管理门户。权益续费：如自定义客服权益默认是购买一年，到期之前会收到续费提醒，客户可以方便续费。试用期延长：面向中大型组织在购买自定义工作台时，会提前给到一个试用能力，试用周期为 1530 天，当试用周期结束之后，可以有试用期延长，可以继续去使用，方便在组织内部申请项目经费的时间段，方便更好的做测试试用。退回标准：如果目前自定义的工作台发现有页面的不适配或其他不可预期的问题，可以快速一键退回标准版本，继续定制页面，待再次定制好之后，可以再次进行发布。订单退款：如果有下单后发现权益规格不匹配或下单周期有错误，可以支持一键订单退款。第二章：如何打造企业自己的工作台 18 3.面向有开发能力的客户，支持企业自建工作台 1)页面管理区 支持客户新建一级、二级页面，举个例子，可以新建一个全员门户同时也可以支持在全员门户里面再定制一个二级页面如报表查看页面。2)组件区 主要分成三种类型：钉钉官方提供的标准组件（如标题、布局、应用列表等）企业自建组件（支持客户通过源代码开发）三方生态应用组件（如果客户开通或购买了这些应用之后，就自动拥有这些组件的能力，可以一键拖拽使用）。3)画布区 通过在左键的组件去拖拽一个官方或自建的组件，拖拽到预览区域，方便可视化的编辑和处理。4)属性设置区 可以基于当前自定义的门户去做样式、数据以及功能的配置。第二章：如何打造企业自己的工作台 19 5)门户发布能力 可以对当前定制的页面，做移动端的预览，点击后扫码可以预览并保存草稿，及更新发布。6)目前提供的组件有几大模块：内容配置类组件：如标题、应用列表、悬浮列表和咨询等。布局组件：tab 容器，分栏，宫格等（中间画布区中的常用应用、生产入口就是用了 tab 容器；供应商关系管理、仓库管理等这些模块是通过左侧的宫格能力去搭建的）。全局形态的组件：搜索、服务入口。应用类型的组件：像考勤打卡、待办、圈子、日志等应用，也做了业务组件，方便客户去快捷使用，让用户能够关注当前业务重要内容，提高工作效率。4.面向无开发能力的客户，支持企业委托服务商搭建工作台 1)客户本身可以发起委托给服务商。2)服务商在钉钉上通过消息方式接受到委托书，确认委托，表示委托已发成协议。3)确认好后，服务商可登录开发者后台，帮助客户搭建。4)当搭建完工之后，分发给客户，客户可以在手机端便捷的收到消息，做快捷的验收、预览及设置可见性，就可以正式的发布到手机端工作台。第二章：如何打造企业自己的工作台 20 面向行业大客户，提供行业模板批量替换工作台 像教育、区县和社区此类强管控场景，可以通过自定义工作台门户的样式内的布局应用内容及定制的组件，可以沉淀为模板批量的分发给不同的组织，目前此能力仅针对内部的运营小二去开放入口，如果有相应的专属客户或专业版客户，有此诉求，可以联系相应的 BD 小二获取此能力，目前还未开放给对外的外部客户。三、自定义能力 2：底座开放 H5 1.应用场景 很多超大客户已有门户官网，所以提供快速集成的能力，帮助客户把已有的门户及业务系统，一键集成上钉。第二章：如何打造企业自己的工作台 21 2.产品能力 1)权益 针对仅专属版客户提供，当客户购买专属钉之后会自动赠送此能力，目前在线化申请权益能力已经在发布中，预计稍后会面向客户使用。2)定制 支持定义移动端、PC 端及两端同时定制。例如客户只想定制 PC 端网页门户，可以提供仅支持 PC 端的一键定制。3)分发 目前针对客户单向分发，例如一个客户已有公司官网，可以为其提供一键官网替换服务，仅提供一键全员分发，不支持针对部分例如按组织架构/角色一键分发。预览验收和审核发布能力目前也还不具备，近期在逐步迭代。4)维护 支持客户便捷的线上一键更换 H5 工作台地址的能力。权益续费是根据专属钉绑定，当客户专属钉权益到期后，此功能仍旧生效，但是不支持后台更改及权益配置。如客户想继续使用，则需要续费专属钉。同时如果 H5 工作台在线上遇到一些不可控的问题，如加载空白或不可预期的效果，也支持后台一键退回标准版。第二章：如何打造企业自己的工作台 22 四、5 分钟搭建一个自定义工作台 1.明确定制诉求：需要明确定制的动作台主要分为哪些模块 1)宣传栏 顶部是否需要针对全员有门户宣传栏针对全员去发布重要通知、政策以及内部新出的制度规范。2)置顶应用区块 可以把员工经常使用的高频内容，一键的分发到工作台界面，方便员工快速去查看和处理。3)日常办公 日常办公经常需要使用的办公应用，需要通过应用分组能力帮助把常用门户聚合起来，方便员工找到日常高频使用的应用。4)新闻动态 员工可以便捷的查看各种新闻动态，获取组织最近的信息。第二章：如何打造企业自己的工作台 23 2.评估如何定制 是否已有门户：如果已有门户页面，可以快速的将 H5 地址去集成到工作台；若没有，可以通过搭建器或找到服务商定制。是否已经有对应预算。是否有对应的研发能力。这样帮助判断，是否需要自己搭建，还是委托服务商进行搭建，还是通过已有门户一键集成上钉。3.搭建工作台 1)找到自定义工作台入口 可以通过 OA 管理后台登录，找到工作台模块，找到自定义工作台入口，可以快速的进入到搭建的设计器中。可以在网页端敲击对应网址，如开发者后台这个门户地址，可以快速的一键进入到对应的门户地址内。2)在自定义工作台的入口内新建页面 3)进入设计器内，从左侧组件区配置对应的官方/自建组件 4)当搭建完成后，快速的在当前区域做预览验收 5)验收无误后，可以保存发布及设置对应可见性 以上是可以快速去搭建自定义工作台的能力。五、演示搭建 首先打开开发者后台，在域名输入 登录到钉钉开放平台官网，然后点击应用开发，选择企业内部开发，选择工作台管理就进入到工作台的界面。前提是需要先有用自定义工作台的权益，获取此权益的方法有三种：第二章：如何打造企业自己的工作台 24 购买专页钉，自动赠送。购买专属钉，自动赠送。通过单独购买自定义工作台权益，下单之后可享用。首先可以通过右侧，创建自定义工作台入口，点击新建门户，输入门户名称及门户描述，点击右侧按钮，点击查看详情，就进入到此项目中，点击右上角配置工作台入口，就可以进入到相应设计器当中。第二章：如何打造企业自己的工作台 25 进来之后，设计器为空页面，需要点击左上角新建页面入口，输入名称等内容，如为销售定义销售工作台，选择主页面，输入描述（可为空），缩略图建议上传门户缩略图，因为后续在 C 端工作台管理可以方便的区别是哪个门户，方便快速找到相应工作台，点击新建完成。此时中间的预览区就会默认出现自定义工作台的页面，此时为通用页面，如果不需要可以选择移除，移除后可自行拖拽想要的内容。此时可以看到左侧栏由三部分内容：官方组件、自建组件及三方组件。如果是新客户，自建组件为空，需要通过源代码去重新开发。官方组件和三方组件是一个即有能力，官方组件是 0 代码可以快速上手使用的；三方应用组件是如果公司已经购买了对应的三方生态应用，就会自动拥有这些组件能力，只需要拖拽到中间预览区域，就可以进行相应的发布和预览验收。第二章：如何打造企业自己的工作台 26 搭建好后，可以扫描预览二维码进行预览。可以看到已经定制好的门户工作台，包含了及部分内容：搜索：方便全员去搜索常用应用或组件，是必备的全局能力。Banner 图片：对应的是左侧 banner 轮播的组件，可以通过右侧的自定义可以上传对应的轮播图片。宫格能力：宫格是非常好的一个组件，方便把常用的应用通过大的区块放置在门户上，方便员工可以快速的找到常用应用。拖拽宫格后，默认为二宫格格式，可以通过修改，修改完三宫格、四宫格等。右侧同时提供上下间距、左右间距等调整。可以针对宫格配置相应素材，可以点击由此编辑宫格，可以支持为宫格配置应用、二级页（左侧通过新建页面的方式新建的二级页面）、快捷方式或纯图片（偏演示类）。第二章：如何打造企业自己的工作台 27 待办：钉钉官方的组件，可以直接从左侧拖拽，方便员工快捷的处理工作事项。报表：通过把三方应用的生态组件，一键拖拽，供对应客群去使用。应用分组：放拖拽之后，应用分组默认为空，标题默认不显示（可以改为显示），输入名称，然后就可以快速的去点击添加应用，可以一键的把对应的应用添加上来。还可以改变样式，如满栏/非满栏、应用数量、边框宽度、背景颜色、应用顺序调整等，都可以根据需要进行调整。第二章：如何打造企业自己的工作台 28 悬浮组件 日常需要重点提醒的内容，如员工服务台的组件内容，可以配置小钉机器人，有官方预制图标（也可以改变图片），可以针对员工经常询问的问题设置成一个知识库的方式放入，方便快速的回复员工常问问题。如果觉得组件不合适也可以进行一键删除。其他应用分组 如果有一些全员不经常用到的长尾应用，也可以进行设置一个其他应用的分组，组织已开通的但并未显示在上方定制分组的应用，都会展示在这个分组内。如果没有这个分组需求，同样可以一键删除。搭建完可以点击右上角预览，使用钉钉扫码去查看已经定制的门户内容，或点击右上角保存当前草稿。点击更新会有上图提醒，提醒当前的版本会进行更新发布，但并不会针对正式的全员去生效，只是更新本次保存的内容。之后可以回到工作台应用列表，可以看到是已更新待发布状态。第二章：如何打造企业自己的工作台 29 此时可以点击右上角发布按钮，点击后会唤起一个弹窗：选择人群：可以选择针对哪些人群生效（默认针对全部组织生效）。这就能够实现，当有员工入离职时，都不能影响工作台的分发。组织架构：可以选择哪些部门可以看到此工作台（如销售部可见）。按角色选择：可按照职务选择（如只允许财务可见）。外部联系人：除内部员工，外部人员也可选择。同时以上选择，支持混选模式展示。选择好之后点击一键发布，则被选择到的人员即可生效。发布完成之后，也可以时时的更改可见范围设置。第二章：如何打造企业自己的工作台 30 同时右上角还提供一键退回标准版，如果当前自定义工作台有一些不符合预期内容时，可以恢复到即开即用的标准工作台。第三章：自定义工作台组件开发 31 第三章：自定义工作台组件开发 一、组件开发介绍 一个组件有一个完整的业务功能，包含视图和逻辑。1.开发流程概览 现在本地对组件进行开发，本地开发时首先创建插件，在开发者后台创建插件完成之后，可以选择 DingTalk Design CLI 进行组件的开发，然后上传组件，也可以选择在小程序 IDE 中进行组件开发及上传。上传之后需要进行线上调试，对组件可以进行一些配置，配置完成之后可以在设计器中调试组件，当组件调试过程中发现有不符合预期的地方，可以返回本地开发重新进行开发并上传，并再次进入设计器中进行调试，直到符合预期之后。可以将组件进行提交上架，通过商家审批之后，可以将组件进行提交发布。完成灰度发布之后，就可以进入到全量发布阶段，即正式上线。2.开发约束 钉钉工作台的插件本质是小程序，钉钉工作台插件中的组件开发遵守钉钉小程序组件开发规范，同时需接受钉钉工作台插件的开发约束。只有遵守了以下开发约束，才能正式上架。在开发组件前，开发者需要完成钉钉开发者注册和激活，详情请参考成为钉钉开发者。不能在发开过程中使用钉钉小程序 JSAPI，即 dd.开头的所有方法。不能在组件中使用 setInterval。第三章：自定义工作台组件开发 32 不能在组件中使用 web-view。图片采用外链方式引入，不能在组件文件夹中直接包含图片，单张图片 size 在100k 以内，像素比在 2000*2000 以内，否则可能导致黑屏。每个插件中组件数量不超过 10 个。每个插件包的大小 1M 以内。3.自建组件可见性 客户企业只能看到服务商为其创建的工作台中使用的自建组件。例如：服务商企业有自建组件 A、B、C 三个。给客户定制的工作台里包含了组件 A、B。则客户企业管理员在设计器中编辑工作台时只能看到组件 A、B 两个。二、组件开发工具 1.IDE 开发工具 https:/ 下载链接可以通过开放平台官方网站的文档中下载链接进行下载安装，打开之后效果如图：第三章：自定义工作台组件开发 33 IDE 开发工具具有开发编辑器、应用模拟器、真机预览以及上传等功能，可以满足组件开发全生命周期的所有过程。2.DingTalk Design CLI钉钉前端应用研发命令行工具。1)功能提供小程序、H5 微应用、工作台组件的初始化能力。组件开发过程中主要关注小程序和工作台组件的本地构建、开发调试、二维码预览、校验（是否满足插件约束或代码规范）和上传等能力。提供 H5 微应用和小程序本地模拟器开发的能力。2)安装首先命令行当中输入 node-v 去检查是否已经安装了 node.js.12.15 及以上的更高版本。安装好 node 之后，通过 npm install 命令来安装 CLI 工具。安装好之后，通过执行 ding-v 来查看是否已经成功安装。第三章：自定义工作台组件开发 34 3.组件专属 SDK 钉钉工作台提供了专属 SDK 供组件使用，以加强组件能力，包括：发送请求 调试能力 组件间通信 打开应用或链接 刷新组件数据 组件专属 SDK 无需额外下载安装，已经集成在组件中。三、组件开发流程 1.创建组件 1)登录开发者后台。2)在开发者后台依次单击定制服务插件管理，然后单击创建插件。3)根据实际开发情况添加插件信息，插件信息在缺失的情况下可以会出现创建情况失败，所以需要将插件信息完全填写好之后进行下一步。4)单击提交申请。5)插件创建成功后，可以在插件列表的操作列中设置开发者。6)设置了开发人员后，开发人员在小程序 IDE 的关联应用列表中可见到此插件并进行关联。插件是定制工作台组件的载体，一个插件里可以包含多个定制工作台组件。第三章：自定义工作台组件开发 35 定制服务插件管理创建插件输入信息组件类型选择“定制组件”创建插件 提交成功之后，可以看到刚才已经创建的插件。2.开发组件 1)前置条件 下载并安装小程序开发工具 IDE 第三章：自定义工作台组件开发 36 下载并安装 DingTalk Design CLI 已创建组件 2)项目初始化 通过 ding init 命令来启动 CLI，进行组件初始化。a)选择应用类型：选择插件，回车。b)选择模板：定制工作台组件默认模板，回车。c)选择熟悉的开发语言 d)克隆模板到本地 第三章：自定义工作台组件开发 37 e)提示模板复制成功，说明本地的初始化已经完成 3.开发组件 IDE 1)打开小程序开发者 IDE，单击右上角的打开项目。在打开本地项目页面，选择已下载的自定义脚手架文件，项目类型选择钉钉工作台插件。2)选择关联的小程序插件应用。3)打开项目工程后，找到 plugin/components 文件中，可以看到所有组件都在plugin/components 路径下，在此路径下已有的示例组件可作参考。你可以修改 plugin/components 和 plugin.json 这两个文件下的内容。建议通过复制 plugin/components/component-template 来快速创建组件模板，在模板代码基础上添加自己的组件代码。第三章：自定义工作台组件开发 38 4.开发组件 CLI 1)通过 ding dev 来启动开发。2)通过 updateConfig miniAppId 5000 xx 及 updateConfig token xxx 来绑定对应的小程序插件，updateConfig miniAppId 5000 xx 可以在插件管理列表的红框位置看到。3)本地开发的时候也可以通过输入 IDE 来启动小程序 IDE light 版。第三章：自定义工作台组件开发 39 4)开发完成后，可以通过 lint 命令来对组件开发代码进行校验，最后会输入成校验报告，校验完成之后才会进行上架审核。5.组件配置 完成组件开发之后，上传组件后，在本地可以更新 config 文件对应的属性名称来完善组件的配置，组件名称及对应说明如下图：第三章：自定义工作台组件开发 40 6.设计器调试 配置完成之后，就可以在设计器中对组件进行调试。1)调试前提条件 开发中的版本，代码已经使用 DingTalk Design CLI 完成本地校验。插件已在小程序 IDE 中/CLI 中上传过版本。第三章：自定义工作台组件开发 41 2)注意事项 无论是在开发者设计器中，还是正式的定制工作台设计器中，每次上传新的组件版本后，都需要在设计器里把组件删除后，再重新拖入配置一遍，才能拉到最新的配置。钉钉 5.0.6 以上的版本才支持插件，可能需要用户升级钉钉版本才能看到插件，在不支持插件的钉钉版本上，会有提示窗提示用户升级到钉钉最新版本。3)操作流程 登录开发者后台。在顶部菜单栏，依次选择定制服务插件管理，最后单击版本管理。在版本管理页面，单击去设计器调试。从开发者设计器左侧自定义组件列表中找到正在开发中的组件，拖入右侧自定义工作台中。第三章：自定义工作台组件开发 42 单击右上角预览，预览工作台。验证完成后，即可将定稿的版本在插件管理列表中提交审核，审核通过后即可发布。7.发布组件 在版本管理页面，单击提交上架发起上架审批。提交申请后，插件状态变为上架审批中。插件将在 1 分钟内完成自动审核，并将审核结果同步到插件状态面板上，以及通过钉钉小秘书同步给开发者。第三章：自定义工作台组件开发 43 审核通过后，插件状态变为已上架时，单击提交发布。提交发布后，插件状态变为灰度发布中。单击设置灰度，设置灰度范围。通过灰度测试后，单击全量发布完成组件上线。四、组件数据源开发 数据源归属于服务商企业，工作台和模板上的组件配置的数据源直接指向服务商企业数据源。因此数据源的任何变更会实时影响到所有组件的调用，需要谨慎修改。在模板生成工作台和定制工作台时，系统会将模板或定制工作台里用到的服务商企业的数据源，自动授权给客户企业访问。注册后的数据源，可以在服务商视角的设计器的数据源选择器中选择使用。也可以在 config.json 中的 dataSources 字段中使用。1.创建数据源 1)操作流程 登录开发者后台。然后依次单击定制服务 数据源管理新建数据源。第三章：自定义工作台组件开发 44 在弹出的新建数据源页面中填写数据源基本信息。数据源注册完成后，单击测试，测试数据源。注册后的数据源，可以在服务商视角的设计器的数据源选择器中选到。也可以在 config.json 中的 dataSources 字段中使用。通过灰度测试后，单击全量发布完成组件上线。2)字段说明 apiKey：apiKey 是这个数据源的唯一标识，可自定义，由英文大小写组成，作为系统中对数据源的唯一识别码。例如：组件中需要用到一个数据源，那么在 config.json 的配置信息中需要用到apiKey。apiSecret：apiSecret 可以填写你和服务端同学约定的任意值，作为签名密钥，在获取用户身份时，供服务端接口识别这是来自钉钉的请求。第三章：自定义工作台组件开发 45 参数：请输入接口的所有参数名，多个参数名以英文逗号分隔，例如 param1，param2。无需设置 userid 和 corpid 参数，接口可以自动解析得到。2.获取用户身份 钉钉目前只支持通过服务端获取用户身份，如果前端需要获取到用户身份，可以通过 props.config.corpId 获取到当前用户所在的企业的 corpId，然后发请求到服务端获取用户信息。3.官方组件数据格式 目前官方组件中，只有资讯组件支持自定义数据源，只要数据源对应的接口返回的数据结构如下，就能在资讯组件中展示出内容。第三章：自定义工作台组件开发 46 返回的数据结构请保证字段的完整性，如果没有值可以是空字符串。返回内容的格式是 JSON 结构，不是一个字符串。图片太大会导致工作台黑屏，图片大小需要在 100K 以内，像素建议在2000*2000 以内。五、组件稳定性保障 官方对组件提供监控和告警的平台。用户通过组件监控可以有效的了解钉钉组件各项指标运行情况，及时接收关键指标告警。包括 js 异常、API 请求异常、插件加载异常等等。可以在插件管理中，插件中心，插件大盘，可以看到每一个组件都有一个监控中心，有告警群二维码以及可以查看对应的监控大盘，查询对应的监控指标等。第四章：自定义 H5 工作台 47 第四章：自定义 H5 工作台 一、5 个工作台定义 1.什么是 H5 工作台 H5 工作台是自定义工作台的一种，与依靠设计器来创建的自定义工作台相比，H5工作台是完全由用户通过 H5 自主开发的一种工作台。（图 1）（图 2）第四章：自定义 H5 工作台 48 我们可以先看一下两张图的对比，图 1 是用户通过设计器自己搭建出来的工作台，图 2 是用户自己开发的 H5 工作台，可以看到两者区别还是比较明显的。既然已经知道了什么是 H5 工作台，那么继续来研究什么样的组织适合。2.什么样的组织适合 H5 工作台 面向组织已有类似工作台的门户、希望快速与钉钉集成的企业适合 H5 工作台。如果组织没有工作台，建议使用自定义工作台来进行工作台的搭建。目前 H5 工作台仅开放给钉钉专属版客户。二、如何替换一个 H5 工作台 1.前置条件 1)需要准备好要替换的 H5 工作台链接，也就是说需要组织自己把 H5 工作台开发完，然后提供 http 的链接（如果 PC 和移动端需要展示不同的页面则需要两个链接）。2)需要有 H5 工作台的开发权限。这个开发权限，当前情况下只能通过开通专属钉获得，在开通专属钉的时候选择 H5 工作台的开发权益。2.实际操作 当准备好这两个前置条件的时候，我们就可以进入到钉钉开放平台的页面，选择“开放能力”下面的“工作台”选项。第四章：自定义 H5 工作台 49 进入工作台选项里面时，可看到右上角的“创建”按钮，点击“创建”按钮时会出现两个下拉菜单，选择下面的选项“内嵌 H5 页面”。进入创建页面需要输入对应的信息，包括工作台的名称等，这里重点是“客户端”选项，包括“桌面端（指 PC 端）”和“移动端（指手机端）”，接下来把对应地址填写到网页中。“IP 回调地址”：如果希望在自己的 H5 工作台里面调用一些钉钉提供的开放API，则需要在这里填写对应的回调地址，加入白名单就方便调用钉钉提供的开放 API。“紧急联系号码”：在 H5 工作台出问题时，方便联系和沟通。第四章：自定义 H5 工作台 50 信息提交完成之后，就可以点击“提交”，之后会自动跳转到 H5 工作台的详情页面，可以看到之前填写好的信息都会在此页面进行展示。点击右上角“发布”即可发布已经创建好的这个 H5 工作台。发布完之后，可以点击左边“工作台管理”中“生效中的页面”就可以看到已经生效的 H5 工作台信息。生效页面包含两部分，一部分是移动端，一部分是 PC 端。第四章：自定义 H5 工作台 51 在“全部项目”里可以根据工作台类型去选择，管理 H5 工作台或设计工作台，选择“H5”搭建，此时会展示当前用户创建的所有 H5 工作台的项目，可以通过点击详情进行管理，包括对应的修改、删除、发布等操作。第四章：自定义 H5 工作台 52 三、总结 对于有一定开发能力而且有现成工作台的组织而言 H5 工作台是一个很好的选择，一方面它可以帮助用户将现有的工作台迅速上钉，另一方面可以满足组织的一些特殊的个性化定制需求。通过钉钉开放平台的开发 API 还可以将钉钉的一些能力与 H5工作台相结合，进一步提升与钉钉平台的融合。下图是一个常用的开发 API。尽管有上述优势，但也需要强调的是由于 H5 工作台由用户组织自行开发和维护，因此无法享受到官方工作台级别的稳定性保障，也就是说，相对于官方工作台而言，H5 工作台的稳定性监控就没有办法做到那么细致，这一点在选择使用 H5 工作台作为组织工作台时是需要特别注意的。四、实操演练 目前显示的是一个普通工作台，是一个非常标准的工作台，接下来演示如果将此工作台替换为 H5 工作