钉钉开发文档

前端IDE使用

更新时间: 2018-9-19

请下载我们的钉钉应用开发工具,安装并打开。

项目创建

如果你初次编写应用代码,IDE打开后选择新建项目,

image.png

可以使用我们提供的DEMO,如下图所示:

image.png

代码编写

打开项目,会默认进入代码编辑模式。从左到右,依次是文件操作区、代码编辑区和预览区。在IDE中可以对当前项目进行代码编写和文件的添加、删除以及重命名等基本操作。

image.png

点击右上角登录,使用钉钉扫码登录。请使用在开发者后台设置的开发者人员手机号登录钉钉并用钉钉扫码登录。

image.png

实时预览

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

自动补全

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

框架以及组件库

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

开发框架 https://lark.alipay.com/bgrkdl/dev/framework-overview
组件库 https://lark.alipay.com/bgrkdl/dev/view-component
基础能力API https://lark.alipay.com/bgrkdl/dev/ui-navigate

本地调试

预览区

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

调试模式

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

image.png

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

出错反馈

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

真机预览

需要关联应用才可进行真机预览,初次登录或者点击上方“关联应用”均可进行关联操作,点击下拉可展开已创建的各个企业下的第三方个人应用列表,可选择想要关联的应用或创建新的应用。如图所示:

image.png

关联应用后,在IDE右上方点击预览,

image.png

确认推送后用钉钉扫码即可在手机上预览自己开发的应用。

上传

开发者选中"上传"功能后,可编辑待上传的版本号进行上传。

image.png

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

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

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