【DingTalk】钉钉应用开发

前言部分

最近要开发一个企业内部应用系统

无纸化办公使用钉钉，领导想在钉钉的基础上加入我们自己的应用

 引入Activiti工作流引擎开发审批立项等等业务活动，做一个大一统的系统

然后让我负责开发钉钉应用（完全懵逼），后台系统是另外一个人来写

表结构和整个系统架构由领导亲自操刀决定，包括相关文档的编写

 

开放平台上的说明是【H5微应用】结合

仓库代码拉下来，工程分为三个 web，server，ding-web 

前后端分离，但是不使用微服务的方式（经理怕后需要拆分，还是在工程里面分包管理模块及服务）

web是后台，和钉钉应用各自一个

技术栈是MySQL，Springboot + Mybatis，Vue2 （ElementUI库，框架是Vue-Element-Admin）

然后领导前阵子自己折腾了这个钉钉应用的开发，移动端的UI库用的Vant，跟ElementUI类似，开会上演示了下画的界面

就直接拍板这套技术栈了

 

我的理解

然后看了钉钉应用说明介绍及应用配置

发现跟web应用开发方式差别不大

呈现的效果是手机端的，开发时要自己设置浏览器成各个手机型号的进行查看效果

 

强调是H5，而非Web，因为有些调用手机硬件功能的，需要使用钉钉提供的接口

然后我看接口相关的文档内容，Web工程需要加入钉钉的一个npm支持包，后台Server工程是需要加入一个SDK包

再加上应用令牌，可以实现和钉钉平台的一个交互

 

部署方式，就是配置一个服务IP地址和应用首页地址，然后就没了

 但是要求服务地址必须是暴露在公网的，内网则是没有办法访问（待解决的部分）

首先项目能跑起来，然后要内网穿透，再到后台这里发布应用，我看到钉钉有自己做的一个内网穿透工具，要看看怎么使用

 

一、钉钉应用创建

需要注册钉钉账号，一般入职公司会要求下载钉钉APP，并绑定所属单位

 

钉钉开放平台官网

https://open.dingtalk.com/

 

选择【开发者后台】登录：

 

这里存在多个单位，【xx开发平台】是另外创建的一个测试单位，这个是找项目负责人申请加入的

进入后台面板之后，悬浮【应用开发】，点击【企业内部开发】

 

创建H5微应用

 

之后这里可以看到创建的应用

 

二、发布应用

在本地跑一个Vue项目

选这里配置【出口IP】和【首页地址】，这里我填的内网，试了之后是没法访问的...

 

再到下面【部署和发布】，只分配允许谁能访问，就没了

 

点击保存之后回到钉钉APP或者PC客户端

手机APP在【工作台】——【未分组的应用】里面找到刚刚发布的应用

PC客户端的不赘述了

 

 

本地的服务关了就直接访问不到了，然后还没有配置穿透，也可能是因为没穿透内网的原因

笔记暂时先写到这里

 

2022年09年22日更新：

bug改完了，然后折腾内网穿透的事情

内网穿透是说到钉钉提供了一个工具，然后发现配置了无法穿透

因为Ngrok通道连接始终连不上

是说工具已经失效弃用了

https://blog.csdn.net/hahahalu/article/details/126305684

在官网这里也说明了弃用。。。　

https://open.dingtalk.com/document/resourcedownload/http-intranet-penetration

 

然后查看了这个FRP内网穿透的文档，都看不懂在干嘛

于是改用花生壳客户端来配置

 

本地先随便搭建了个web能跑起来

web端口是3000

 

在花生壳的网页面板做一些基本配置就能建立穿透

 

检查是否正常访问

 

 

检查使用域名访问是否正常：

https://2c7544653v.oicp.vip/

　　

然后回到钉钉管理平台，重新配置应用

 

部署之后再次从手机上的钉钉APP访问，访问正常

 

三、开发应用

官方文档地址：

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

这里官方提供了完整的示例代码

git clone https://github.com/open-dingtalk/h5app-corp-quickstart.git

　　

后台配置四个关键值：

dingtalk.app_key=应用key
dingtalk.app_secret=应用密钥
dingtalk.agent_id=应用代理ID
dingtalk.corp_id=企业ID标识