企业微信通讯录组件如何在Vue使用，ww-open-data如何使用，antd的a-tree如何配合通讯录组件？

时间：2025-01-22 11:48:16

一.首先在使用CDN引入 企业微信的JS文件

<script src="/open/js/jweixin-1.2."></script>
<script src="/wwopen/js/jwxwork-1.0."></script>

二.单个封装ww-open-data组件

<template>
  <div>
     <ww-open-data :type='type' :openid='openid'></ww-open-data>
  </div>
</template>
<script>
export default {
  data(){
    return {}
  },
  created(){
      () 
  },
  methods: {
    showData(){
        //绑定ww-open-data组件，这样才能显示出姓名或部门名
      (('ww-open-data'))
    }
  },
  props:{
     //类型：分为部门和人员姓名
    type:{
      type:String,
      default:undefined
    },
      //id:人员或部门的ID
    openid:{
      type:String,
      default:undefined
    }
  }
}
</script>

三、请求后台给你返回的openID和type存入到数组中

四、携带当前url请求后端，通过后端返回的agentConfig参数请求企业微信接口配置

async createTree(){
     let res= await (
        'http://xxxxxxxxxxxxxxxxxxx',
        {
             url:`${}`
        },
        )
        if ( == true) {
            ({
              corpid: , // 必填，企业微信的corpid，必须与当前登录的企业一致
              agentid: parseInt(), // 必填，企业微信的应用id （. 1000247）
              timestamp: , // 必填，生成签名的时间戳
              nonceStr: , // 必填，生成签名的随机串
              signature: , // 必填，签名，见附录-JS-SDK使用权限签名算法
              jsApiList: ['selectExternalContact'], //必填，传入需要使用的接口名称
              success: function (result) {
                (result,'请求微信成功')
                // 回调
              },
              fail: function (res) {
                if (('function not exist') > -1) {
                  alert('版本过低请升级')
                }
              },
            })
          }
    }
}

五、通过第三步返回的openID数组进行渲染a-tree，因不返回名字所以通过ww-open-data组件渲染名字

<template>
  <div>
    <a-tree 
          blockNode
          checkable
          :checked-keys='checkedKeys'
          :tree-data='openidList'  第三步返回的数据在这,其他的看antd文档
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :selected-keys="selectedKeys"
          :selectable='false'
          @expand="onExpand"
          @check="onCheck">
            slotsScope需要后端返回  格式为：scopedSlots = {title: "custom"}
          <template slot="custom" slot-scope="item">
                <OpenData :type='' :openid=""></OpenData>
          </template>
    </a-tree>
  </div>
</template>
<script>
import OpenData from './'
export default {
  components:{
      OpenData
  },
}

相关文章