如果你想开发文档酷应用相关功能,可依据文档操作步骤进行开发。
文档酷应用由脚本服务页面和 UI页面两部分组成,你可通过编写脚本服务页面实现对文档的读写操作,通过编写UI页面实现在钉钉文档中展示可交互的自定义UI界面。
说明
DingTalk Design CLI 提供以下能力:
npm install dingtalk-design-cli@1.0.10 -g
# OR
yarn global add dingtalk-design-cli@1.0.10
ding init -o dingtalk-docs-cool-app-demo
选择应用类型,需选择「文档酷应用」。
选择模板类型为default
。
选择开发语言为javascript
。
进入dingtalk-docs-cool-app-demo
项目目录。
执行ding dev
开启调试。
根据脚手架指引,在命令行中执行document <钉钉文档地址>,可以自动打开钉钉文档,在确认安装文档酷应用后进行文档酷应用调试。
说明
「钉钉文档地址」展示如下图:
安装文档酷应用。
启用并使用文档酷应用。
dingtalk-docs-cool-app
。npm install dingtalk-docs-cool-app --save
开发文档酷应用:
搭建脚本服务页面,你可通过搭建脚本服务页面实现读写钉钉文档模型相关的业务需求:
定义脚本函数:你可创建独立的js文件进行脚本函数的定义和注册。使用文档酷应用 JSAPI 提供的全局变量 DingdocsScript 访问文档对象模型 Workbook ,然后调用钉钉文档模型 API 实现文档操作,最后使用 DingdocsScript.registerScript 注册脚本函数。
你可通过调用全局变量「DingdocsScript」注册脚本服务。
/* 脚本函数js文件 */
/*global DingdocsScript*/
// 定义脚本函数
function insertSheet() {
const Workbook = DingdocsScript.workbook;
const sheet = Workbook.insertSheet();
sheet.activate();
}
// 注册脚本函数
DingdocsScript.registerScript('insertSheet', insertSheet);
初始化脚本服务页面:在使用脚本服务前,你需在脚本服务页面中调用initScript初始化脚本服务,导入脚本函数。
调用initScript初始化脚本服务,向scriptUrl中注入全局变量「DingdocsScript」。
/* 脚本服务页面 */
import { initScript } from 'dingtalk-docs-cool-app';
initScript({
scriptUrl: '脚本函数js文件地址',
})
/* UI页面 */
/*global Dingdocs*/
import { initView } from 'dingtalk-docs-cool-app';
initView({
onReady: () => {
},
})
之后你可在UI页面中访问全局变量「Dingdocs」,借助Dingdocs提供的api与脚本服务页面进行交互,实现调用脚本服务页面注册的脚本函数。
Dingdocs.script.run('insertSheet').then((res) => {})
也可以通过「Dingdocs」与钉钉文档界面进行交互,实现例如弹出对话框容器等效果
Dingdocs.workbook.host.showDialog('http://www.example.com/dialog.html')
【钉钉】API开发者 微信交流群
用微信扫右侧二维码,加入【钉钉】API开发者 交流群,互助沟通