钉钉开发文档

前端IDE使用

更新时间: 2018-9-18

下载/登录开发工具

请下载我们的钉钉应用开发工具,安装并打开,包含本地调试、代码编辑、真机预览、发布等功能,显示如下界面,请使用在开发者后台设置的开发者人员手机号登录钉钉并用钉钉扫码登录。

项目创建

打开IDE后选择新建项目,

image.png

如果你初次编写E应用前端代码,选择相应的应用类型后,可以使用我们提供的组件/API示例DEMO。

image.png

登录开发工具,代码编写

打开项目,会默认进入代码编辑模式。从左到右,依次是文件操作区、代码编辑区和预览区。

image.png

在右上角可点击扫码登录。

image.png

代码编辑区可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。

实时预览

在代码编辑区修改任何代码都会重新编译,然后自动刷新应用。

自动补全

工具针对 my 接口和 axml 提供了大量的自动补全提示,以帮助开发者提高效率。

框架以及组件库

钉钉应用为开发者提供了标准化的基础框架以及丰富的组件,开发者可以通过组合这些基础组件进行业务开发。

开发框架 https://open-doc.dingtalk.com/microapp/dev/framework-overview
组件库 https://open-doc.dingtalk.com/microapp/dev/view-component
基础能力API https://open-doc.dingtalk.com/microapp/dev/ui-navigate

本地调试

预览区

这里可真实模拟在钉钉客户端容器里的运行环境,并针对绝大部分的 api 提供了模拟功能。

调试模式

点击左下方的调试器,可切换到调试模式。

image.png

应用调试工具提供了 axml 和 acss 的支持,支持组件层级、属性回写等功能;同时也包含了 Chrome 调试工具中的网络请求、DOM 元素检查、源码 Debug 等。

出错反馈

当开发者在 axml 或者配置文件里编译出错时,保存后会对错误的信息以 redbox 的形式呈现给开发者。

发布

开发者选中"上传"功能后,根据开放平台当前版本, 填写待上传的版本号进行上传。

image.png

发布以后的版本可以在开发者后台应用的版本管理进行灰度、发布到线上等版本管理,具体请查阅真机预览

扫码预览

三方企业应用,必须先授权开通才能进行体验。

否则,①不能在钉钉客户端工作页直接看到及使用;②通过钉钉扫码IDE中的二维码进行预览时,只会出现提示求助管理员开通应用的页面;③通过IDE进行模拟器预览时,如果需要获取当前用户身份进行免登,也会提示企业未开通语义的错误码和错误信息。

在"编码"界面点击预览,需要确定如下信息:

  • 选择关联应用
    关联应用是已经在开发者后台创建的第三方企业应用。
  • 选择体验组织
    体验组织应该是已经开通过此应用的企业。

image.png

推送完成后,可以使用钉钉扫码查看自己开发的微应用。

请注意:如果您开发的前端代码访问的URL的Host是一个非公网IP,且真机与和应用服务端没有处于相同网络环境中(比如手机在4G网络),扫码打开应用,由于前端无法连接到应用服务端,会导致无法看到预期效果。

E应用前端向服务端发起网络请求时是直连安全域名或IP的,因此假如您的前端和服务端都在一个办公环境内(比如都在您的PC电脑上),是可以直接互通的,因此可以设置任何您的前端所在环境能连接到的域名或IP为安全域名。
您也可以通过钉钉提供的内网穿透工具生成一个临时二级域名给测试应用使用。