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

小程序 0

图片

说到小程序,开发的微信、支付宝等都比较多,钉钉的不管是资料还是问题的解决方案都比较少,最近在使用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

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

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

图片

也许您对下面的内容还感兴趣: