.首先新建个文件夹下载调试工具(此工具其实是个vue项目)
安装教程
ps:教程第四步 直接进行下面操作 地址是你vue 启动地址(这个地址需要和你企业微应用首页地址一致,你项目中请用‘/’重定向到首页)

ding dev web --targetH5Url http://127.0.0.1:3000    

2.你的项目引入 dingtalk

npm install dingtalk-jsapi    

首页逻辑流程如下

<script>
import * as dd from "dingtalk-jsapi";
export default {
  data() {
    return {
      year: "",
    };
  },

  methods: {
    //获取getCode
    getCode() {
        //有token时不调用登录
       if (this.$store.state.token) {
          return
       }
      let corpId = "xxxxxxxxxxxxxxxxxxxxxxx";  //后端提供
      console.log(dd.env.platform);
      if (dd.env.platform !== "notInDingTalk") {
        dd.ready(() => {
          //使用SDK 获取免登授权码
          dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: (info) => {
            //获取登录所需信息
              this.$request(
                this.$Api.loginDingDing,
                { authCode: info.code },
                "get"
              ).then((res) => {
                if (res.code == 0) {
                  this.$request(this.$Api.login, {username:res.result.name,password:'xxxx'}, "post")
                    .then((res) => {
                      if (res.code == 200) {
                        sessionStorage.setItem("token", res.token);
                        this.$store.commit("setToken", res.token);
                        Toast("登录成功");
                        this.$router.push("/Home");
                      } else {
                        this.$toast(res.msg);
                      }
                    })
                    .catch((e) => {
                      console.log(e);
                    });
                }
              });
            },
            onFail: (err) => {
              alert("fail");
              alert(JSON.stringify(err));
            },
          });
        });
      }
    },
  },

  created() {
    this.getCode();
  },
};
</script>

3.在调试工具项目中登录钉钉,开始调试。

Logo

前往低代码交流专区

更多推荐