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

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

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

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

<template>
  <div>
     <ww-open-data :type='type' :openid='openid'></ww-open-data>
  </div>
</template>
<script>
export default {
  data(){
    return {}
  },
  created(){
      this.showData() 
  },
  methods: {
    showData(){
        //绑定ww-open-data组件，这样才能显示出姓名或部门名
      WWOpenData.bind(document.querySelector('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 this.api.get(
        'http://xxxxxxxxxxxxxxxxxxx',
        {
             url:`${window.location.href}`
        },
        )
        if (res.success == true) {
            wx.agentConfig({
              corpid: res.data.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
              agentid: parseInt(res.data.agentId), // 必填，企业微信的应用id （e.g. 1000247）
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
              jsApiList: ['selectExternalContact'], //必填，传入需要使用的接口名称
              success: function (result) {
                console.log(result,'请求微信成功')
                // 回调
              },
              fail: function (res) {
                if (res.errMsg.indexOf('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='item.type' :openid="item.openID"></OpenData>
          </template>
    </a-tree>
  </div>
</template>
<script>
import OpenData from './wwopendata.vue'
export default {
  components:{
      OpenData
  },
}