【小程序】钉钉小程序开发记录/问题总结

说到小程序，开发的微信、支付宝等都比较多，钉钉的不管是资料还是问题的解决方案都比较少，最近在使用uniapp开发钉钉的小程序，顺便记录一下。

1、钉钉小程序进入指定页面

1.1 扫码进入指定页面

参考：https://open.dingtalk.com/document/isvapp/applink-pen-the-nailing-applet

链接中需要包含以下几个参数

• miniAppId：个人应用的 MiniAppId;

• version：发布应用的版本号;

• page：跳转指定页面的路径（注：需要 encodeURIComponent 进行转换方可，如需传递业务参数，在路径后面增加?params1=001%26params2=002）;

  dingtalk://dingtalkclient/action/open_mini_app?
    miniAppId=50*********059
    &source=trial&version=版本号
    &page=%2Fpages%2FcheckInApply%2Findex
      ?mtype=2%26op=open
  

参考：https://open.dingtalk.com/document/personalapp/scheme-of-mini-programs-1#title-ryv-7nu-87v

1.2 通过链接进入指定页面

您可能会遇到这种场景，通过短信中的链接进入钉钉小程序的指定页面，并携带业务参数

• miniAppId：小程序miniAppId;

• type：小程序类型;

  • 1：三方企业应用；

  • 2：企业内部应用；

  • 4：第三方个人应用；

• page：跳转指定页面的路径；

• pVersion：企业内部小程序应用必填，固定值为1；

• packageType：企业内部小程序应用必填，固定值为1；

  https://applink.dingtalk.com/action/open_mini_app?
    type=4
    &miniAppId=50*********059
    &corpId=ding*************153
    &pVersion=1
    &packageType=1
    &page=%2Fpages%2FcheckInApply%2Findex
  

2、钉钉小程序获取免登授权码

npm install dingtalk-jsapi -save

import * as dd from 'dingtalk-jsapi';
 
export const getAuthCode = (corpId) => {
  new Promise((resolve, reject) => {
    dd.runtime.permission.requestAuthCode({
      corpId: corpId, // 输入企业id
      onSuccess: function (res) {
        if (res.code) {
          let obj = {
            code: res.code,
            corpId: corpId,
          };
          resolve(obj);
         }
       },
       fail:function(err){
         // 获取授权码失败
         reject(err);
       }
    });
  })
}

3、钉钉小程序实现拉起授权/免登

3.1 三方应用拉起授权

npm install dingtalk-design-libs -save

拉起授权后，可以将获取的信息进行存储，只有登录过期，才清除存储的数据，然后重新拉起授权即可。

import { openAuth } from 'dingtalk-design-libs/biz/openAuth';
 
export const getAuthCode = (corpId) => {
  new Promise((resolve, reject) => {
    openAuth({
      clientId:'dingo*************falc', // 应用ID(唯一标识)
      corpId: corpId, // 当前组织的corpId
      rpcScope: 'Contact.User.Read', 
      fieldScope: 'Contact.User.mobile',
      type: 0 // 0 表示授权个人信息
    }).then((res)=>{
      const authCode = res?.result?.authCode;
      // 处理返回数据
      if(!authCode) {
        reject();
        return;
      }
      uni.setStorageSync('authCode', authCode)
      resolve(authCode);
    }).catch(err => {
      console.log('=======openAuth==err======', err);
    })    
  })
}

3.2 企业内部应用实现免登

npm install dingtalk-jsapi -save

通过钉钉的SDK，获取授权码，然后通过后台API获取用户基本信息/token即可。

// corpId：Client ID (原 AppKey 和 SuiteKey)，从应用基本信息获取
export const getAuthCode = (corpId) => {
  new Promise((resolve, reject) => {
    dd.getAuthCode({
      corpId: corpId,
      success:function(result){
        // 成功获取授权码
        const authCode = result?.authCode;
        if(!authCode) {
            reject();
            return;
        }
        uni.setStorageSync('authCode', authCode)        
      },
      fail:function(err){
        // 获取授权码失败
        console.log('=======ERR=========',corpId, err);
        reject(err);
      }
    });
  })
}

​​​​4、下载支付宝开发者工具

钉钉同为阿里系列产品，因此也是使用的支付宝开发者工具，运行也是在支付宝小程序开发者工具即可。

支付宝小程序下载地址：https://alipay-miniapp-public.oss-cn-hangzhou.aliyuncs.com/mfupload/MiniProgramStudio-3.8.6-x64.exe

钉钉小程序开发者工具：https://plover.taobaolive.taobao.com/api/open/download/redirect?buildId=2171

5、配置钉钉的appid

6、获取钉钉的access_token

6.1 企业应用获取

https://oapi.dingtalk.com/gettoken?appkey={your_appkey}&appsecret={your_appsecret}

6.2 三方个人应用获取

https://oapi.dingtalk.com/sns/gettoken?appid={your_appid}&appsecret={your_appsecret}

7、获取钉钉表单的formId 用于服务端给客户端发送消息

<form @submit="formSubmit" report-submit="true">
  <button size="default" type="primary" form-type="submit" class="btnStyle">申请房间</button>
</form>
 
 
formSubmit(e) {
  // formId：通过e.detail.formId获取
  this.sendFormId(e.detail.formId)
}

注意：需要使用form组件，使用button的form-type='submit'的形式进行提交，uView无法获取formId。

8、发布后uView在uniapp中样式有时完全失效问题

个人三方应用发布后，一切正常，但是发布为企业内部应用后，发现uView组件库的所有样式丢失，无法使用！！！，找了很多很多的资料都不行，提工单也没解决，后来的后来......

uView在uniapp中样式有时完全失效问题

解决方法：

1、由于Hbuilderx版本问题，编译的代码中会多出一行样式，可以更换3.2.16版本；

2、去除编译后的uview组件中的json中的一个字段"styleIsolation": "apply-shared"，具体参考：支付小程序文档自定义组件样式隔离 - 支付宝文档中心

9、问题：安卓手机：页面跳转过程中发起的请求request:fail 12

errMsg: "request:fail 12"
errorMsg: "Socket closed"
originalData: undefined

处理方法：添加计时器或者使用异步回调；

原因：页面跳转会截断请求，导致请求出错，跳转和页面请求不能同步进行。