业务需求:关联企业微信,展示公司及部门信息(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 type类型:
image.png
1.2 安装包问题
image.png
参考地址:
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.1 在index.html文件少引入一个js,导致<ww-open-data type={type} openid={openid} />没有任何渲染也没有报错信息
3.2 在调取后端的wx配置信息接口传参的uri中含有#,也导致没有任何渲染,但是提示了错误码80001
ps:有不懂的欢迎留言或者哪里有写错的欢迎指正
