钉钉微应用 - 本地开发调试

• 1. 安装DingTalk-Design-CLI
• 2. 初始化代码模版
• 3. 启动开发、调试功能
• 4. 遇到的问题
• • 4.1 对应企业没有xxx域名微应用？？
  • 4.2 history、location的表现异常？？
  • 4.3 本地已经存在了H5微应用，也想使用H5微应用本地开发工具，该如何使用??
• 5.注意

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

No！

钉钉官方给出一了些微应用调试工具

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

1. 安装DingTalk-Design-CLI

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

   npm i dingtalk-design-cli@0.20.4 -g

2. 检查是否安装成功

   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.137.18:3000

5.注意

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

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

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