钉钉微应用 - 本地开发调试
- 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
-
安装
执行以下命令，安装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.137.18:3000
5.注意
注意，你本地调试的页面链接，需要在Response Headers中配置Access-Control-Allow-Origin: *。
假如你用的是vue-cli初始化的项目，需要在项目目录下添加vue.config.js，并补充如下配置：
module.exports = {
configureWebpack: {
devServer: {
headers: {
'Access-Control-Allow-Origin': '*'
}
}
},
}
