钉钉程序开发教程（一小时开发钉钉工作台自定义组件）

已经申请了自定义工作台，但是官方基础组件和三方组件都不满足诉求，组织又具备一定的开发能力，那钉钉工作台自定义组件将是你很好的选择。这里采用开发一个简单的自定义新闻组件来作为DEMO。由于组件开发是基于钉钉小程序，因此需要具备一定的小程序开发知识。钉钉小程序基础教程如文档所示：https://developers.dingtalk.com/document/app/introduction-to-dingtalk-mini-programs

基础概念介绍

概念	介绍
自定义工作台	钉钉最中间的TAB，默认是钉钉官方提供的标准工作台，申请权限后可以获得自定义工作台权限，自定义工作台是组织管理员登录开发者后台采用是设计器配置生效后生成
工作台页面	自定义工作台可以包含若干个页面，可以选择一个页面作为当前首页加载的页面
组件	工作台元素组成的最小单位，一个组件包含了运行一个业务逻辑的最小小程序单元
插件	一组组件的集合，至少包含一个组件。
数据源	组件内运行所需要的外部数据源，默认仅支持HTTP数据源

一、创建自定义插件

钉钉程序开发教程（一小时开发钉钉工作台自定义组件）(1)

登录开发者后台，选择右边导航的【工作台】-【插件管理】-【创建插件】。选择”定制组件“后点击”创建插件“。

二、注册数据源

钉钉程序开发教程（一小时开发钉钉工作台自定义组件）(2)

由于新闻组件需要使用到服务端的HTTP接口，因此需要提前注册一个HTTP接口。数据源比较简单，就是HTTP返回一个JSON请求，请求包含字段title和对应的内容。

钉钉程序开发教程（一小时开发钉钉工作台自定义组件）(3)

完成上述数据源的创建并保存，后面IDE开发组件将会用到上述的数据源，注意apiKey和apiSecret都是自定义约定的值，需要填充到组件代码中。

三、IDE开发组件

完成上面的设置后，下载IDE开发工具，扫码登录后，关联组织内的插件。IDE会自动下载DEMO工程并跟远端进行关联。使用IDE进行本地开发，本DEMO就是开发一个组件，内容是加载远端的HTTP接口，并且把数据显示在工作台上。

开发成功的截图如下所示：

钉钉程序开发教程（一小时开发钉钉工作台自定义组件）(4)

核心小程序代码如下：

//这里是获取远程数据 const data = await getSdk().request(this.props.componentProps.news_for_test,{},{ // sdk.request的第三个参数，输入注册数据源的信息 url: 'http://www.javaer.com.cn/news/news.php', apiKey: 'news_for_test', httpMethod: 'GET', params:"", apiSecret: 'news_for_test', }); console.log(data); //渲染本地页面 this.setData({title:data.title})

<view class="component-template"> 新闻标题：{{title}} </view>

注意在对应模块的config.json中注册好数据源：

"dataSources": [{ "apiKey": "news_for_test", "propName": "news_for_test" }]

四、上传组件并提交审批

组件开发并验证完成后，即可提交审批，自定义组件审批后自动通过，通过后即可上架，上架后即可在设计器里看到组件，可以把组件拖拽到设计器内，生效到工作台，用户即可看到效果。

钉钉程序开发教程（一小时开发钉钉工作台自定义组件）(5)