react 对接企业微信扫码登陆记录
1.在package.json里引入wecom/jssdk
npm i @wecom/jssdk
yarn @wecom/jssdk
我这里使用的版本是 "@wecom/jssdk": "^1.3.1",
2.在index.html里引入jdk
<script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>
*注:试过好几个版本的jdk，都会有一些莫名其妙的报错，或者引用不到，或是引用会报错，这个jdk是我尝试比较好用的jdk
http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js和https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js都可以使用 ，但是 https网站引入http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js会导致企业微信二维码显示不出来，建议直接使用https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js
3.在需要使用的组件中使用
import React, { Component } from 'react';
import * as ww from '@wecom/jssdk';
import { Link, withRouter } from 'react-router-dom';
@withRouter
export default class Weixin extends Component {
constructor(props) {
super(props);
}
//获取数据企业微信所需要的数据 appid、agentid、redirct_uri等数据
fetchData = () => {
fireGetRequest(GET_WECHATCONFIG, { type: 'WE_CHAT_INFO' })
.then((res) => {
if (res.code !== 200) {
// openNotification('error', '获取配置信息失败，请重试', res.message);
return;
}
//获取数据之后传入实例化函数
this.initQrcode(res.data);
})
.catch((e) => {
// openNotification('error', '获取配置信息失败，请重试', res.message);
});
};
//实例化函数
initQrcode = (data) => {
//实例化对象，挂载到页面，这里返回的就是二维码
new window.WwLogin({
id: 'ww_login',
login_type: 'CorpApp',//登录类型。ServiceApp：服务商登录；CorpApp：企业自建/代开发应用登录。，
appid: data.corpId, //企业微信注册的企业Id，必传
agentid: data.agentId,//企业微信注册时的应用程序Id ，必传
redirect_uri: encodeURI( //扫码成功后的回调地址，这里我是前端写的页面，将路由给后端，当扫码成功后，由后端进行页面的跳转，必传
`${data.redirectUri}?userId=${getItem(
STORAGE_KEY_MAPPING.USER_ID
)}`//userId是自己加的在回调页面需要的参数
),
lang: 'zh' // 不必传
});
};
//必传参数如果没有传，二维码展示不出来，会报参数错误，有时候会提示哪个参数的错误，有时候只会报参数错误，请联系管理员
//进入页面时获取数据
componentDidMount() {
this.fetchData();
}
render() {
//装载二维码的容器
return (
<div
style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
id="ww_login"
></div>
);
}
}
*注，如果没有问题，到这里应该就可以展示出来企业微信的二维码了，这里只是前端需要做的东西，想要二维码正确展示出来少不了后端的配置，这里要和后端同学一起配置
*附：企业微信官网：https://developer.work.weixin.qq.com/document/path/98151
