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

关于钉钉微应用开发,真的尝尽了苦头。

要么是因为非钉钉环境报错,要么是发版到钉钉之后看不到日志的难受。

之前写过一个钉钉微应用 - - - - 如何本地开发调试?算是解决了一部分问题,但还是很不方便。

最近才发现,钉钉微应用开发有专门的IDE,官方地址: 微应用调试工具-IDE

接下来就展示一下如何使用这个IDE.

1. 下载IDE & 登录钉钉开发者工具

先根据自己的电脑,是windows就下载windows的,是mac就得区分芯片

步骤如下: 苹果图标 - 关于本机 - 图形卡/芯片
钉钉微应用 - - - - 如何本地开发&调试_第1张图片

  • 钉钉微应用 - - - - 如何本地开发&调试_第2张图片
    钉钉微应用 - - - - 如何本地开发&调试_第3张图片

2. 打开H5微应用

方式有两种:

  • 通过应用管理打开H5微应用,鼠标悬停在需要打开的H5微应用上,点击打开按钮。填写备份目录,该目录填写微应用在本地的项目代码目录。
  • 通过右上角打开H5微应用在本地的项目目录。

2.1 通过应用管理打开H5微应用

鼠标悬停在需要打开的H5微应用上,点击打开按钮。填写备份目录,该目录填写微应用在本地的项目代码目录。
钉钉微应用 - - - - 如何本地开发&调试_第4张图片

2.2 通过右上角打开H5微应用在本地的项目目录

钉钉微应用 - - - - 如何本地开发&调试_第5张图片

3.启动项目

  • 点击右上角模拟器按钮
    钉钉微应用 - - - - 如何本地开发&调试_第6张图片

  • 点击模拟器内的编译设置按钮。
    钉钉微应用 - - - - 如何本地开发&调试_第7张图片

  • 填写模拟器设置信息,填写项目的启动配置后,点击保存。 (编译功能依赖当前机器环境,请确保配置的命令和端口可在当前环境下运行,否则将无法运行。)
    钉钉微应用 - - - - 如何本地开发&调试_第8张图片

  • 点击启动编译按钮。
    钉钉微应用 - - - - 如何本地开发&调试_第9张图片

4. 开始调试

  • 4.1 开始调试,点击编译器的预览按钮,选择在钉钉工作台打开的方式
    钉钉微应用 - - - - 如何本地开发&调试_第10张图片

  • 跳转到钉钉客户端内工作台,打开该微应用页面,并点击右下角按钮可进入调试
    钉钉微应用 - - - - 如何本地开发&调试_第11张图片

  • 调试效果如下图所示。
    钉钉微应用 - - - - 如何本地开发&调试_第12张图片

如此即可在本地进行开发调试钉钉微应用了!!!

5. 踩坑

5.1 钉钉开发者工具 报错如下

在这里插入图片描述
暂无解决办法,可点击 预览 - 钉钉打开 。如 4.1

5.2 报错 微应用https://dingone.test.dingtalk.com

解决办法:
将该地址添加到微应用链接中

5.3 报错 corpid不合法

如图:
钉钉微应用 - - - - 如何本地开发&调试_第13张图片

解决办法:
暂时没找到更好的解决办法,可先在项目中配置好corpid即可

你可能感兴趣的:(钉钉,钉钉)