uniapp实现钉钉网页应用jsapi鉴权、免登功能（前后端）

我们本来是有个app，已经正常上线使用了，框架用的是uniapp。现在想搞到钉钉应用上，一开始想做钉钉小程序，就先简单说一下钉钉小程序基础开发，然后再详细介绍钉钉网页应用。

钉钉小程序基础开发 

首先说一下不管是开发钉钉小程序还是网页应用(微应用)都需要在钉钉后台新建应用，因为会用到一些id、Secret之类的。 钉钉新建应用。

然后就是开发工具的下载： 小程序开发工具 。其实直接用支付宝开发工具即可，这也是官网推荐的： 小程序开发工具

然后我们使用HBuilderX打开项目，开发钉钉小程序需要在package.json中添加如下代码：

登录后复制

"uni-app": {
	"scripts": {
		"mp-dingtalk": {
			"title": "钉钉小程序",
			"env": {
				"UNI_PLATFORM": "mp-alipay"
			},
			"define": {
				"MP-DINGTALK": true
			}
		}
	}
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.

然后我在manifest.json中也加入了：

登录后复制

"mp-dingtalk": {
	"title": "钉钉小程序",
	"env": {
		"UNI_PLATFORM": "safe-in-product-app"
	},
	"define": {
		"MP-DINGTALK": true
	},
	"optimization": {
		"subPackages": true
	}
},

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

然后可以重启一下HBuilderX这样我们点击【运行】，就会出现【钉钉小程序】了：

然后我们可能需要在HBuilderX工具的设置中，手动设置一下对应的小程序工具的位置：

然后点击【运行】就可以调起来，然后手动选择对应的编译好的代码打开即可 ，这个时候我们注意要选择钉钉应用：

然后运行即可，发布的话直接在右上角点击【上传版本】即可 。

然后小程序搞了半天，由于包过大，发现上传不上去，预览也预览不了，而且运行编译的过程是很漫长的，超级慢，体验特别差。大家也都知道，不管是微信小程序、支付宝小程序还是钉钉小程序或者其他的小程序，只要是小程序，要求的屁事就很多，限制这限制那的，所以考虑了一下决定放弃小程序！！！于是开始了钉钉网页应用的研究，钉钉网页应用就是H5，其实跟微信公众号差不多的意思。

钉钉网页应用

同样的我们现在钉钉后台先建网页应用：

因为开发钉钉应用肯定要在钉钉环境中才行，那么怎么调试呢？直接运行到浏览器是肯定不行的。官网也给我们提供了几种调试方式：

 微应用调试工具

我比较喜欢的就是【微应用调试工具-RC版】，点击PC端下载即可，其实也是个钉钉，我们正常登录即可，不一样的是，我们点开应用，可以像浏览器一样【F12】打开控制台！！！当然前提是我们要把刚才建的应用先发布：  版本详情 ，如图：

注意在发布之前，我们要设置一下网页链接为我们本地开发的地址：

保存好之后，再发布哈！

这样我们在钉钉上就能看到我们的应用了，然后我们把前端本地项目启动起来就可以了。

那么接下来就是功能的开发，功能的开发这里分前端和后端，先说后端，再说前端哈，把后端的接口都写好，前端调用就行了。后端用的就是我们最普遍的springboot哈

后端实现：

因为我这里开发的钉钉应用是企业内部应用，所以用到的一些id、密钥之类的东西，我先都写在配置文件中哈：

application.yml

登录后复制

config:
  dingh5:
    corpid: dingbe8dxxxxxx
    apiToken: 6677f5xxxxxxxx
    appid: 6edaxxxxxxxx
    agentId: 3xxxxxx
    clientId: dingbuxxxxxxx
    clientSecret: 1qxxxxxx
    accessTokenUrl: https://api.dingtalk.com/v1.0/oauth2/{corpId}/token
    userInfoUrl: https://oapi.dingtalk.com/topapi/v2/user/getuserinfo
    userDetailUrl: https://oapi.dingtalk.com/topapi/v2/user/get
    jsapiTicketUrl: https://api.dingtalk.com/v1.0/oauth2/jsapiTickets

• 1.
• 2.
• 3.