获取企业微信通讯录和树选择

最近有个需求，需要实现在第三方网站拿到企业微信的通讯录，并拿到通过树状图方式渲染选择

要实现这个需求有以下几个步骤

1. 后端拿到通讯录部门 id 传给前端，前端通过 通讯录展示组件 ww-open-data 结合树形控件将部门展示出来

企业微信通讯录展示组件使用文档传送门：work.weixin.qq.com/api/doc/900…

a. 通过企业微信登录应用管理后台

在非微信、企业微信内置浏览器中使用 open-data 时，需要通过企业微信管理端跳转或第三方登录授权进行登录。

需要注意，通过上述方法登录跳转的目标域名要和使用 open-data 的页面域名保持一致。

b. 引入 open-data SDK

<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>

c. 进行 agentConfig

无论是微信、企业微信的内置浏览器还是第三方浏览器，都需要通过 agentConfig 登记第三方应用的身份信息。

需要注意，在第三方浏览器中调用 wx.agentConfig 前不需要进行 wx.config。

注意：在企业微信客户端的页面上，进行 agentConfig 的调用，必须要等 wx.config 完成后才调用（即 wx.config 的成功回调）

d. 绑定 open-data 元素

WWOpenData.bind(document.querySelector('ww-open-data'))

e. 使用 SDK

注意：这里的 openid 是 userid 和 departmentid 的统称

<ww-open-data type="userName" openid="{{openid}}"></ww-open-data>

具体实现方式看下方代码

showMembers = () => {
    const params = {url: window.location.href}
    const getChildren = (children) => {
        if (children && children.length > 0) {
            const childrenData = []
            for (let i = 0; i < children.length; i++) {
                const childrenItem = {
                    title: <ww-open-data type="departmentName" openid={children[i].id}/>,
                    value: children[i].id,
                    key: children[i].id,
                    children: getChildren(children[i].children)
                }
                childrenData.push(childrenItem)
            }
            return childrenData
        }
    }
    // 拿到签名信息进行 agentConfig
    getSign(params).then(res => {
        const {code, data} = res
        if (code === 200) {
            wx.agentConfig({
                corpid: data.corpid, 
                agentid: data.agentid, 
                timestamp: data.timestamp, 
                nonceStr: data.nonceStr, 
                signature: data.signature,
                jsApiList: ['selectExternalContact'], 
                success: function (res) {
                // 绑定 open-data 元素
                    WWOpenData.bind(document.querySelector('ww-open-data'))
                },
                fail: function (res) {
                    if (res.errMsg.indexOf('function not exist') > -1) {
                        alert('版本过低请升级')
                    }
                }
            })

        }
    })
    getDepartmentList().then(res => {
        const {code, data} = res
        if (code === 200 && data) {
            const treeData = [{
            // SDK 将在绑定的元素上渲染出对应的开放数据，注意此处 type 值 和 openid 的区分
                title: <ww-open-data type="departmentName" openid={data.id}/>,
                value: data.id,
                key: data.id,
                // 通过调用递归方法完成树形数据结构渲染
                children: getChildren(data.children)
            }]
            this.setState({departmentTree: treeData, visible: true})
        }
    })
}

2. 监听点击事件，通过 department id 调接口获取 user id ，照葫芦画瓢，通过 open-data SDK 渲染出成员名称，注意此时 type="userName"