企业微信 + react

业务需求:关联企业微信,展示公司及部门信息(tx的文档写的很混乱,也很少有相关的案例)

一、在index.html文件中引入sdk

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

二、封装wx配置方法

//企业微信js验证
export function qyWxConfig(){
	return new Promise(resolve=>{
		let axiosObj = {
                    uid:uid,
                    uri:window.location.href.split('#')[0]   //(注意:此参数不能包含#号[当前网页的URL， 不包含#及其后面部分],可参考文档https://open.work.weixin.qq.com/devtool/query?e=40093)
                };
        request(`xxx/getQYWXJsConfig`, {  //后端提供wx配置相关的参数
            method: 'POST',
            headers: config.headers,
            credentials: "include",//解决跨域
            body: config.parseJson(axiosObj)
        }).then((res) => {
            if (res.data.code == 200) {
                let agent_config = res.data.data.agent_config;
                wx.agentConfig({
                    corpid: agent_config.corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
                    agentid: agent_config.agentId, // 必填，企业微信的应用id （e.g. 1000247）
                    timestamp: agent_config.timestamp, // 必填，生成签名的时间戳
                    nonceStr: agent_config.nonceStr, // 必填，生成签名的随机串
                    signature: agent_config.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
                    jsApiList: ['selectExternalContact'], //必填
                    success: function(res) {
                        // 回调
                        resolve(res)
                    },
                    fail: function(res) {
                        if(res.errMsg.indexOf('function not exist') > -1){
                            // alert('版本过低请升级')
                            message.error('版本过低请升级');
                            return;
                        }
                    }
                });
            } else {
                // message.error(res.data.msg);
            }
        })
	})
}

三、应用代码 以antd的select组件为使用场景

componentDidMount(){
        this.requestApi('getQyWxInfo');//获取企业信息
        let that = this;
        qyWxConfig().then(res=>{
            if(res.err_Info == 'success'){
                that.requestApi('getQyWxdepartList',obj);//获取企业部门列表
            }
        }).catch(err=>{
            message.error(err);
            return;
        })
    }

let qyWxDepartList = [{department_id:1}];//获取的部门列表
let depart = '';//选择的部门id
<Select defaultValue={qyWxDepartList && qyWxDepartList.length > 0 ? '' : ''} style={{ width: 124 }} onChange={this.handleSel.bind(this,'depart')} value={depart} notFoundContent="暂无数据">
                                {
                                    qyWxDepartList && qyWxDepartList.length > 0 ? <Option value="">全部</Option> : ''
                                }
                                {
                                    qyWxDepartList && qyWxDepartList.length > 0 ? qyWxDepartList.map(item=>(
                                        <Option value={String(item.department_id ? item.department_id : 0)}><ww-open-data type="departmentName" openid={item.department_id ? item.department_id : '0'} /></Option>  //注意type类型为两种代码后有相关截图
                                    )) : ''
                                }
</Select>

四、参考示例及遇到的问题

1. 解释代码
   1.1 type类型:
   1.2 安装包问题
   

2. 参考地址:
   https://work.weixin.qq.com/api/doc/90001/90143/91958
   https://work.weixin.qq.com/api/doc/90001/90144/90548
   https://open.work.weixin.qq.com/devtool/query?e=40093
   https://open.work.weixin.qq.com/wwopen/common/readDocument/20509

3. 遇到的问题
   3.1 在index.html文件少引入一个js,导致没有任何渲染也没有报错信息
   3.2 在调取后端的wx配置信息接口传参的uri中含有#,也导致没有任何渲染,但是提示了错误码80001

ps:有不懂的欢迎留言或者哪里有写错的欢迎指正