vue3+ts使用dingtalk-jsapi(钉钉h5免登)的正确方式

Vue3 + Vite + Typescript

1.安装

npm i dingtalk-jsapi
或
yarn add dingtalk-jsapi

2. shims-vue.d.ts写上如下代码(否则import会报红)

declare module 'dingtalk-jsapi'

3. 引入

import * as dd from "dingtalk-jsapi"

4. 获取钉钉corpId的方法(后面会用到)

export function getUrlParams(key: string){
  let query = window.location.search.substring(1)
  let vars = query.split("&")
  for (let i=0;i<vars.length;i++) {
    let pair = vars[i].split("=")
    if(pair[0] == key) return pair[1]
  }
  return false
}

5. 正确写法示例

const login = () => {
  const corpId = getUrlParams('corpId')
  // alert('corpId' + corpId)
  // console.log('env:', dd.env.platform)
  if (dd.env.platform !== "notInDingTalk") {
    dd.ready(() => {
      // 获取免登授权码
      dd.runtime.permission.requestAuthCode({
        corpId: corpId,
      }).then((onSuccess: any) => {
        // alert('success: '+ onSuccess.code)
        // 你的业务逻辑
        // ......
      }, (onFail: any) => {
        alert('err: ' + JSON.stringify(onFail))
      })
    })
  }
}