企业内部钉钉H5微应用（免登录）Spring Boot项目实战

最新推荐文章于 2024-06-09 20:08:05 发布

Nan YI I

最新推荐文章于 2024-06-09 20:08:05 发布

阅读量5.6k

点赞数 7

分类专栏： SpringBoot 文章标签：钉钉 H5微应用企业内部 spring-boot

本文链接：https://blog.csdn.net/qq_41918166/article/details/113179877

版权

SpringBoot 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

文章目录

前言
一、准备工作
- 1.开发前准备：
- 2.钉钉微应用的免登流程：
二、开放过程
三、微应用配置
四、启动项目后即可访问，应用截图
总结

前言

公司内部某部门需要做一个在线评分的企业内部H5微应用（免登录），于是项目经理就交给我接手这个项目,简单的说了一下业务需求，经理交代我：页面做的好看点。作为一个后端开发人员，这次从UI页面到数据库设计到前端页面、后端项目都让我一个人来搞，周二下午和我说的，下周一就要用，算上周六周日也才5天时间，记得最晚睡的一晚是调自适应H5页面的CSS样式到凌晨2点半，最后也算是圆满完成任务了。这是部门第一次做钉钉内部H5微应用，都没有接触过，我也查了很多这方面的博客，还是遇到了很多坑，趁此机会，把整个开放过程和遇到的坑记录一下，希望能帮助到需要的朋友~~~
此微应用的部分功能：
1、企业内部员工免登录直接使用，可以给需要考核的员工打分使用
2、输入分数为1~100，0和字符串都输入不进去，当分数超过100的时候，自动变为最大值100
3、分数为空时，自动提示，input框获取焦点后，自动消失
4、未给所有员工考核打分的评分人员中途退出后，下次登录时候可以自动定位到上传评分退出时的位置
5、点击【上一步】可以查看已经打过分的员工的分数，点击【下一步】自动提交，提交后input框自动变成只读模式，只能查看，不能修改分数
6、完全评价完毕后，会有弹框提示，指定管理员可以查看所有未考核完毕的人员名单

一、准备工作

1.开发前准备：

（1）、需要自备一个钉钉企业(自己创建一个)，测试应用无所谓认证不认证，发布的时候相关限制请参阅说明文档；
（2）、关于服务器，有公网服务器最好，没有的话需要内网穿透工具，调试的时候，由于钉钉的H5微应用调试只能“真机”调试，极其恶心，所以极其建议调试的时候使用内网穿透工具；推荐一个工具：uTools。这是国产的一款软件，功能非常强大，内网穿透更是简单，支持穿透精确到端口号，看下图：
在这里插入图片描述

2.钉钉微应用的免登流程：

在这里插入图片描述

二、开放过程

1.新建企业号

钉钉APP上面创建企业团队即可，登录钉钉开放平台后，会看到自己刚刚创建企业的企业ID：
在这里插入图片描述

2.创建H5微应用

在这里插入图片描述
加粗样式

3.项目编码

（一）引入钉钉官网提供的sdk
在这里插入图片描述 `
（二）pom.xml中引入lib中钉钉的sdk-jar包

 <!--钉钉工具包-->
        <dependency>
            <groupId>com.taobao.top</groupId>
            <artifactId>top-api-sdk-java</artifactId>
            <version>1.0</version>
            <scope>system</scope>
            <systemPath>${project.basedir}/src/main/resources/lib/taobao-sdk-java-auto_1479188381469-20210113.jar</systemPath>
        </dependency>

（三）spring boot项目配置文件中写入上方已经生成过的四个参数
在这里插入图片描述
（四）项目前端登录页面
本教程重在说明钉钉微应用的免登流程，所以前端部分使用原生的, 最简单的 js, 仅供参考;
我这里选择的是钉钉开放平台上的第二种引入方式，即直接引入js文件(不推荐，原因请看钉钉开发文档)
login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
  <link type="text/css" rel="stylesheet" href="./css/main.css">
  <title>你准备好了吗？</title>
</head>
<script src=".././static/js/jquery.js" type="text/javascript"></script>
<script src="https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js"></script>

<body id="login">
<div class="app-container-login">
  <img class="logo" src="./image/nlogo.svg">
  <img class="reba" src="./image/login_best.png">
  <img class="img3" src="./image/login_3.png">
  <img class="img" src="./image/login_2.png"/>
  <form action="/index" id="myForm" name="myForm" method="post">
    <input type="hidden" name="authCode" value="" id="code">
    <button class="login_button" type="submit">开始评分</button>
  </form>
</div>
</body>
<script>
  var code;
  window.onload = function () {
    if (dd.env.platform != 'notInDingTalk') {
      dd.ready(() => {
        dd.runtime.permission.requestAuthCode({corpId: 'dingae060288e3b3d1cea39a90f97fcb1e09'}).then((result) => {
          code = result.code;
        }).catch(err => {
          console.log(err);
        }).finally(() => {
          document.getElementById("code").setAttribute("value", code)
        })
      });
    } else {
      console.warn('请在钉钉中访问本应用!');
    }
  }
</script>
</html>

（五）页面中引入静态资源
请看下面我项目的静态资源结构目录：
在这里插入图片描述
按照正常项目页面中引入css或者图片，应该写成：

<link type="text/css" rel="stylesheet" href=".././static/css/main.css">
 <img class="reba" src=".././static/image/login_best.png">

但是这样写钉钉中打开微应用的时候会找不到资源，只能写成下方这种形式

<link type="text/css" rel="stylesheet" href="./css/main.css">
 <img class="reba" src="./image/login_best.png">

这一点巨坑，千万注意，至于为什么会这样，我目前还没找到答案，钉钉官网上面也没有，知道原因的朋友可以下方评论一下~
（六）Controller层

 /**
     * @Description:点击开始评分的时候获取当前用户的userID
     */
    @PostMapping("/index")
    public String login(@RequestParam("authCode") String authCode, Model model) {
        //  获取accessToken
        String accessToken = tokenService.getAccessToken();
        //  获取用户的userId
        String userInfo = tokenService.getUserInfo(authCode, accessToken);
        //  获取钉钉用户id,name,头像url地址，地址没有返回null
        UserDTO user = tokenService.getUser(accessToken, userInfo);
        //  获取所有参与评选的用户
        // 记录表中该钉钉用户提交的最后一条staffId
        // 查询评价的员工最后一条staffId
        User staff = null;
        Integer staffId = null;
        Integer lastStaffId = userService.selectLastId();
//        获取所有问题
        List<Subject> subjects = subjectService.list();
        Integer count = recordService.selCountByUserName(user.getName());
        if (count == 1) {
            managerService.updateByName(user.getName());
            model.addAttribute("status", 1);
            staff = userService.selectNext(0);
        }else {
            staffId = recordService.getLastStaffId(user.getUserId());
            model.addAttribute("status", 0);
            staff = userService.selectNext(staffId==null?0:staffId);
        }
        // 钉钉用户信息
        model.addAttribute("user", user);
        // 被评选所有人
        model.addAttribute("staff", staff);
        model.addAttribute("lastStaffId", lastStaffId);
        // 所有的题目
        model.addAttribute("subjectlist", subjects); 
        return "main";
    }

注意：其中的tokenService类中代码是钉钉提供的demo中的，可以直接复制粘贴过来用~

三、微应用配置

在这里插入图片描述

四、启动项目后即可访问，应用截图

在这里插入图片描述
补充：回退事件，即左滑手机可以直接退出该微应用：在对应的页面中添加下方js代码即可

/** 回退事件 **/
  dd.ready(function () {
    document.addEventListener('backbutton', function (e) {
      // 在这里处理你的业务逻辑
      e.preventDefault();
      dd.biz.navigation.close({
        onSuccess: function (result) {
        },
        onFail: function (err) {
        }
      })
    });
  });

总结

成为一个小胖子，没事摸摸小肚子~

Nan YI I

关注

7
点赞
踩
29

收藏

觉得还不错? 一键收藏
5
评论
企业内部钉钉H5微应用（免登录）Spring Boot项目实战

文章目录前言一、准备工作1.开发前准备：2.钉钉微应用的免登流程：二、开放过程1.新建企业号2.创建H5微应用3.项目编码三、微应用配置四、启动项目后即可访问，应用截图总结前言公司内部某部门需要做一个在线评分的企业内部H5微应用（免登录），于是项目经理就交给我接手这个项目,简单的说了一下业务需求，经理交代我：页面做的好看点。作为一个后端开放人员，这次从UI页面到数据库设计到前端页面、后端项目都让我一个人来搞，周二下午和我说的，下周一就要用，算上周六周日也才5天时间，记得最晚睡的一晚是调自适应H5页面
复制链接

扫一扫