钉钉接uni-app h5 + 钉钉免密登录 + 钉钉h5调试

一 安装dingtalk-jsapi

npm install dingtalk-jsapi --save

安装完可能会遇到提示有的别的库没有安装 根据提示安装一下就好了

引入dingtalk-jsapi

import * as dd from "dingtalk-jsapi"; // 引入钉钉api
//需要判断当前运行环境
onLaunch: function (option) {
    if (dd.env.platform != "notInDingTalk") {
      dd.ready(function () {
        const corpId = option.query.corpId;
        //执行你的代码
        dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: (info) => {
          //这里是后端的接口 拿到code获取token
            ddGetToken({
              code: info.code,
            }).then((res) => {
              uni.setStorageSync("token", res.token);
            });
          },
          onFail: (err) => {
            console.error("RequestAuthCode failed:", err); // 捕获 AuthCode 请求的错误
          },
        });
      });
    } 
  },

打包h5

把你的项目部署到服务器上

钉钉配置

找到

新增完之后

找到开发管理

首先服务器出口ip一定要填 这个是你的前端服务器公网ip不填页面不显示 在应用首页地址、PC端首页地址后面都要加上?corpId=$CORPID$ 如果你想本地调试把你的地址换成你的前端本地地址用来获取corpId

把开发者加上

如何调试

使用方式1：将脚本内容粘贴到微应用 html 文件的 标签中,

<script src='https://g.alicdn.com/code/npm/@ali/dingtalk-h5-remote-debug/0.1.3/index.js'></script>复制脚本

使用方式2：在终端执行npm install dingtalk-h5-remote-debug，然后在项目 js 入口文件执行代码initDingH5RemoteDebug();   复制示例代码

这里有详细介绍

点击钉钉端内调试 会打开你的电脑端钉钉 如果连接成功等待以后 下面会出现一个调试按钮 点击就可调试

pc模拟dd环境

参考以下步骤，使用H5微应用开发工具进行开发。

1. 执行以下命令，安装DingTalk-Design-CLI。

  npm i dingtalk-design-cli@0.20.4 -g

2. 执行以下命令，查看是否已经成功安装DingTalk-Design-CLI。

ding -v

3.执行以下命令，初始化代码模版到本地。

ding init -o h5Test -a h5 -t h5_jsapi_component_demo_vue -l javascript

4.执行以下命令，启动开发、调试功能 在刚刚初始化好的代码目录下执行以下命令，启动本地开发、调试。

cd h5Test 
ding dev web

此时运行环境就是钉钉环境