进入钉钉开放平台

平台地址

创建应用

1. 点击企业内部开发

2. 点击创建应用

3. 将表单补充完点击确定创建

配置应用

1. 点击应用名称

2. 点击开发管理

3. 点击修改，将表单内容补充全，点击保存

4. 点击权限管理，选中所有权限并申请权限

5. 部署发布

查看应用

钉钉管理后台

点击工作台自建应用就可以看到

JSAPI 使用

安装依赖

pnpm add dingtalk-jsapi

全局挂载

import { createApp } from 'vue';
import dd from 'dingtalk-jsapi';

import App from './App.vue';

async function bootstrap() {
  const app = createApp(App);
  // 当前环境是钉钉 则全局挂载 钉钉的jsapi
  if (dd.env.platform !== 'notInDingTalk') {
    app.config.globalProperties.$dd = dd;
  }

  app.mount('#app');
}

bootstrap();

全局使用

• 自定义全局类型， 创建 global.d.ts 文件

import dd from 'dingtalk-jsapi';

declare module 'vue' {
  interface ComponentCustomProperties {
    $dd: typeof dd;
  }
}

• 组件内使用

import { getCurrentInstance, watchEffect } from 'vue';

const instance = getCurrentInstance();

watchEffect(async () => {
  // 钉钉登录 获取到 code 
  if (instance?.proxy?.$dd) {
    const res = await instance?.proxy?.$dd.runtime.permission.requestAuthCode({
      corpId: 'xxxx',
    });
    console.log(res.code)
  }
});

应用调试

调试方案

• RC 版本的最优

开发必读文档

开发前必读

调试api

文档地址