一小時(shí)開(kāi)發(fā)釘釘工作臺(tái)自定義組件（釘釘自定義工作臺(tái)收費(fèi)么）
已經(jīng)申請(qǐng)了自定義工作臺(tái)，但是官方基礎(chǔ)組件和三方組件都不滿(mǎn)足訴求，組織又具備一定的開(kāi)發(fā)能力，那釘釘工作臺(tái)自定義組件將是你很好的選擇。這里采用開(kāi)發(fā)一個(gè)簡(jiǎn)單的自定義新聞組件來(lái)作為DEMO。由于組件開(kāi)發(fā)是基于釘釘小程序，因此需要具備一定的小程序開(kāi)發(fā)知識(shí)。釘釘小程序基礎(chǔ)教程如文檔所示：https://developers.dingtalk.com/document/app/introduction-to-dingtalk-mini-programs
基礎(chǔ)概念介紹
|
概念 | 介紹 |
自定義工作臺(tái) | 釘釘最中間的TAB，默認(rèn)是釘釘官方提供的標(biāo)準(zhǔn)工作臺(tái)，申請(qǐng)權(quán)限后可以獲得自定義工作臺(tái)權(quán)限，自定義工作臺(tái)是組織管理員登錄開(kāi)發(fā)者后臺(tái)采用是設(shè)計(jì)器配置生效后生成 |
工作臺(tái)頁(yè)面 | 自定義工作臺(tái)可以包含若干個(gè)頁(yè)面，可以選擇一個(gè)頁(yè)面作為當(dāng)前首頁(yè)加載的頁(yè)面 |
組件 | 工作臺(tái)元素組成的最小單位，一個(gè)組件包含了運(yùn)行一個(gè)業(yè)務(wù)邏輯的最小小程序單元 |
插件 | 一組組件的集合，至少包含一個(gè)組件。 |
數(shù)據(jù)源 | 組件內(nèi)運(yùn)行所需要的外部數(shù)據(jù)源，默認(rèn)僅支持HTTP數(shù)據(jù)源 |
一、創(chuàng)建自定義插件
登錄開(kāi)發(fā)者后臺(tái)，選擇右邊導(dǎo)航的【工作臺(tái)】-【插件管理】-【創(chuàng)建插件】。選擇”定制組件“后點(diǎn)擊”創(chuàng)建插件“。
二、注冊(cè)數(shù)據(jù)源
由于新聞組件需要使用到服務(wù)端的HTTP接口，因此需要提前注冊(cè)一個(gè)HTTP接口。數(shù)據(jù)源比較簡(jiǎn)單，就是HTTP返回一個(gè)JSON請(qǐng)求，請(qǐng)求包含字段title和對(duì)應(yīng)的內(nèi)容。
完成上述數(shù)據(jù)源的創(chuàng)建并保存，后面IDE開(kāi)發(fā)組件將會(huì)用到上述的數(shù)據(jù)源，注意apiKey和apiSecret都是自定義約定的值，需要填充到組件代碼中。
三、IDE開(kāi)發(fā)組件
完成上面的設(shè)置后，下載IDE開(kāi)發(fā)工具，掃碼登錄后，關(guān)聯(lián)組織內(nèi)的插件。IDE會(huì)自動(dòng)下載DEMO工程并跟遠(yuǎn)端進(jìn)行關(guān)聯(lián)。使用IDE進(jìn)行本地開(kāi)發(fā)，本DEMO就是開(kāi)發(fā)一個(gè)組件，內(nèi)容是加載遠(yuǎn)端的HTTP接口，并且把數(shù)據(jù)顯示在工作臺(tái)上。
開(kāi)發(fā)成功的截圖如下所示：
核心小程序代碼如下：
//這里是獲取遠(yuǎn)程數(shù)據(jù) const data = await getSdk().request(this.props.componentProps.news_for_test,{},{ // sdk.request的第三個(gè)參數(shù)，輸入注冊(cè)數(shù)據(jù)源的信息 url: 'http://www.javaer.com.cn/news/news.php', apiKey: 'news_for_test', httpMethod: 'GET', params:"", apiSecret: 'news_for_test', }); console.log(data); //渲染本地頁(yè)面 this.setData({title:data.title})
<view class="component-template"> 新聞標(biāo)題：{{title}}</view>
注意在對(duì)應(yīng)模塊的config.json中注冊(cè)好數(shù)據(jù)源：
"dataSources": [{ "apiKey": "news_for_test", "propName": "news_for_test" }]
四、上傳組件并提交審批
組件開(kāi)發(fā)并驗(yàn)證完成后，即可提交審批，自定義組件審批后自動(dòng)通過(guò)，通過(guò)后即可上架，上架后即可在設(shè)計(jì)器里看到組件，可以把組件拖拽到設(shè)計(jì)器內(nèi)，生效到工作臺(tái)，用戶(hù)即可看到效果。
五、實(shí)際效果
實(shí)際效果如上述所示，在工作臺(tái)上已經(jīng)可以顯示出自定義的新聞組件并生效。上面僅僅是一個(gè)簡(jiǎn)單的案例，組織可以根據(jù)自己的需要，開(kāi)發(fā)出各式各樣符合自身需要的工作臺(tái)，只要具備開(kāi)發(fā)能力，基本上可以完全做到組織任意想要的視覺(jué)效果。
更多自定義組件開(kāi)發(fā)介紹可以參考：https://developers.dingtalk.com/document/dashboard/dashboard-component-develop-overview
