钉钉微应用开发笔记

最新推荐文章于 2026-05-21 13:36:27 发布

原创

最新推荐文章于 2026-05-21 13:36:27 发布 · 3.8k 阅读

本文记录了开发钉钉微应用的过程，包括打卡和薪资两大模块的功能实现，如用户信息获取、定位打卡、薪资查询等。通过参考钉钉官方文档进行JSAPI鉴权与使用，并在开发中遇到日历插件定制、验证码输入等问题，提供了解决方案，如利用colors标记异常打卡和采用全屏键盘避免ios中focus问题。

需求说明：
1.打卡模块：获取钉钉用户信息，定位打卡，地点微调，月度打卡统计，补打卡及上级审核
2.薪资模块：月度薪资查询，年度调薪详情

参考文档：
创建钉钉微应用：https://open-doc.dingtalk.com/microapp/bgb96b/aw3h75
钉钉JSAPI：https://open-doc.dingtalk.com/microapp/dev/swk0bg

需求实现：
1.完成钉钉JSAPI鉴权

浏览器引入文件，并使用全局变量 dd。
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.3.0/dingtalk.open.js"></script>
js内的代码是单线程执行的，使用ES6中Promise，保证每次初始化钉钉都能完成鉴权。

getConfig().then(function(data) {
		ddConfig = data;
		dd.config(ddConfig); //1.初始化钉钉的jssdk
		dd.error(function(error) {
			toast('dd error: ' + JSON.stringify(error));
		});
	}).then(function() {
		dd.ready(function() {
			//获取免登授权码
			dd.runtime.permission.requestAuthCode({
				corpId: ddConfig.corpId, // 企业id
				onSuccess: function(info) {
					var ddCode = info.code; // 通过该免登授权码可以获取用户身份
					//获取用户信息
					getUserInfo(ddCode);
				},
				onFail: function(err) {
					toast(JSON.stringify(err));
				}
			});
		});
	});
	
	function getConfig() {
	var config = new Promise(function(resolve, reject) {
	//后台接口获取钉钉签名参数
		SalaryFactory().getConfig('pay', location.href, function(data) {
			var res = JSON.parse(data);
			if(!res.result) {
				alert(res.error);
				return;
			}
			var configInfo = res.payload.configureVo;
			resolve(conf