钉钉微应用 - - - - 如何本地开发调试？

Dark_programmer

已于 2023-02-17 11:03:56 修改

阅读量4.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：钉钉文章标签：钉钉 javascript 前端

于 2023-01-30 11:20:36 首次发布

本文链接：https://blog.csdn.net/Dark_programmer/article/details/128798748

钉钉专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用钉钉官方提供的微应用本地开发工具进行H5微应用的开发和调试，包括安装DingTalk-Design-CLI、初始化代码模板、启动调试等功能，并解决常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于钉钉方面的需求，开发H5微应用是或早或晚的事。但是钉钉的相关数据 & api 只能在钉钉环境进行获取，难道每次调试都要推到测试环境使用钉钉进行alert调试？

No！

钉钉官方给出一了些微应用调试工具
在这里插入图片描述

此文章讲解的是 - 微应用本地开发工具

1. 安装DingTalk-Design-CLI

安装
执行以下命令，安装DingTalk-Design-CLI。

npm i dingtalk-design-cli@0.20.4 -g
检查是否安装成功

ding -v

2. 初始化代码模版

执行以下命令，初始化代码模版到本地。

ding init -o h5Test -a h5 -t h5_jsapi_component_demo_vue -l javascript

完成初始化后，会在h5Test目录创建好代码模版，目录结构如下：
在这里插入图片描述

3. 启动开发、调试功能

cd h5Test
ding dev web

到这里，你就可以在Web浏览器像开发一个普通H5应用一样开发钉钉H5微应用了
需要先登录才能使用！
在这里插入图片描述

4. 遇到的问题

4.1 对应企业没有xxx域名微应用？？

在这里插入图片描述
解决办法：
将报错中显示的域名填入对应企业的微应用的应用首页地址中

4.2 history、location的表现异常？？

解决办法：
本地开发模拟器暂时不支持history路由模式，请使用hash路由模式

4.3 本地已经存在了H5微应用，也想使用H5微应用本地开发工具，该如何使用??

先按照第五点的注意配置Access-Control-Allow-Origin
使用指令进行启动: ding dev web --targetH5Url 你的调试链接
如：

ding dev web --targetH5Url http://172.16.****

5.注意

注意，你本地调试的页面链接，需要在Response Headers中配置Access-Control-Allow-Origin: *。

假如你用的是vue-cli初始化的项目，需要在项目目录下添加vue.config.js，并补充如下配置：

module.exports = {
    configureWebpack: {        
        devServer: {
          headers: {
            'Access-Control-Allow-Origin': '*'            
          }
        }
    },
}