申请微应用相关权限

钉钉微应用调试首先需要去注册并申请微应用的相关信息，一般产品会去处理，我们需要拿到申请好的 corpId 进行调试和开发。

安装依赖及配置

开发和调试需要新增几个依赖。

{
  "dependencies": {
    // ↓ 钉钉 js sdk
    "dingtalk-jsapi": "^3.0.20",
    // ↓ 钉钉环境无法打开控制台，引入一个虚拟控制台，可以使用其他的虚拟控制台
    "vconsole": "^3.15.1",
  },
  "devDependencies": {
    // ↓ 钉钉无法打开控制台，所以也无法打开 vue-devtools ，我们的方案是引入独立的版本
    "@vue/devtools": "^6.5.0",
    // ↓ 用于打开浏览器
    "open": "^9.1.0",
    // ↓ 配合 vue-devtools 使用
    "vite-plugin-html": "^3.2.0",
    // ↓ 配合 `vconsole` 使用，可以自动注入
    "vite-plugin-vconsole": "^1.3.1",
  }
}

添加依赖之后，我们还需要进行相关配置。

vite

// vite.config.ts
...
import { viteVConsole } from 'vite-plugin-vconsole';
import { createHtmlPlugin } from 'vite-plugin-html';
...

export default {
  ...
  plugin: [
    ...
    createHtmlPlugin({
      inject: {
        data: {
          'vueDevtoolsInjectScript': command === 'serve' ? '<script src="http://localhost:8098"></script>' : '',
        },
      },
    }),
    viteVConsole({
      entry: path.resolve('src/main.ts'), 
      localEnabled: true,
      enabled: true,
    }),
    ...
  ]
  ...
}

<!-- index.html -->
...
<head>
  ...
  <!-- ↓ 用于注入 vue-devtool 连接地址 -->
  <%- vueDevtoolsInjectScript %>
  ...
</head>
...

钉钉相关配置

项目根目录需要创建一个 ding.config.json 配置文件。

{
  "type": "h5"
}

然后我们还需要创建要给用于调试的脚本，在根目录创建 ding.dev.js 。

import('open').then((open) => {
  const devPath = 'http://localhost:8083/?ddtab=true&corpId=dingxxxxx';
                                                           // ^ 这里换成第一步申请的 cropId
  console.log('将自动打开钉钉窗口，窗口启动时服务可能还未启动完，点击「重新加载」即可');
  console.log('如果钉钉窗口打开失败，请手动复制');
  console.log(devPath);
  console.log('至钉钉聊天窗口并发送，然后点击链接启动');

  // 拼接地址用于直接打开钉钉指定页面
  open.default(`dingtalk://dingtalkclient/page/link?url=${encodeURIComponent(devPath)}`);
});

package.json

在脚本中添加钉钉调试命令。

{
  ...
  "script": {
    ...
    "dev:ding": "vite | vue-devtools | node ./ding.dev.js",
    //           ^ 启动项目   ^ 启动 devtools     ^ 启动钉钉并打开调试页面
    ...
  },
  ...
}

开始调试

启动钉钉调试，可运行 pnpm run dev:ding 命令。同时会启动 vue-devtools 的独立版本用于 vue 调试。正常情况会弹出一个钉钉窗口并打开对应页面。如果没有自动打开，根据启动提示，将链接复制到钉钉聊天窗口后打开即可。

如调用 dd 相关能力时报错，可能需要在钉钉开发平台中设置调试地址。具体路径为 `` - 选择对应企业登录 - 选择顶部应用开发 - 选择对应应用 - 选择左侧开发管理 - 点击最下方「四端调试工具」右侧「去调试」按钮 - 在最下面添加本地调试域名。

‍