1.创建h5微应用

https://open.dingtalk.com/document/orgapp/develop-org-h5-micro-applications

根据里面的三个步骤,创建h5微应用

2.免登之前必须要先进行JSAPI的授权

文档说明:
https://open.dingtalk.com/document/orgapp/jsapi-authentication

根据文档中的说明
步骤1,2后端请求钉钉接口
步骤3,提供一些数据(url: location.href.split(‘#’)[0])
步骤4,后端生成签名
步骤5,引入js
步骤6,根据后端接口数据,返回dd.config参数
步骤7,调用dd里面的接口

● dd.config中所有的参数必须直接来自服务端,不能直接在前端定义。
● 一个页面只需要调用一次dd.config即可,重复调用会复用第一次调用的参数,单页应用(SPA)的router切换视为同一个页面。

3.免登操作

文档说明:
https://open.dingtalk.com/document/orgapp/logon-free-process 企业id获取

钉钉微应用 判断ios或者安卓 钉钉微应用调试_前端

微应用id

钉钉微应用 判断ios或者安卓 钉钉微应用调试_h5_02

通过该免登授权码可以获取用户身份,就可以通过后端接口去获取该用户信息了

  1. 前端通过sdk访问dd.runtime.permission.requestAuthCode,获取免登授权码;
  2. 通过接口传递免登授权码给后端,后端调用钉钉提供的公共接口,获取access_token, 获取用户的userid, 获取用户详情; 文档链接
  3. 调用sdk接口之前,有些需要鉴权,有些不需要鉴权,具体查看文档链接
  4. JSAPI鉴权
  5. 鉴权步骤中,步骤1,2,3,4为后端操作;
  6. 前端直接调用钉钉公共接口,会跨域请求
  7. 未鉴权前调用JSAPI中需要鉴权的接口,接口会报错

4.调试问题

开发过程中,肯定避免不了调试,但是调用钉钉提供的api(比如dd.config),必须要在钉钉环境内进行

钉钉微应用 判断ios或者安卓 钉钉微应用调试_钉钉_03


官方文档也有调试的工具,文档如下:

https://open.dingtalk.com/document/resourcedownload/local-development-tools-for-microapplications 但是尝试过,还是报错

钉钉微应用 判断ios或者安卓 钉钉微应用调试_前端_04


后面我就不使用这个调试工具,而是用vconsole这个工具(https://github.com/Tencent/vConsole)

这个用于调试移动端的开发工具,只是要特别注意,在生产环境,要隐藏掉

这个时候页面上会出现一个Vconsole绿色的小按钮,点击之后,可以充当浏览器的控制台输出了

然后我们需要配置开发管理
协议+ip地址+端口号

钉钉微应用 判断ios或者安卓 钉钉微应用调试_钉钉微应用 判断ios或者安卓_05

然后点击发布,选择部分员工,只有你可见

钉钉微应用 判断ios或者安卓 钉钉微应用调试_钉钉_06

在PC端的钉钉工作台就能看到这个微应用了,你也可以正常调用钉钉接口,且在钉钉环境内了