React如何获取企业微信的昵称

在开发企微项目中需要获取企业微信昵称，官方提供ww-open-data获取，具体说明相比有点少

useWwExternalContact代码如下

import { useEffect } from 'react'
import * as apiWxGetJsSdk from '@api/wxGetJsSdk'

export default function useWwExternalContact (visible = true) {
  useEffect(() => {
    if (!visible) {
      return
    }
    // 页面wx.agentConfig
    apiWxGetJsSdk.getAgent({
      url: location.href
    }).then(({ data }) => {
      wx.agentConfig({
        ...data.data,
        jsApiList: ['selectExternalContact', 'openEnterpriseChat', 'selectEnterpriseContact'], // 必填，传入需要使用的接口名称
        success: function (res) {
          // 显示绑定数据
          if (typeof WWOpenData === 'undefined') {
            console.error('---------------------WWOpenData is not defined----------------------')
          } else {
            if (WWOpenData.checkSession) {
              WWOpenData.checkSession({
                success: (res) => {
                  console.info('open-data 登录态校验成功')
                },
                fail: (res) => {
                  console.error('open-data 登录态过期')
                }
              })
            }
            if (document.querySelectorAll('ww-open-data')) {
              WWOpenData.bindAll(document.querySelectorAll('ww-open-data'))
            }
          }
        },
        fail: function (res) {
          console.error('wx.agentConfig-error', res)
          if (res.errMsg.indexOf('function not exist') > -1) {
            alert('版本过低请升级')
          }
        }
      })
    })
  }, [visible])
}

调用方法

import useWwExternalContact from '@utils/useWwExternalContact'

const openid = 'openid'
useWwExternalContact()
return <>
  <ww-open-data type="userName" openid={openid}></ww-open-data>
</>

补充html

记得引用相关js，如果是import可以忽略

<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>