钉钉H5微应用开发流程前言: 万事开头难, 特别是理解陌生的产品需求, 接触陌生的技术文档, 相信我, 坚持下去, 你的

前言

万事开头难, 特别是理解陌生的产品需求, 接触陌生的技术文档, 相信我, 坚持下去, 你的天花板就会比别人更高。

一、了解完整的学习路径

微信图片_20250109092513.png

二、开始创建H5微应用

微信图片_20250109092840.png

三、基础设置以及权限配置

移动端和PC端的入口地址配置

微信图片_20250109093643.png

服务端API接口权限开通, 可分配部分人员使用

微信图片_20250109094315.png

四、版本发布

微信图片_20250109094550.png

五、五个标识数据知晓，不可外传

CorpId：企业在钉钉中的唯一标识
UserId：企业内每个员工唯一标识
AgentId： H5微应用的唯一标识
AppKey： H5微应用的身份标识
AppSecret： H5微应用的身份秘钥

六、前端接入H5微应用系统免登

进入H5微应用，无感的拿到当前进入的用户信息，根据用户信息，拿到用户钉钉权限，拿到用户业务权限

index.html中引入jsapi

<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.25/dingtalk.open.js"></script>

在app.vue页面获取授权免登码(5分钟内有效)

getDingDingAuthCode() {
    // 钉钉环境中执行
    if (dd.env.platform !== 'notInDingTalk') {
        dd.ready(() => {
            dd.runtime.permission.requestAuthCode({
                corpId: "企业在钉钉中的唯一标识",
                onSuccess: (info) => {
                    alert(`免登陆授权码: ${info.code}`)
                },
                onFail: (err) => {
                    alert(`免登授权失败: ${err}`)
                }
            })
        })
    }
}

验证结果

微信图片_20250109110909.jpg

七、服务端API调试：给用户发送消息通知

获取token

// 获取钉钉access_token 服务端API 
async getDingDingToken() {
    // Nginx和proxy代理 /dingding => https://oapi.dingtalk.com/
    const res = await this.$request({
        url: 'dingding/gettoken?appkey=H5微应用的身份标识&appsecret=H5微应用的身份秘钥',
        method: 'get'
    })
    console.log("res", res.access_token);
}

发送消息通知（这个代码示例发的是oa卡片消息，还有其他消息类型）

// 发送钉钉消息 服务端API 
async sendDingDingMsg() {
	const res = await this.$request({
            url: 'dingding//topapi/message/corpconversation/asyncsend_v2?access_token=获取钉钉access_token',
            method: 'post',
            data: {
                "userid_list": "企业内每个员工唯一标识,企业内每个员工唯一标识",
                "agent_id": "H5微应用的唯一标识",
                "msg": {
                    "oa": {
                        "body": {
                            "form": [{
                                    "value": "10个",
                                    "key": "订单: "
                                }, {
                                    "value": "1563.4元",
                                    "key": "金额: "
                                }, {
                                    "value": "6个",
                                    "key": "用户: "
                                }],
                            "title": "统计分析数据,点击查看>>",
                        },
                    "message_url":"http://你的H5跳转地址"
                },
                "msgtype": "oa"
            },
        }
    })
}

验证结果

微信图片_20250109110915.jpg

束语

知易行难

钉钉H5微应用开发流程

前言